margin/padding百分比值的計算

一、百分比介紹

通常元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決於父元素的width，這樣可能獲得「流式」頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。若是對這個文檔設置該樣式，使其子元素使用百分數外邊距，當用戶修改瀏覽窗口的寬度時，外邊距會隨之擴大或縮小。

margin-right/margin-left的百分比值是相對於父元素的寬度來計算的，這很好理解；而margin-top/margin-bottom爲何也是以父元素的width爲參照物的呢？

二、爲何呢？

CSS權威指南中的解釋：如果相對於父元素的高度計算會造成死循環。
「咱們認爲，正常流中的大多數元素都會足夠高以包含其後代元素（包括外邊距），若是一個元素的上下外邊距是父元素的height的百分數，就可能致使一個無限循環，父元素的height會增長，以適應後代元素上下外邊距的增長，而相應的，上下外邊距由於父元素height的增長也會增長，造成無限循環。」

還有一種說法是根本緣由並非由於死循環。例如zhangxinxu認爲相對於 height 計算，大多數狀況下計算值都是 0，跟擺設沒什麼 區別，還不如相對寬度計算，由於 CSS 默認的是水平流，計算值一直會有效，並且咱們還能夠 利用這一特性實現一些有意思的佈局效果。也就是面向場景和需求設計，這種設計可讓咱們輕鬆實現自適應的等比例矩形效果。

Anyway，總而言之就是：

在 默認的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對於父元素寬度計算的。

三、小栗子

<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中沒有內容時，實現的是一個寬高爲1:2的小矩形。padding-top: 50%;表示元素的高度爲寬度的一半。padding-top: 100%; 可實現寬高爲1:1的小矩形。（改成padding: 50%`，實現的是一個寬高1:1的小矩形，由於50%+50%=100%；）

從盒子模型能夠看出，雖然容器的內容高度爲0，但因爲有了跟內容寬度一致的padding，所以總體視覺效果上像是被撐開了。

使用方法： padding-top用來設置元素的寬高比例；該元素在父元素寬度變化的過程當中將保持自身固定的寬高比。

四、應用

對於絕大多數都佈局，咱們並不要求非要比例固定，可是有一種狀況例外，那就是圖片，由於圖片原始尺寸它是固定的。在傳統的固定寬度的佈局下，咱們會經過給圖片設定具體的寬度和高度值，來保證咱們的圖片佔據區域穩固；可是在移動端或者在響應式開發狀況下，圖片最終展示的寬度極可能是不肯定的。

此時須要的不是對圖片進行固定尺寸設定，而是比例設定。爲了維持圖片的寬高比固定，即保持原來的尺寸比不變，要作到元素高度隨着元素的進行自適應變化。

對於複雜佈局，若是圖片的寬度是不固定的自適應的，咱們一般會想到這麼一個取巧的作法，就是隻設定圖片的寬度例如img { width: 100%; }，圖片的高度不進行限定，由圖片的內容去撐開，這樣會出現圖片佔據的高度有一個從0到計算高度的圖片變化，視覺上會有明顯的元素跳動，代碼層面會有佈局重計算。即便圖片加載速度很快，容器在圖片加載先後都會有一個變型的過程，也就是俗稱的「閃爍」，而若是圖片加載不出來，總體佈局就更是難看了。

因此對圖片高寬都進行限定仍是有必要的，可是同時要保證寬度自適應。

給子元素/僞元素設置margin/padding撐開容器

因爲添加子元素與HTML語義化相悖，所以更推薦使用僞元素(:after)來實現此方案。

<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須要觸發BFC消除與其餘元素可能發生margin摺疊的問題
}
.placeholder:after {
  content: ' ';
  display: block;
  margin-top: 100%; 
}

容器內部如何添加內容

那麼，在撐開容器後，如何給容器添加內容（圖片、文本等）呢？
利用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實現比例固定圖片自適應佈局
巧用margin/padding的百分比值實現高度自適應（多用於佔位，避免閃爍）