一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！
也許你會說，left/right以父元素的width為參照物好理解，但是top/bottom為什麽也是以父元素的width為參照物的呢？網上眾說紛紜，關鍵還是看W3C的規範：

利用這個規範，我們可以用來解決移動端的高度自適應占位問題，在移動端,高度一般都是用內部撐開，例如，一個div包著一個圖片。如果是用圖片撐開div的話，那麽在圖片未加載出來時，整個頁面的布局就會發生變化。即使圖片加載速度很快，容器在圖片加載前後都會有一個變型的過程，也就是俗稱的“閃爍”，而如果圖片加載不出來，整體布局就更是難看了。

現在，利用margin/padding的百分比值。就可以做到不靠圖片本身就能把容器的高度撐開

div{
      width:100%
      height:0
      padding-top:100%
      position:relative
      background:rgba(7,17,27,.4)
}
div img{
      position:absolute
      width:100%
      top:0
}

盒子模型如下：

從盒子模型可以看出，雖然容器的內容高度為0，但由於有了跟內容寬度一致的padding，因此整體視覺效果上像是被撐開了；

後記，當然還有其他的方案也能實現寬高自適應,例如css3新推出的長度單位vw。。。。

當padding/margin的取值形式為百分比時。。。。。