本文依賴于一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)：當(dāng)margin/padding取形式為百分比的值時(shí)再芋，無(wú)論是left/right辜伟，還是top/bottom氓侧，都是以父元素的width為參照物的！
也許你會(huì)說(shuō)导狡，left/right以父元素的width為參照物好理解约巷，但是top/bottom為什么也是以父元素的width為參照物的呢？網(wǎng)上眾說(shuō)紛紜旱捧，關(guān)鍵還是看W3C的規(guī)范：
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).
權(quán)威一出独郎，記住就好，科科枚赡。
高度自適應(yīng)占位
假設(shè)有這么個(gè)場(chǎng)景：
如上圖所示氓癌，有這么一種用來(lái)放圖片的容器，圖片都是正方形（為了方便舉例用正方形贫橙，實(shí)際上只要固定長(zhǎng)寬比例即可）贪婉。
在PC端好辦，容器的寬高都寫死是多少px卢肃，這樣即使圖片加載不出來(lái)容器都不會(huì)變型疲迂。
但是在移動(dòng)端，由于各機(jī)型分辨率相差太大莫湘，寫死px是絕對(duì)不可能的尤蒿，終究還得靠百分比來(lái)實(shí)現(xiàn)自適應(yīng)：
1.容器寬度設(shè)個(gè)50%吧，這樣一行放倆容器逊脯，各占屏幕寬度一半优质，沒(méi)問(wèn)題。
2.圖片寬度設(shè)個(gè)100%取容器的寬度，沒(méi)問(wèn)題巩螃。
3.容器高度沒(méi)法設(shè)置啊演怎，因?yàn)槿萜鲗捀叩膮⒄瘴锊灰粯樱倚枨笫歉叨扰c寬度一致避乏，所以無(wú)法通過(guò)為容器高度設(shè)置百分比來(lái)達(dá)成爷耀，那就只能靠?jī)?nèi)容高度撐開(kāi)了。
4.容器的內(nèi)容高度就是圖片的高度拍皮，若圖片是正方形歹叮，則圖片高度與圖片寬度一致，也即與容器寬度一致铆帽，看起來(lái)沒(méi)問(wèn)題是吧咆耿？實(shí)際上，在瀏覽器把圖片加載出來(lái)以前爹橱，圖片的高度是零萨螺，那可就沒(méi)辦法把容器撐開(kāi)了，如下圖所示：
這樣一來(lái)愧驱，即使圖片加載速度很快慰技，容器在圖片加載前后都會(huì)有一個(gè)變型的過(guò)程，也就是俗稱的“閃爍”组砚，而如果圖片加載不出來(lái)吻商，整體布局就更是難看了。
現(xiàn)在問(wèn)題已經(jīng)出來(lái)了糟红，就是如何做到不靠圖片本身就能把容器的高度撐開(kāi)艾帐。
設(shè)置容器的padding-bottom/top
使用margin/padding的百分比值來(lái)解決自適應(yīng)高度的關(guān)鍵在于：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度改化，倆屬性參照物一致掩蛤，那么想要把這倆屬性的值統(tǒng)一起來(lái)就很簡(jiǎn)單了。
優(yōu)化方案是這樣的：給容器設(shè)置padding-top/padding-bottom跟width一致的值（百分比）陈肛。
#container { width: 50%; //父元素寬度的一半
background-color: red; //僅為了方便演示
}
.placeholder { padding-top: 50%;
//與width: 50%;的值保持一致，也就是相當(dāng)于父元素寬度的一半兄裂。 }
<div id="container" class="placeholder"></div>
結(jié)果句旱，容器的視覺(jué)效果如下：
容器的盒子模型如下：
從盒子模型可以看出，雖然容器的內(nèi)容高度為0晰奖，但由于有了跟內(nèi)容寬度一致的padding谈撒，因此整體視覺(jué)效果上像是被撐開(kāi)了。此方案瀏覽器兼容性很不錯(cuò)匾南，唯一的缺陷是無(wú)法給容器設(shè)置max-height屬性了啃匿，因?yàn)閙ax-height只能限制內(nèi)容高度，而不能限制padding（我原以為設(shè)置box-sizing: border-box;可以讓max-height限制padding，不過(guò)親測(cè)無(wú)效溯乒，明白的朋友麻煩告知一下原因）夹厌。
給子元素/偽元素設(shè)置margin/padding撐開(kāi)容器
從上面的方案看出max-height失效的原因是容器的高度本來(lái)就是padding撐的，而內(nèi)容高度為0裆悄，max-height無(wú)法起作用矛纹。那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來(lái)?yè)伍_(kāi)而非padding光稼，這個(gè)方案跟消除浮動(dòng)所用的方案非常相似：給容器添加一個(gè)子元素/偽元素或南，并把子元素/偽元素的margin/padding設(shè)為100%，使其實(shí)際高度相當(dāng)于容器的寬度艾君，如此一來(lái)采够，便能把容器的高度撐至與寬度一致了。由于添加子元素與HTML語(yǔ)義化相悖冰垄，因此更推薦使用偽元素(:after)來(lái)實(shí)現(xiàn)此方案蹬癌。
#container { width: 50%;
position: relative;
background-color: red;
overflow: hidden;
//需要觸發(fā)BFC消除margin折疊的問(wèn)題
}
.placeholder:after { content: '';
display: block;
margin-top: 100%;
//margin 百分比相對(duì)父元素寬度計(jì)算
}
<div id="container" class="placeholder"></div>
此時(shí)視覺(jué)效果上與上一方案無(wú)異，重點(diǎn)來(lái)看看此時(shí)容器的盒子模型：
可以看出播演，此時(shí)容器的內(nèi)容高度與內(nèi)容寬度一致冀瓦，媽媽再也不用擔(dān)心我無(wú)法通過(guò)max-height來(lái)限制容器高度了。
另外写烤，使用margin的話需要考慮margin折疊的問(wèn)題（參考）翼闽，padding則無(wú)此煩惱。
容器內(nèi)部如何添加內(nèi)容
上述方案只提及如何不依賴容器內(nèi)容來(lái)?yè)伍_(kāi)容器洲炊，那么感局，在撐開(kāi)容器后，如何給容器添加內(nèi)容（圖片暂衡、文本等）呢询微？
答案很簡(jiǎn)單，那就是利用position: absolute;：
#container { width: 50%;
position: relative;
background-color: red;
overflow: hidden;
//需要觸發(fā)BFC消除margin折疊的問(wèn)題
}
.placeholder:after { content: '';
display: block;
margin-top: 100%;
//margin 百分比相對(duì)父元素寬度計(jì)算
}
img { position: absolute;
top: 0;
width: 100%;
}
<div id="container" class="placeholder">
[站外圖片上傳中……(8)]
</div>
效果如下：
后補(bǔ)
寬高不一致的自適應(yīng)怎么做狂巢？
有朋友可能會(huì)問(wèn)撑毛，上面提到的都是寬度與高度一致的情況，如果不一致那怎么辦呢唧领？其實(shí)自適應(yīng)的重點(diǎn)在于藻雌，元素的寬高必須維持一個(gè)固定的比例，比如說(shuō)寬高一致比例就是1:1斩个，寬是高的兩倍那就是2:1胯杭，只要這個(gè)比例是明確而且固定的，那么只需要相應(yīng)地修改margin/padding的百分比值即可適應(yīng)不同的寬高比例受啥。
還有其它的寬高自適應(yīng)方案嗎做个？
當(dāng)然有鸽心，比如說(shuō)css3新推出的長(zhǎng)度單位vw，就是以屏幕寬度為參照物的居暖，只要給元素的width和height都用上vw單位顽频，那width跟height就可以輕易設(shè)成一樣的了，不過(guò)既然是css3膝但，瀏覽器兼容性肯定成問(wèn)題:
總結(jié)
自適應(yīng)的精髓在于寬度冲九，margin/padding設(shè)置百分比彌補(bǔ)了元素高度無(wú)法自適應(yīng)地與元素寬度保持一致的缺陷。
原網(wǎng)頁(yè)地址：http://www.kuqin.com/shuoit/20160113/350025.html
