1、百分比介紹
一般元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到“流式”頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式，使其子元素使用百分數(shù)外邊距，當用戶修改瀏覽窗口的寬度時，外邊距會隨之擴大或縮小。
margin-right/margin-left的百分比值是相對于父元素的寬度來計算的，這很好理解；而margin-top/margin-bottom為什么也是以父元素的width為參照物的呢？
2、為什么呢？
CSS權威指南中的解釋：若是相對于父元素的高度計算會形成死循環(huán)。
“我們認為，正常流中的大多數(shù)元素都會足夠高以包含其后代元素（包括外邊距），如果一個元素的上下外邊距是父元素的height的百分數(shù)，就可能導致一個無限循環(huán)，父元素的height會增加，以適應后代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加，形成無限循環(huán)?！?/em>
還有一種說法是根本原因并不是因為死循環(huán)。例如zhangxinxu認為相對于 height 計算，大多數(shù)情況下計算值都是 0，跟擺設沒什么 區(qū)別，還不如相對寬度計算，因為 CSS 默認的是水平流，計算值一直會有效，而且我們還可以 利用這一特性實現(xiàn)一些有意思的布局效果。也就是面向場景和需求設計，這種設計可以讓我們輕松實現(xiàn)自適應的等比例矩形效果。
Anyway，總而言之就是：
在默認的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對于父元素寬度計算的。
3、小栗子
<div style="width:100px; border: 1px solid gray;" id="box">
<div id="container">1</div>
</div>
#container{
padding-top: 50%; // margin-top: 50%;
background-color: pink;
}
div中沒有內(nèi)容時，實現(xiàn)的是一個寬高為1:2的小矩形。padding-top: 50%;表示元素的高度為寬度的一半。padding-top: 100%; 可實現(xiàn)寬高為1:1的小矩形。（改為padding: 50%`，實現(xiàn)的是一個寬高1:1的小矩形，因為50%+50%=100%；）
從盒子模型可以看出，雖然容器的內(nèi)容高度為0，但由于有了跟內(nèi)容寬度一致的padding，因此整體視覺效果上像是被撐開了。
使用方法： padding-top用來設置元素的寬高比例；該元素在父元素寬度變化的過程中將保持自身固定的寬高比。
4、應用
對于絕大多數(shù)都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因為圖片原始尺寸它是固定的。在傳統(tǒng)的固定寬度的布局下，我們會通過給圖片設定具體的寬度和高度值，來保證我們的圖片占據(jù)區(qū)域穩(wěn)固；但是在移動端或者在響應式開發(fā)情況下，圖片最終展現(xiàn)的寬度很可能是不確定的。
此時需要的不是對圖片進行固定尺寸設定，而是比例設定。為了維持圖片的寬高比固定，即保持原來的尺寸比不變，要做到元素高度隨著元素的進行自適應變化。
對于復雜布局，如果圖片的寬度是不固定的自適應的，我們通常會想到這么一個取巧的做法，就是只設定圖片的寬度例如img { width: 100%; }，圖片的高度不進行限定，由圖片的內(nèi)容去撐開，這樣會出現(xiàn)圖片占據(jù)的高度有一個從0到計算高度的圖片變化，視覺上會有明顯的元素跳動，代碼層面會有布局重計算。即使圖片加載速度很快，容器在圖片加載前后都會有一個變型的過程，也就是俗稱的“閃爍”，而如果圖片加載不出來，整體布局就更是難看了。
所以對圖片高寬都進行限定還是有必要的，但是同時要保證寬度自適應。
給子元素/偽元素設置margin/padding撐開容器
由于添加子元素與HTML語義化相悖，因此更推薦使用偽元素(:after)來實現(xiàn)此方案。
<div style="width:100px; border: 1px solid gray;overflow:hidden;">
<div id="container" class="placeholder"></div>
</div>
#container {
position: relative;
background-color: pink;
overflow: hidden; // 當使用margin-top需要觸發(fā)BFC消除與其他元素可能發(fā)生margin折疊的問題
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
}
容器內(nèi)部如何添加內(nèi)容
那么，在撐開容器后，如何給容器添加內(nèi)容（圖片、文本等）呢？
利用position: absolute;
<div id="container" class="placeholder">
<img src="xxx.jpg" />
</div>
#container {
position: relative;
background-color: pink;
overflow: hidden;
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
}
img {
position: absolute;
top: 0;
width: 100%;
}
References
CSS百分比padding實現(xiàn)比例固定圖片自適應布局
巧用margin/padding的百分比值實現(xiàn)高度自適應（多用于占位，避免閃爍）
