【一起讀書】40個(gè)來自CSS世界中的實(shí)用技巧匯總
1、清除浮動(dòng)
<!-- html --><div class="clear"><img src="demo.gif"></div><!-- css --><style>img {float: left;}/* 清除浮動(dòng) */.clear::after {content: "";display: block;clear: both;}</style>
2、文字少時(shí)居中，多時(shí)靠左
但是要注意，當(dāng)p的內(nèi)容為英文單詞組成的時(shí)候，如果單詞過長(zhǎng)，而不是“ pppppppppppppppppppppppppppppp”這樣的一次，會(huì)被視為一個(gè)單位而造成超過div的尺寸。
如果你想要英文字符也有中文字符的效果的話，在p使用“ word-break：break-all”。
<!-- html --><div class="box"><p class="content"></p></div><!-- css --><style>.box {text-align: center;}.content {display: inline-block;text-align: left;}</style>
3、凹凸人
目的在于制造一個(gè)凹或凸的形狀，利用了“ 2”。
<!-- html --><div class='ao'></div><!-- CSS --><style>.ao {display: inline-block;width: 0;}.ao::before {content: "love 你 love";outline: 2px solid #000;color: #fff;}</style>
4、讓padding，border不影響盒模型的大小
相信這點(diǎn)大部分人都知道，但是有一些奇怪的行為，比如說width <content + padding會(huì)怎樣？實(shí)際上當(dāng)padding + border> width時(shí)，元素的渲染大小（Chrome下）為padding + border；而padding + border <width時(shí)，允許剩余空間分配給content。
<!-- html --><div></div><!-- CSS --><style>div {box-sizing: border-box;}</style>
身高：100％占屏效果
<!-- html --><div></div><!-- CSS方法一 --><style>html,body {height: 100%;}div {height: 100%}</style><!-- CSS方法二 --><style>div {position: absolute;height: 100%;}</style>
5、任意高度元素展開
缺點(diǎn)是，如果高度太大會(huì)造成展開過快和重復(fù)中斷，那么這個(gè)足夠大的值應(yīng)該適當(dāng)。
<!-- html --><div></div><!-- CSS --><style>div {max-height: 0;overflow: hidden;transition: max-height .25s;}div.active {max-height: 666px; /* 需要足夠大的值 */}</style>
6、優(yōu)雅的圖片未加載或加載失敗效果
需要注意的是，圖片顯示完成后，img會(huì)成為“替換元素”，而替換元素是無法設(shè)置偽元素的，因?yàn)閮?nèi)容被圖片替換掉了；還需要注意attr里面的變量不能加雙引號(hào)。
<!-- html --><div><img src="demo.gif" alt="lululu"></div><!-- CSS --><style>div {width: 100px;height: 100px;overflow: hidden;}img {display: inline-block;width: 100%;height: 100%;position: relative;}img::after {/* 生成 alt 信息 */content: attr(alt);/* 尺寸和定位 */position: absolute; left: 0;bottom: 0;right: 0;/* 顏色 */background-color: rgba(0,0,0,.5);/* alt 信息隱藏 */transform: translateY(100%);/* 過渡動(dòng)畫效果 */transition: transform .2s;}img:hover::after {/* alt 信息顯示 */transform: translateY(0);}</style>
7、CSS的懸浮圖片替換效果
需要注意的是，如果快捷保存圖片，保存的是src內(nèi)的圖片，而不是替換之后的。
<!-- html --><img src="demo.gif"><!-- CSS --><style>img:hover {content: url(amazing.gif);}</style>
8、利于seo的“替換元素”標(biāo)題logo
用h1的原因主要是因?yàn)镾EO，語義化的問題。
<!-- html --><h1>Weismann's blog</h1><!-- CSS --><style>h1 {content: url(logo.gif);}</style>
9、高兼容，自動(dòng)等寬，底部對(duì)齊的柱狀圖
需要注意的是，第一個(gè)i不能換行，換行后會(huì)產(chǎn)生后移的結(jié)果。
<!-- html --><div class="box"><i class="bar"></i><i class="bar"></i><i class="bar"></i><i class="bar"></i></div><!-- CSS --><style>.box {width: 256px;height: 256px;text-align: justify;}.box:before {content: "";display: inline-block;height: 100%;}.box:after {content: "";display: inline-block;width: 100%;}.bar {display: inline-block;width: 20px;/* height自定 */}</style>
10、高兼容性的加載效果
在IE6-IE9下是...，其他都是動(dòng)態(tài)的；使用點(diǎn)的目的是語義化和低版本瀏覽器的兼容。
<!-- html -->正在加載中<dot>...</dot><!-- CSS --><style>dot {display: inline-block;height: 1em;line-height: 1;text-align: left;vertical-align: -.25em;overflow: hidden;}dot::before {display: block;content: '...\A..\A.';white-space: pre-wrap;animation: dot 3s infinite step-start both;}@keyframes dot {33% { transform: translateY(-2em); }66% { transform: translateY(-1em); }}</style>
11、擴(kuò)大點(diǎn)擊區(qū)域
第一種主要利用了內(nèi)聯(lián)元素的填充只會(huì)影響外觀和不影響布局的特點(diǎn)；第二種針對(duì)其他屬性會(huì)改變背景圖定位的一種方式。
<!-- html --><a href="">demo</a><!-- CSS1 --><style>a {padding: 20px 0;}</style><!-- CSS2 --><style>a {border: 11px solid transparent;}</style>
12、不使用偽元素的“三道杠”和“圓點(diǎn)”效果
<!-- html --><i class="icon"></i><!-- CSS三道杠 --><style>.icon {display: inline-block;width: 140px; height: 10px;padding: 35px 0;border-top: 10px solid;border-bottom: 10px solid;background-color: currentColor;background-clip: content-box;}</style><!-- CSS三道杠2 --><style>.icon {width: 120px;height: 20px;border-top: 60px double;border-bottom: 20px solid;}</style><!-- CSS圓點(diǎn) --><style>.icon {display: inline-block;width: 100px; height: 100px;padding: 10px;border: 10px solid;border-radius: 50%;background-color: currentColor;background-clip: content-box;}</style>
13、導(dǎo)航欄消除右邊多余的尺寸
利用保證金來改變尺寸，需要注意，改變尺寸的元素水平方向的尺寸不能是確定的。
<!-- html --><div><ul><li></li><li></li><li></li></ul></div><!-- CSS --><style>div {width: 380px;}ul {margin-right: -20px;}ul > li {float: left;width: 100px;margin-right: 20px;}</style>
14、正確的滾動(dòng)底部留白方式
如果使用padding留白，在Firefox和IE不會(huì)顯示。
<!-- html --><div class="box"><img src="demo.gif"></div><!-- CSS --><style>.box {height:200px;overflow:auto;}.box>img {margin: 50px 0;}</style>
15、高兼容的多欄等高
注意container高度不能是確定值，缺點(diǎn)是如果在內(nèi)部使用錨點(diǎn)定位會(huì)出現(xiàn)問題。
<!-- html --><div class="container"><div id="colLeft" class="column-left"><h4>正方觀點(diǎn)</h4><p>觀點(diǎn)1</p><p>觀點(diǎn)1</p></div><div id="colRight" class="column-right"><h4>反方觀點(diǎn)</h4><p>觀點(diǎn)1</p></div></div><!-- CSS --><style>.container {overflow: hidden;}.column-left,.column-right {margin-bottom: -9999px;padding-bottom: 9999px;width: 50%;float: left;}.column-left {background-color: #34538b;}.column-right {background-color: #cd0000;}</style>
16、正確的塊級(jí)元素右對(duì)齊
自動(dòng)值對(duì)于保證金是占用剩余的空間。
<!-- html --><div>demo</div><!-- CSS --><style>div {width: 100px;margin-left: auto;}</style>
17、圖片上傳增加框
此技巧主要說明border的顏色默認(rèn)是繼承自color的。
<!-- html --><div class="add"></div><!-- CSS --><style>.add {display: inline-block;width: 76px; height: 76px;color: #ccc;border: 2px dashed;text-indent: -12em;transition: color .25s;position: relative;overflow: hidden;}.add:hover {color: #34538b;}.add::before, .add::after {content: '';position: absolute;top: 50%;left: 50%;}.add::before {width: 20px;border-top: 4px solid;margin: -2px 0 0 -10px;}.add::after {height: 20px;border-left: 4px solid;margin: -10px 0 0 -2px;}</style>
18、不影響背景圖片位置設(shè)置邊距。
和增加點(diǎn)擊區(qū)域第二種方式一樣。
<!-- html --><div class="box"></div><!-- CSS --><style>.box {display: inline-block;width: 100px;height: 100px;border-right: 50px solid transparent;background-position: 100% 50%;}</style>
19、border制作梯形，各種三角形
<!-- html --><div></div><!-- CSS梯形 --><style>div {width: 10px; height: 10px;border: 10px solid;border-color: #f30 transparent transparent;}</style><!-- CSS三角 --><style>div {width: 0;border-width: 10px 20px;border-style: solid;border-color: #f30 transparent transparent;}</style><!-- CSS直角三角 --><style>div {width: 0;border-width: 10px 20px;border-style: solid;border-color: #f30 #f30 transparent transparent;}</style>
20、高兼容雙欄，一邊等寬一邊自適應(yīng)，等高布局
缺點(diǎn)是邊框不支持百分比，最多2-3欄。
<!-- html --><div class="box"><nav><div>123</div><div>123</div><div>123</div></nav><section><div>1234</div></section></div><!-- CSS --><style>.box {border-left: 150px solid #333;background-color: #f0f3f9;}.box::after {content: "";display: block;clear: both;}.box > nav {width: 150px;margin-left: -150px;float: left;}.box > section {overflow: hidden;}</style>
21、內(nèi)聯(lián)元素“近似”垂直居中
而為什么說“近似”，一句話說清楚，請(qǐng)看開頭。
<!-- CSS --><style>span {line-height: 24px;}</style>
22、多行內(nèi)容“近似”垂直居中
<!-- html --><div class="box"><div class="content">基于行高實(shí)現(xiàn)的...</div></div><!-- CSS --><style>.box {width: 120px;line-height: 120px;background-color: #f0f3f9;}.content {display: inline-block;line-height: 20px;margin: 0 20px;vertical-align: middle;}</style>
21、容器內(nèi)圖片的垂直方向間隙問題
產(chǎn)生的問題和“幽靈空白子系統(tǒng)”和x-height有關(guān)，你可以嘗試在img前加入x字符觀察一下。
<!-- html --><div class="box"><img src="demo.gif"></div><!-- CSS --><style>.box {width: 280px;outline: 1px solid #aaa;text-align: center;/* 解決方案1 */font-size: 0;/* 解決方案2 */line-leight: 0;}.box > img {height: 96px;/* 解決方案3 */display: block;}</style>
22、圖標(biāo)文字對(duì)齊
ex代表的是x-height的高度，根據(jù)x字形的不同（如font-family）而不同。
<!-- 方式一 --><!-- html --><div class="box"><p><i class="icon icon-demo"></i>拉拉</p></div><!-- CSS --><style>.box {/* 根據(jù)圖片大小變化 */line-height: 20px;}p {font-size: 40px;}.icon {display: inline-block;width: 20px;height: 20px;white-space: nowrap;letter-spacing: -1em;text-indent: -999em;}.icon::before {/* 低版本IE7兼容 */content: '\3000';}.icon-demo {background: url(demo.png) no-repeat center;}</style><!-- 方式二 --><!-- html --><p>文字 <img src="delete.png"></p><!-- CSS --><style>p {font-size: 14px;}p > img {width: 16px; height: 16px;vertical-align: .6ex;position: relative;top: 8px;}</style>
23、永遠(yuǎn)居中的彈框
特點(diǎn)是內(nèi)容和瀏覽器尺寸變化都是自動(dòng)變換大小和位置，可以通過偽元素的高度控制上下位置。
<!-- html --><div class="container"><div class="dialog">demo</dialog></div><!-- CSS --><style>.container {position: fixed;top: 0; right: 0; bottom: 0; left: 0;background-color: rgba(0,0,0,.5);text-align: center;font-size: 0;white-space: nowrap;overflow: auto;}.container::after {content: '';display: inline-block;height: 100%;vertical-align: middle;}.dialog {display: inline-block;vertical-align: middle;text-align: left;font-size: 14px;white-space: normal;/* 彈框樣式 */padding: 10px 14px;border: 1px solid #000;border-radius: 4px;background: #fff;}</style>
24、文字環(huán)繞圖片
float的真正用途。
<!-- html --><div class="box"><div><img src="demo.gif"></div><p>demo，demo，demo，demo，demo，demo，demo</p></div><!-- CSS --><style>.box {width: 100px;}img {float: left;width: 40px;height: 40px;}</style>
25、利用溢出：隱藏自定義滾動(dòng)條
實(shí)際上overflow：hidden是可以滾動(dòng)的，可以通過錨點(diǎn)，focus，scrollTop滾動(dòng)。滾動(dòng)條的實(shí)現(xiàn)請(qǐng)自行發(fā)揮。
26、通過標(biāo)簽實(shí)現(xiàn)的選項(xiàng)卡效果
與錨點(diǎn)不同的是不會(huì)觸發(fā)由內(nèi)到外（多層滾動(dòng)造成的某種事件冒泡的效果）的頁面跳動(dòng)（元素上邊與分段上邊對(duì)齊），還支持Tab選項(xiàng)的效果；缺點(diǎn)是需要js支持效果。
<!-- html --><div class="box"><div class="list"><input id="one">1</div><div class="list"><input id="two">2</div><div class="list"><input id="three">3</div><div class="list"><input id="four">4</div></div><div class="link"><label class="click" for="one">1</label><label class="click" for="two">2</label><label class="click" for="three">3</label><label class="click" for="four">4</label></div><!-- CSS --><style>.box {height: 10em;border: 1px solid #ddd;overflow: hidden;}.list {height: 100%;background: #ddd;position: relative;}.list > input {position: absolute; top:0;height: 100%; width: 0;border:0; padding: 0; margin: 0;}</style>
27、“包含塊”的絕對(duì)定位元素“一柱擎天”問題
<!-- html --><div class="father"><div class="son">拉拉</div></div><!-- CSS --><style>.father {position: relative;width: 20px;height: 20px;}.son {position: absolute;/* 解決方案 */white-space: nowrap;}</style>
28、“無依賴絕對(duì)定位”的表單驗(yàn)證應(yīng)用
在一個(gè)元素上如果單用（父元素的位置屬性均是替換）“ position：absolute”，事實(shí)上元素將原地不動(dòng)，最終會(huì)產(chǎn)生BFC。
<!-- html --><div class="group"><label class="label"><span class="star">*</span>郵箱</label><div class="cell"><input type="email" class="input"><span class="remark">郵箱格式不準(zhǔn)確（示意）</span></div></div><div class="group">...</div><!-- CSS --><style>.group {width: 300px;}.label {float: left;}.remark {position: absolute;}</style>
29、主體頁面?zhèn)冗厵?/span>
利用text-align和fixed的組合；高度放置0和overflow隱藏目的是為了不影響主體的體驗(yàn)，而之所以絕對(duì)定位元素沒有被隱藏的原因是“如果overflow不是定位元素，同時(shí)絕對(duì)定位元素和overflow容器同時(shí)也沒有定位元素，則溢出無法對(duì)絕對(duì)定位元素進(jìn)行剪裁。” —《 CSS世界》。
<!-- html --><div class="alignright"><span class="follow"></span></div><!-- CSS --><style>.alignright {height: 0;text-align: right;overflow: hidden;background: blue;}.alignright:before {content: "\2002";}.follow {position: fixed;bottom: 100px;z-index: 1;width: 10px;height: 10px;border: 1px solid #000;}</style>
30、不通過寬度和高度設(shè)置預(yù)定全占用
利用top和bottom或left和right同時(shí)設(shè)置的時(shí)候會(huì)觸發(fā)流體特性的特點(diǎn)；與通過“ top：0; left：0; width：100％; height：100％;”，在設(shè)置邊距，邊框， padding的時(shí)候不會(huì)溢出到上方的外面（就算你想到box-sizing，那margin呢？）；而之所以用span的原因是想說明絕對(duì)定位放置元素的displayplace為block。
<!-- html --><span></span><!-- CSS --><style>span {position: absolute;top:0;left:0;right:0;bottom: 0;}</style>
31、margin：自動(dòng)水平垂直居中
<!-- html --><div></div><!-- CSS --><style>div {width: 300px; height: 200px;position: absolute;left: 0; right: 0; top: 0; bottom: 0;margin: auto;}</style>
32、紙張卷邊陰影
主要利用“位置：相對(duì)； z-index：0；”創(chuàng)建并合并到z-index的負(fù)值將陰影放置在“ contaniner”和“ page”之間。
你可以嘗試將關(guān)鍵CSS去掉查看效果。
<!-- html --><div class="container"><div class="page"><h4>demo</h4><p>demo</p></div></div><!-- CSS --><style>.container {background-color: #666;height: 1000px;/* 創(chuàng)建層疊上下文，關(guān)鍵 */position: relative;z-index: 0;}.page {width: 600px;background-color: #f4f39e;background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6);box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);text-shadow: 0 1px 0 #f6ef97;position: relative;left: 200px;top: 200px;}.page:before {transform: skew(-15deg) rotate(-5deg);transform-origin: left bottom;left: 0;}.page:after {transform: skew(15deg) rotate(5deg);transform-origin: right bottom;right: 0;}/* 邊角卷邊陰影 */.page:before, .page:after {width: 90%; height: 20%;content: "";box-shadow: 0 8px 16px rgba(0, 0, 0, .3);position: absolute;bottom: 0;z-index: -1;}</style>
33、隱藏文字
說這個(gè)主要是為了說明，Chrome瀏覽器如果字體設(shè)置12px以下的大小（新版本已經(jīng)不限制了），會(huì)被自動(dòng)處理成12px，但是有一個(gè)值除外，0。
<!-- CSS --><style>p {font-size: 0;}</style>
34、解決文本裝飾下劃線和文本重疊
因?yàn)槭莾?nèi)聯(lián)元素，所以完全不用擔(dān)心會(huì)影響元素高度的問題。
<!-- CSS --><style>a {text-decoration: none;border-bottom: 1px solid;padding-bottom: 5px;}</style>
35、自動(dòng)將輸入的小寫字母轉(zhuǎn)換大寫
<!-- CSS --><style>input {text-transform: uppercase;}</style>
36、價(jià)格場(chǎng)景下的首個(gè)符號(hào)選擇器
特點(diǎn)是可以讓html結(jié)構(gòu)活躍干凈。
<!-- html --><p class="price">￥399</p><!-- CSS --><style>.price:first-letter {...}</style>
37、元素隱藏同時(shí)資源不加載
后續(xù)可通過script.innerHTML訪問。
<!-- html --><script type="text/html"><img src="1.jpg"></script>
38、頭像裁剪矩形鏤空效果
主要利用輪廓。
<!-- html --><div class="crop"><div id="cropArea" class="crop-area"></div><img src="demo.gif"></div><!-- CSS --><style>.crop {width: 200px; height: 200px;overflow: hidden;position: relative;}.crop > .crop-area {position: absolute; top:0; height: 0;width: 80px; height: 80px;outline: 200px solid rgba(0,0,0,.5);cursor: move;}</style>
39、自定義光標(biāo)
需要注意IE只支持cur文件。
<!-- CSS --><style>.cursor-demo {cursor: url(demo.cur);}</style>
40、修改水平流到垂直流
兼容到IE7；此應(yīng)用涉及到一體的東西，所有水平流的特性都可以應(yīng)用到垂直流中（稱為水平居中變成了垂直居中）。
<!-- CSS --><style>.verticle-mode{writing-mode: tb-rl;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;}</style>
評(píng)論
圖片
表情