來自 | 《css世界》一書
<!-- html --><div> <img src="demo.gif"></div>
<!-- css --><style> img { float: left; } /* 清除浮動 */ .clear::after { content: ""; display: block; clear: both; }</style>2、文字少時居中，多時靠左但是要注意，當p的內容為英文單詞組成的時候，如果單詞過長，而不是「 pppppppppppppppppppppppppppppp」這樣的一次，會被視為一個單位而造成超過div的尺寸。
如果你想要英文字符也有中文字符的效果的話，在p使用「 word-break：break-all」。
<!-- html --><div> <p></p></div>
<!-- css --><style> .box { text-align: center; } .content { display: inline-block; text-align: left; }</style>3、凹凸人目的在於製造一個凹或凸的形狀，利用了「 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不影響盒模型的大小相信這點大部分人都知道，但是有一些奇怪的行為，比如說width <content + padding會怎樣？實際上當padding + border> width時，元素的渲染大小（Chrome下）為padding + border；而padding + border <width時，允許剩餘空間分配給content。
<!-- html --><div></div>
<!-- CSS --><style> div { box-sizing: border-box; }</style>5、身高：100％佔屏效果<!-- html --><div></div>
<!-- CSS方法一 --><style> html,body { height: 100%; } div { height: 100% }</style><!-- CSS方法二 --><style> div { position: absolute; height: 100%; }</style>6、任意高度元素展開缺點是，如果高度太大會造成展開過快和重複中斷，那麼這個足夠大的值應該適當。
<!-- html --><div></div>
<!-- CSS --><style> div { max-height: 0; overflow: hidden; transition: max-height .25s; } div.active { max-height: 666px; /* 需要足夠大的值 */ }</style>7、優雅的圖片未加載或加載失敗效果需要注意的是，圖片顯示完成後，img會成為「替換元素」，而替換元素是無法設置偽元素的，因為內容被圖片替換掉了；還需要注意attr裡面的變量不能加雙引號。
<!-- 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%); /* 過渡動畫效果 */ transition: transform .2s; } img:hover::after { /* alt 信息顯示 */ transform: translateY(0); } </style>8、CSS的懸浮圖片替換效果需要注意的是，如果快捷保存圖片，保存的是src內的圖片，而不是替換之後的。
<!-- html --><img src="demo.gif">
<!-- CSS --><style> img:hover { content: url(amazing.gif); }</style>9、利於seo的「替換元素」標題logo用h1的原因主要是因為seo，語義化的問題。
<!-- html --><h1>Weismann's blog</h1>
<!-- CSS --><style> h1 { content: url(logo.gif); }</style>10、高兼容，自動等寬，底部對齊的柱狀圖需要注意的是，第一個i不能換行，換行後會產生後移的結果。
<!-- html --><div><i></i> <i></i> <i></i> <i></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>11、高兼容性的加載效果在IE6-IE9下是...，其他都是動態的；使用點的目的是語義化和低版本瀏覽器的兼容。
<!-- 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>12、擴大點擊區域第一種主要利用了內聯元素的填充只會影響外觀和不影響布局的特點；第二種針對其他屬性會改變背景圖定位的一種方式。
<!-- html --><a href="">demo</a>
<!-- CSS1 --><style> a { padding: 20px 0; }</style><!-- CSS2 --><style> a { border: 11px solid transparent; }</style>13、不使用偽元素的「三道槓」和「圓點」效果<!-- html --><i></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圓點 --><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>14、導航欄消除右邊多餘的尺寸利用保證金來改變尺寸，需要注意，改變尺寸的元素水平方向的尺寸不能是確定的。
<!-- 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>15、正確的滾動底部留白方式如果使用padding留白，在Firefox和IE不會顯示。
<!-- html --><div> <img src="demo.gif"></div>
<!-- CSS --> <style> .box { height:200px; overflow:auto; } .box>img { margin: 50px 0; }</style>16、高兼容的多欄等高注意container高度不能是確定值，缺點是如果在內部使用錨點定位會出現問題。
<!-- html --><div> <div id="colLeft"> <h4>正方觀點</h4> <p>觀點1</p> <p>觀點1</p> </div> <div id="colRight"> <h4>反方觀點</h4> <p>觀點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>17、正確的塊級元素右對齊自動值對於保證金是佔用剩餘的空間。
<!-- html --><div>demo</div>
<!-- CSS --><style> div { width: 100px; margin-left: auto; }</style>
18、圖片上傳增加框此技巧主要說明border的顏色默認是繼承自color的。
<!-- html --><div></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>19、不影響背景圖片位置設置邊距和增加點擊區域第二種方式一樣
<!-- html --><div></div>
<!-- CSS --><style> .box { display: inline-block; width: 100px; height: 100px; border-right: 50px solid transparent; background-position: 100% 50%; }</style>20、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>21、高兼容雙欄，一邊等寬一邊自適應，等高布局缺點是邊框不支持百分比，最多2-3欄。
<!-- html --><div> <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>22、內聯元素「近似」垂直居中而為什麼說「近似」，一句話說清楚，請看開頭
<!-- CSS --><style> span { line-height: 24px; }</style>多行內容「近似」垂直居中<!-- html --><div> <div>基於行高實現的...</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>23、容器內圖片的垂直方向間隙問題產生的問題和「幽靈空白子系統」和x-height有關，你可以嘗試在img前加入x字符觀察一下。
<!-- html --><div> <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>24、圖標文字對齊ex代表的是x-height的高度，根據x字形的不同（如font-family）而不同。
<div class="box"> <p> <i class="icon icon-demo"></i>拉拉 </p></div>
<style> .box { 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 { content: '\3000'; } .icon-demo { background: url(demo.png) no-repeat center; }</style>
<p>文字 <img src="delete.png"></p>
<style> p { font-size: 14px; } p > img { width: 16px; height: 16px; vertical-align: .6ex; position: relative; top: 8px; }</style>25、永遠居中的彈框特點是內容和瀏覽器尺寸變化都是自動變換大小和位置，可以通過偽元素的高度控制上下位置。
<div class="container"> <div class="dialog">demo</dialog></div>
<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>26、文字環繞圖片float的真正用途。
<!-- html --><div> <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>
27、利用溢出：隱藏自定義滾動條實際上overflow：hidden是可以滾動的，可以通過錨點，focus，scrollTop滾動。滾動條的實現請自行發揮。
28、通過標籤實現的選項卡效果與錨點不同的是不會觸發由內到外（多層滾動造成的某種事件冒泡的效果）的頁面跳動（元素上邊與分段上邊對齊），還支持Tab選項的效果；缺點是需要js支持效果。
<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>
<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>29、「包含塊」的絕對定位元素「一柱擎天」問題。<!-- html --><div> <div>拉拉</div></div>
<!-- CSS --><style> .father { position: relative; width: 20px; height: 20px; } .son { position: absolute; /* 解決方案 */ white-space: nowrap; }</style>
30、「無依賴絕對定位」的表單驗證應用在一個元素上如果單用（父元素的位置屬性均是替換）「 position：absolute」，事實上元素將原地不動，最終會產生BFC。
<!-- html --><div> <label><span>*</span>郵箱</label> <div> <input type="email"> <span>郵箱格式不準確（示意）</span> </div></div><div> ...</div>
<!-- CSS --> <style> .group { width: 300px; } .label { float: left; } .remark { position: absolute; }</style>
31、主體頁面側邊欄利用text-align和fixed的組合；高度放置0和overflow隱藏目的是為了不影響主體的體驗，而之所以絕對定位元素沒有被隱藏的原因是「如果overflow不是定位元素，同時絕對定位元素和overflow容器同時也沒有定位元素，則溢出無法對絕對定位元素進行剪裁。」 —《 CSS世界》。
<div class="alignright"> <span class="follow"></span></div>
<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>32、不通過寬度和高度設置預定全佔用利用top和bottom或left和right同時設置的時候會觸發流體特性的特點；與通過「 top：0; left：0; width：100％; height：100％;」，在設置邊距，邊框， padding的時候不會溢出到合併的外面（就算你想到box-sizing，那margin呢？）；而之所以用span的原因是想說明絕對定位放置元素的顯示置為塊。
<!-- html --><span></span>
<!-- CSS --><style> span { position: absolute; top:0; left:0; right:0; bottom: 0; }</style>33、margin：自動水平垂直居中<div></div>
<style> div { width: 300px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }</style>34、紙張卷邊陰影主要利用「位置：相對；z-index：0；」創建並合併到z-index的負值將陰影放置在「 contaniner」和「 page」之間。
你可以嘗試將關鍵CSS去掉查看效果。
<div class="container"> <div class="page"> <h4>demo</h4> <p>demo</p> </div></div>
<style> .container { background-color: #666; height: 1000px; 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>35、隱藏文字說這個主要是為了說明，Chrome瀏覽器如果字體設置12px以下的大小（新版本已經不限制了），會被自動處理成12px，但是有一個值除外，0。
<style> p { font-size: 0; }</style>36、解決text-decoration下劃線和文本重疊因為是內聯元素，所以完全不用擔心會影響元素高度的問題。
<style> a { text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px; }</style>37、自動將輸入的小寫字母轉換大寫<!-- CSS --><style> input { text-transform: uppercase; }</style>38、價格場景下的首個符號選擇器特點是可以讓html結構活躍乾淨。
<!-- html --><p>¥399</p>
<!-- CSS --><style> .price:first-letter { ... }</style>39、元素隱藏同時資源不加載後續可通過script.innerHTML訪問。
<!-- html --><script type="text/html"> <img src="1.jpg"></script> 40、頭像裁剪矩形鏤空效果主要利用輪廓。
<!-- html --><div> <div id="cropArea"></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>41、自定義光標需要注意IE只支持cur文件。
<!-- CSS --><style> .cursor-demo { cursor: url(demo.cur); }</style>42、修改水平流到垂直流兼容到IE7；此應用涉及到一體的東西，所有水平流的特性都可以應用到垂直流中（稱為水平居中變成了垂直居中）。
<!-- CSS --><style> .verticle-mode{ writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }</style>推薦閱讀