一個基礎卻又容易混淆的css知識點 本文依賴於一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！ 也許你會說，left/right以父元素的width為參照物好理解，但是t ...
一個基礎卻又容易混淆的css知識點
本文依賴於一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！
也許你會說，left/right以父元素的width為參照物好理解，但是top/bottom為什麼也是以父元素的width為參照物的呢？
1、高度自適應占位
假設有這麼個場景：
如上圖所示，有這麼一種用來放圖片的容器，圖片都是正方形（為了方便舉例用正方形，實際上只要固定長寬比例即可）。
在PC端好辦，容器的寬高都寫死是多少px，這樣即使圖片載入不出來容器都不會變型。但是在移動端，由於各機型解析度相差太大，寫死px是絕對不可能的，終究還得靠百分比來實現自適應：
-
容器寬度設個50%吧，這樣一行放倆容器，各占屏幕寬度一半，沒問題。
-
圖片寬度設個100%取容器的寬度，沒問題。
-
容器高度沒法設置啊，因為容器寬高的參照物不一樣，而且需求是高度與寬度一致，所以無法通過為容器高度設置百分比來達成，那就只能靠內容高度撐開了。
-
容器的內容高度就是圖片的高度，若圖片是正方形，則圖片高度與圖片寬度一致，也即與容器寬度一致，看起來沒問題是吧？實際上，在瀏覽器把圖片載入出來以前，圖片的高度是零，那可就沒辦法把容器撐開了， 這樣一來，即使圖片載入速度很快，容器在圖片載入前後都會有一個變型的過程，也就是俗稱的“閃爍”，而如果圖片載入不出來，整體佈局就更是難看了。
現在問題已經出來了，就是如何做到不靠圖片本身就能把容器的高度撐開。
設置容器的padding-bottom/top
使用margin/padding的百分比值來解決自適應高度的關鍵在於：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那麼想要把這倆屬性的值統一起來就很簡單了。
優化方案是這樣的：給容器設置padding-top/padding-bottom跟width一致的值（百分比）。
1 <div id="container" class="placeholder"></div>
1 #container { 2 width: 50%; //父元素寬度的一半 3 background-color: red; //僅為了方便演示} 4 .placeholder { 5 padding-top: 50%; //與width: 50%;的值保持一致，也就是相當於父元素寬度的一半。 6 }
結果，容器的視覺效果如下：
容器的盒子模型如下：
從盒子模型可以看出，雖然容器的內容高度為0，但由於有了跟內容寬度一致的padding，因此整體視覺效果上像是被撐開了。此方案瀏覽器相容性很不錯，唯一的缺陷是無法給容器設置max-height屬性了，因為max-height只能限制內容高度，而不能限制padding（我原以為設置box-sizing: border-box;可以讓max-height限制padding，不過親測無效）
給子元素/偽元素設置margin/padding撐開容器
從上面的方案看出max-height失效的原因是容器的高度本來就是padding撐的，而內容高度為0，max-height無法起作用。那想要優化這一點，唯一的方法就是利用內容高度來撐開而非padding，這個方案跟消除浮動所用的方案非常相似：給容器添加一個子元素/偽元素，並把子元素/偽元素的margin/padding設為100%，使其實際高度相當於容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。由於添加子元素與HTML語義化相悖，因此更推薦使用偽元素(:after)來實現此方案。
1 <div id="container" class="placeholder"></div>
#container { width: 50%; position: relative; background-color: red; overflow: hidden; //需要觸發BFC消除margin摺疊的問題 } .placeholder:after { content: ''; display: block; margin-top: 100%; //margin 百分比相對父元素寬度計算 }
此時視覺效果上與上一方案無異，重點來看看此時容器的盒子模型：
可以看出，此時容器的內容高度與內容寬度一致，媽媽再也不用擔心我無法通過max-height來限制容器高度了。
另外，使用margin的話需要考慮margin摺疊的問題（參考），padding則無此煩惱。
容器內部如何添加內容
上述方案只提及如何不依賴容器內容來撐開容器，那麼，在撐開容器後，如何給容器添加內容（圖片、文本等）呢？
答案很簡單，那就是利用position: absolute;
1 <div id="container" class="placeholder"> 2 <img src="http://img.arrayhuang.cn/product/miya-1060079/multiple/0.jpg@1e_415w_415h_1c_0i_1o_1x.jpg" /> 3 </div>
1 #container { 2 width: 50%; 3 position: relative; 4 background-color: red; 5 overflow: hidden; //需要觸發BFC消除margin摺疊的問題 6 } 7 .placeholder:after { 8 content: ''; 9 display: block; 10 margin-top: 100%; //margin 百分比相對父元素寬度計算 11 } 12 img { 13 position: absolute; 14 top: 0; 15 width: 100%; 16 }
後補
寬高不一致的自適應怎麼做？
有朋友可能會問，上面提到的都是寬度與高度一致的情況，如果不一致那怎麼辦呢？其實自適應的重點在於，元素的寬高必須維持一個固定的比例，比如說寬高一致比例就是1:1，寬是高的兩倍那就是2:1，只要這個比例是明確而且固定的，那麼只需要相應地修改margin/padding的百分比值即可適應不同的寬高比例。
還有其它的寬高自適應方案嗎？
當然有，比如說css3新推出的長度單位vw，就是以屏幕寬度為參照物的，只要給元素的width和height都用上vw單位，那width跟height就可以輕易設成一樣的了，不過既然是css3，瀏覽器相容性肯定成問題：
總結
自適應的精髓在於寬度，margin/padding設置百分比彌補了元素高度無法自適應地與元素寬度保持一致的缺陷。
