基本知識(shí)點(diǎn)
本文依賴(lài)于一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)：當(dāng)padding/margin取形式為百分比的值時(shí)询微，無(wú)論是left/right僵闯，還是top/bottom矫膨，都是以父元素的width為參照物的妖混！
1. 給容器設(shè)置padding-top/bottom
padding-top/bottom的百分比值萍恕，是依賴(lài)父容器寬度的境氢，所以給子元素設(shè)置一個(gè)與父元素高度相同百分值的padding-top即可實(shí)現(xiàn)蟀拷。
div {
border: 1px solid red;
background: green;
width: 50%; /*父元素寬度一半*/
padding-top: 50%; /*與width一樣，為父元素寬度一半*/
}
視覺(jué)效果如下：
此方案瀏覽器兼容性很不錯(cuò)萍聊，唯一的缺陷是無(wú)法給容器設(shè)置max-height屬性了问芬，因?yàn)閙ax-height只能限制內(nèi)容高度，而不能限制padding寿桨，為了解決這個(gè)問(wèn)題我們可以選擇下面這個(gè)辦法此衅。
2. 給子元素/偽元素設(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è)子元素/偽元素墨微，并把子元素/偽元素的pading/margin設(shè)為100%，使其實(shí)際高度相當(dāng)于容器的寬度扁掸，如此一來(lái)翘县，便能把容器的高度撐至與寬度達(dá)成我們預(yù)想的寬高比(1:1)了。由于添加子元素與HTML語(yǔ)義化相悖谴分，因此更推薦使用偽元素:after來(lái)實(shí)現(xiàn)此方案锈麸。
div {
border: 1px solid red;
background: green;
width: 50%; /*父元素寬度一半*/
}
div::after {
content: '';
display: block;
margin-top: 100%;
}
使用該方法可能需考慮margin折疊的問(wèn)題，可在父元素上加overflow:hidden觸發(fā)BFC解決牺蹄。
