使元素的高度根據寬度變化的一種實現方式

       如果padding屬性的值是百分比值,這個值是根據父元素的寬度(X周屬性)計算的,即使是Y軸上的padding(padding-top,padding-bottom)也是如此,根據這個特性,可以實現Y軸尺寸和X軸尺寸相關聯的效果.
      比如這樣寫css:

.target {
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  background-color: black;
}

      width:50%,寬度是父元素寬度的50%;height:0,內容高度設置爲0,使元素所佔空間完全由padding決定;padding-bottom: 50%,元素的下部padding的寬度是父元素寬度的50%,這個計算標準和元素的高度保持一致,所以就能實現一個正方型的區域.
      其實,雖然元素的內容區域高度是0,只要padding有位置,內部還是可以正常放置子元素的.
在線demo

—記一次字節跳動尷尬的面試經歷中最值得去查的問題 🤔