資訊專(zhuān)欄INFORMATION COLUMN
摘要：一部分沒(méi)錄入的技巧原因是部分屬性將被標(biāo)準(zhǔn)廢棄，如。正確的滾動(dòng)底部留白方式如果使用留白，在和不會(huì)顯示。正方觀點(diǎn)觀點(diǎn)觀點(diǎn)反方觀點(diǎn)觀點(diǎn)正確的塊級(jí)元素右對(duì)齊值對(duì)于來(lái)講是占用剩余的空間。
以下技巧的具體原理和解釋請(qǐng)支持張老師的《CSS世界》，在這里不做展開(kāi)。
一部分沒(méi)錄入的技巧原因是部分屬性將被標(biāo)準(zhǔn)廢棄，如：clip。還有一部分是因?yàn)閭€(gè)人覺(jué)得兼容性不好，而且CSS3的一些特性可以彌補(bǔ)，比如text-align:justify;，完全可以用flex布局實(shí)現(xiàn)。
應(yīng)網(wǎng)友要求，加入部分配圖，配圖原則是因?yàn)榉乐勾a量大而去掉的無(wú)用屬性（如背景顏色）造成的一眼望去好像是沒(méi)效果的技巧會(huì)加上一些配圖，如果大家測(cè)試過(guò)程中遇到?jīng)]有效果的現(xiàn)象，建議通過(guò)審查元素去查看以下元素的幾何屬性。還有一些是復(fù)制粘貼就可以得到的效果我就不截圖了（想到可能讀者懶的問(wèn)題，我把格式寫(xiě)成下面的主要目的是直接復(fù)制到body中就可以用了），因?yàn)槠L(zhǎng)了。
本文首發(fā)在我的博客
主要用于子元素浮動(dòng)（float）之后，父元素?zé)o法撐起高度和寬度。
因?yàn)閐iv嵌套著p，所以p的尺寸并不會(huì)超過(guò)div。但是要注意，當(dāng)p的內(nèi)容為英文單詞組成的時(shí)候，如果單詞過(guò)長(zhǎng)，比如“pppppppppppppppppppppppppppp”這種甚至更長(zhǎng)，會(huì)被視為一個(gè)單位而造成超出div的尺寸。
如果你想要英文字符也有中文字符的效果的話，在p使用“word-break:break-all”。
目的在于制造一個(gè)凹或者凸的形狀，利用了”2“中英文單詞不換行的特性
相信這點(diǎn)大部分人都知道，但是有一些奇怪的行為，比如說(shuō)width
缺點(diǎn)是，如果高度太大會(huì)造成展開(kāi)過(guò)快和收回延遲，所以這個(gè)足夠大的值盡量適當(dāng)。
需要注意的是，圖片顯示完畢后，img會(huì)成為“替換元素”，而替換元素是無(wú)法設(shè)置偽元素的，因?yàn)閏ontent內(nèi)容被圖片替換掉了；還需要注意attr里面的變量不能加雙引號(hào)。
需要注意的是，如果右鍵保存圖片，保存的是src內(nèi)的圖片，而不是替換之后的。
用h1的原因主要是因?yàn)镾EO，語(yǔ)義化的問(wèn)題。
Weismann"s blog
需要注意的是，第一個(gè)i不能換行，換行后會(huì)產(chǎn)生后移的結(jié)果。
在IE6-IE9下是...，其它都是動(dòng)態(tài)的；使用dot的目的是語(yǔ)義化和低版本瀏覽器的兼容。
正在加載中...
第一種主要利用了內(nèi)聯(lián)元素的padding只會(huì)影響外觀和不影響布局的特點(diǎn)；第二種針對(duì)其他屬性會(huì)改變背景圖定位的一種方式。
demo
利用margin來(lái)改變尺寸，需要注意，改變尺寸的元素水平方向的尺寸不能是確定的。
如果使用padding留白，在Firefox和IE不會(huì)顯示。
注意container高度不能是確定值，缺點(diǎn)是如果在內(nèi)部使用錨點(diǎn)定位會(huì)出現(xiàn)問(wèn)題。
正方觀點(diǎn)
觀點(diǎn)1
觀點(diǎn)1
反方觀點(diǎn)
觀點(diǎn)1
auto值對(duì)于margin來(lái)講是占用剩余的空間。
demo
此技巧主要說(shuō)明border的顏色默認(rèn)是繼承自color的
和增加點(diǎn)擊區(qū)域第二種方式一樣
缺點(diǎn)是border不支持百分比，最多2-3欄。
至于為什么說(shuō)“近似”，一句話說(shuō)不清楚，請(qǐng)看開(kāi)頭
基于行高實(shí)現(xiàn)的...
產(chǎn)生的問(wèn)題和“幽靈空白節(jié)點(diǎn)”和x-height有關(guān)，你可以嘗試在img前加入x字符觀察一下。
特點(diǎn)是文字大小的改變不會(huì)影響對(duì)齊。ex代表的是x-height的高度，根據(jù)x字形的不同（如font-family）而不同。
拉拉
文字
特點(diǎn)是內(nèi)容和瀏覽器尺寸變化都是自動(dòng)變換大小和位置，可以通過(guò)偽元素的height控制上下位置。
demo
文字環(huán)繞圖片
float的真正用途。
demo，demo，demo，demo，demo，demo，demo
利用overflow:hidden自定義滾動(dòng)條
事實(shí)上overflow:hidden是可以滾動(dòng)的，可以通過(guò)錨點(diǎn)、focus、scrollTop滾動(dòng)。滾動(dòng)條的實(shí)現(xiàn)請(qǐng)自行發(fā)揮。
通過(guò)label實(shí)現(xiàn)的選項(xiàng)卡效果
與錨點(diǎn)不同的是不會(huì)觸發(fā)由內(nèi)到外（多層滾動(dòng)造成的類(lèi)似于事件冒泡的效果）的頁(yè)面跳動(dòng)（元素上邊與窗體上邊對(duì)齊），還支持Tab選項(xiàng)的效果；缺點(diǎn)是需要JS支持選中效果。
1234
“包含塊”的絕對(duì)定位元素“一柱擎天”問(wèn)題
拉拉
“無(wú)依賴(lài)絕對(duì)定位”的表單驗(yàn)證應(yīng)用
在一個(gè)元素上如果單用（父元素的position屬性均是默認(rèn)）“position:absolute”，事實(shí)上元素將原地不動(dòng)，最終會(huì)產(chǎn)生BFC。
郵箱格式不準(zhǔn)確（示意）...
主體頁(yè)面?zhèn)冗厵?/h5>
利用text-align和fixed的組合；height置0和overflow隱藏目的是為了不影響主體的體驗(yàn)，而之所以絕對(duì)定位元素沒(méi)有被隱藏的原因是“如果overflow不是定位元素，同時(shí)絕對(duì)定位元素和overflow容器之間也沒(méi)有定位元素，則overflow無(wú)法對(duì)絕對(duì)定位元素進(jìn)行剪裁。”—《CSS世界》。
不通過(guò)width和height設(shè)置窗體全占用？
利用top和bottom或left和right同時(shí)設(shè)置的時(shí)候會(huì)觸發(fā)流體特性的特點(diǎn)；與通過(guò)”top:0;left:0;width:100%;height:100%;“相比，在設(shè)置margin、border、padding的時(shí)候不會(huì)溢出到窗體的外面（就算你想到box-sizing，那margin呢？）；而之所以用span的原因是想說(shuō)明絕對(duì)定位會(huì)將元素的display置為block。
margin:auto水平垂直居中
紙張卷邊陰影
主要利用“position: relative;z-index: 0;”創(chuàng)建層疊上下文與z-index的負(fù)值將陰影置于“contaniner”和“page”之間。
你可以嘗試將關(guān)鍵CSS去掉查看效果。
demo
demo
隱藏文字
說(shuō)這個(gè)主要是為了說(shuō)明，Chrome瀏覽器如果字體設(shè)置12px以下的大小（新版本已經(jīng)不限制了），會(huì)被自動(dòng)處理成12px，但是有一個(gè)值除外，0。
解決text-decoration下劃線和文本重疊
因?yàn)槭莾?nèi)聯(lián)元素，所以完全不用擔(dān)心會(huì)影響元素高度的問(wèn)題。
自動(dòng)將輸入的小寫(xiě)字母轉(zhuǎn)換大寫(xiě)
價(jià)格場(chǎng)景下的首個(gè)符號(hào)選擇器
特點(diǎn)是可以讓html結(jié)構(gòu)顯得干凈
￥399
元素隱藏同時(shí)資源不加載
后續(xù)可通過(guò)script.innerHTML訪問(wèn)。
頭像裁剪矩形鏤空效果
主要利用outline。
自定義光標(biāo)
需要注意IE只支持cur文件。
修改水平流到垂直流
兼容到IE7；此應(yīng)用涉及較多東西，所有水平流的特性都可以應(yīng)用到垂直流中（比如水平居中變成了垂直居中）。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114398.html
摘要：地址前端詞典提高幸福感的個(gè)技巧推薦文章介紹了個(gè)更加簡(jiǎn)潔優(yōu)雅的使用技巧。這些技巧確實(shí)在實(shí)際開(kāi)發(fā)中十分常用，作者總結(jié)的很好，特別是針對(duì)降級(jí)問(wèn)題又學(xué)到了一個(gè)新思路。值得奮戰(zhàn)在一線的攻城獅們閱讀學(xué)習(xí)。Ladies and 鄉(xiāng)親們，摩拜前端周刊起航啦～ 摩拜前端團(tuán)隊(duì)會(huì)收集每周前端優(yōu)秀文章，每周五發(fā)布至掘金平臺(tái)，歡迎關(guān)注我們～ 過(guò)個(gè)沒(méi)什么了不起的一天，耀眼一些，你有資格 Top 榜 「中高級(jí)前端」...
簡(jiǎn)介 無(wú)障礙、HTML 小細(xì)節(jié)、焦點(diǎn)、a11y、Accessibility、框架選擇 無(wú)障礙開(kāi)發(fā)還是應(yīng)該從 HTML 開(kāi)始聊起，無(wú)論是盲人閱讀器還是瀏覽器等工具最核心的部分還是在 HTML，畢竟沒(méi)了 CSS 只是不美觀了，沒(méi)了 JavaScript 只是少了交互和無(wú)限擴(kuò)展的可能性。 有的同學(xué)會(huì)說(shuō)了產(chǎn)品和老板拿著鞭子在后頭趕馬車(chē)哪里有時(shí)間寫(xiě)這些。現(xiàn)實(shí)是這樣的，但是在選擇UI框架的時(shí)候可以選擇 無(wú)障礙...
摘要：除特別標(biāo)注外，文章非原創(chuàng)插圖全部來(lái)自課程相關(guān)資源。劇透預(yù)警內(nèi)容包含大作業(yè)的關(guān)鍵問(wèn)題解法分析。為的返回值此方案下，判斷只需要對(duì)應(yīng)，判斷使用結(jié)果準(zhǔn)確，判斷檢測(cè)的對(duì)應(yīng)是否為。更新此方法已確定違反的。 Princeton的算法課是目前為止我上過(guò)的最酣暢淋漓的一門(mén)課，得師如此夫復(fù)何求，在自己的記憶徹底模糊前，愿對(duì)這其中一些印象深刻的點(diǎn)做一次完整的整理和回顧，以表敬意。 注：這是一篇更關(guān)注個(gè)人努力...
摘要：整理完了高性能這本書(shū)，往下就需要快速處理世界，這本講解特性的書(shū)非常值得一讀，內(nèi)容完整，重點(diǎn)突出，實(shí)戰(zhàn)性強(qiáng)，就是語(yǔ)言啰嗦。由于全書(shū)內(nèi)容太多，而且需要一點(diǎn)一點(diǎn)的整理，所以放到了站點(diǎn)上，方便大家查看。 整理完了《高性能JavaScript》這本書(shū)，往下就需要快速處理《CSS世界》，這本講解CSS特性的書(shū)非常值得一讀，內(nèi)容完整，重點(diǎn)突出，實(shí)戰(zhàn)性強(qiáng)，就是語(yǔ)言啰嗦。由于全書(shū)內(nèi)容太多，而且需要一點(diǎn)一...
摘要：大小僅僅只有，同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。微信公眾號(hào)嘻嘻圖如下使用生成世界地圖非常方便，配置參數(shù)記錄下，有興趣的可以看看本例中引入操作。當(dāng)用戶(hù)同意瀏覽器分享用戶(hù)位置后，地圖將自動(dòng)調(diào)整視窗中心為該位置。 介紹：Leaflet是一個(gè)開(kāi)源的JavaScript庫(kù)，對(duì)移動(dòng)端友好且對(duì)地圖有很好的交互性。 大小僅僅只有 33 KB， 同時(shí)具有大多數(shù)地圖所需要的特點(diǎn)。 Leaflet設(shè)計(jì)的非常簡(jiǎn)...
閱讀 2312·2021-11-16 11:51
閱讀 3520·2021-09-26 10:14
閱讀 1855·2021-09-22 15:58
閱讀 1107·2019-08-30 15:52
閱讀 2023·2019-08-30 15:43
閱讀 2623·2019-08-30 13:46
閱讀 920·2019-08-30 13:10
閱讀 1031·2019-08-29 18:32
