一個基礎卻又容易混淆的css知識點

　　本文依賴于一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的!

　　也許你會說，left/right以父元素的width為參照物好理解，但是top/bottom為什么也是以父元素的width為參照物的呢?網上眾說紛紜，關鍵還是看W3C的規范：

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

　　權威一出，記住就好，科科。

高度自適應占位

假設有這么個場景：

　　如上圖所示，有這么一種用來放圖片的容器，圖片都是正方形(為了方便舉例用正方形，實際上只要固定長寬比例即可)。

　　在PC端好辦，容器的寬高都寫死是多少px，這樣即使圖片加載不出來容器都不會變型。但是在移動端，由于各機型分辨率相差太大，寫死px是絕對不可能的，終究還得靠百分比來實現自適應：

• 　　容器寬度設個50%吧，這樣一行放倆容器，各占屏幕寬度一半，沒問題。
• 　　圖片寬度設個100%取容器的寬度，沒問題。
• 　　容器高度沒法設置啊，因為容器寬高的參照物不一樣，而且需求是高度與寬度一致，所以無法通過為容器高度設置百分比來達成，那就只能靠內容高度撐開了。
• 　　容器的內容高度就是圖片的高度，若圖片是正方形，則圖片高度與圖片寬度一致，也即與容器寬度一致，看起來沒問題是吧?實際上，在瀏覽器把圖片加載出來以前，圖片的高度是零，那可就沒辦法把容器撐開了.

　　這樣一來，即使圖片加載速度很快，容器在圖片加載前后都會有一個變型的過程，也就是俗稱的“閃爍”，而如果圖片加載不出來，整體布局就更是難看了。

　　現在問題已經出來了，就是如何做到不靠圖片本身就能把容器的高度撐開。

設置容器的padding-bottom/top

　　使用margin/padding的百分比值來解決自適應高度的關鍵在于：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那么想要把這倆屬性的值統一起來就很簡單了。

　　優化方案是這樣的：給容器設置padding-top/padding-bottom跟width一致的值(百分比)。

　　結果，容器的視覺效果如下：

　　容器的盒子模型如下：

　　從盒子模型可以看出，雖然容器的內容高度為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)來實現此方案。

　　此時視覺效果上與上一方案無異，重點來看看此時容器的盒子模型：

　　可以看出，此時容器的內容高度與內容寬度一致，媽媽再也不用擔心我無法通過max-height來限制容器高度了。

　　另外，使用margin的話需要考慮margin折疊的問題(參考)，padding則無此煩惱。

容器內部如何添加內容

　　上述方案只提及如何不依賴容器內容來撐開容器，那么，在撐開容器后，如何給容器添加內容(圖片、文本等)呢?

　　答案很簡單，那就是利用position: absolute;

　　效果如下：

后補

寬高不一致的自適應怎么做?

　　有朋友可能會問，上面提到的都是寬度與高度一致的情況，如果不一致那怎么辦呢?其實自適應的重點在于，元素的寬高必須維持一個固定的比例，比如說寬高一致比例就是1:1，寬是高的兩倍那就是2:1，只要這個比例是明確而且固定的，那么只需要相應地修改margin/padding的百分比值即可適應不同的寬高比例。

還有其它的寬高自適應方案嗎?

　　當然有，比如說css3新推出的長度單位vw，就是以屏幕寬度為參照物的，只要給元素的width和height都用上vw單位，那width跟height就可以輕易設成一樣的了，不過既然是css3，瀏覽器兼容性肯定成問題：

總結

自適應的精髓在于寬度，margin/padding設置百分比彌補了元素高度無法自適應地與元素寬度保持一致的缺陷。

上一篇：網站前臺javascript速度優化

下一篇：substring() 在JavaScript中的用法