一個移動端的小需求，元素的寬度根據屏幕寬度進行獲取，也就是實時獲取，可以當成單位是 百分比%，要求元素表現為正方形，也就是說高度要等于寬度。

發現這個需求的時候，我第一時間就是想用 js來控制，根據屏幕寬度來計算出元素寬度值，并將元素的高度也賦值成這個值，這樣一來就實現元素的寬度、高度一致了，沒什么難度，幾行代碼嗖嗖地搞定。

不過這個需求其實只是我正在做的項目的一個小點而已，我當時正在專心致志地寫 css，做過稍大一點項目的人都知道，各種切換代碼最煩了，寧愿在瀏覽器上另開一個窗口看看有沒有其他的辦法也不想切換項目文件夾來回折騰，所以我就網上搜了一下，確實讓我看到了一個方法。

不說廢話，先上代碼：

// HTML
<div class="box">
    <img src="https://dummyimage.com/400x500/ff3ff3)" alt="">
</div>

// CSS
.box {
  position:relative;
  width:40%;
  height:0;
  font-size:0;
  line-height:0;
  padding:40% 0 0;
}
img {
  position: absolute;
  width: 100%;
  height: 100%;
}

看看效果

嗯，確實很棒，.box的寬度和高度完全一致，內部元素 img的寬高也都能被完美控制
CSS代碼中，最關鍵的就是這一句：

padding:40% 0 0;

這里的 40%就是寬度 width的值，二者相等，則寬高就相等，那么為什么這樣可以呢？

既然是與 padding有關，那么很自然先去 MDN上看一下關于 padding的定義：

大概的意思是：

padding的值可以設置為兩種類型。
1. 一種是固定值（例如 px單位），必須是正值；
2. 第二種則是百分比值(%)，此時 padding的大小是相對于元素的 寬度的百分比，必須是正值。

看到規范后恍然大悟， padding用了那么多年，原來這里的百分比是相對于元素寬度的大小，以前一直以為如果是上下 padding，則是相對于高度，左右padding就是相對于寬度的，看來想要嫻熟地使用一門技術，規范還是要多多看看的。

知道了以上后，我們就很清楚了，這里的 padding:40% 0 0;同樣可以換成 padding:0 0 40%;，或者 padding-top: 40%; 或者 padding-bottom: 40%;，至于其他的一些樣式，例如 height:0; font-size::0等，都是為了能讓元素的高度符合預期而進行的一些聊勝于無的保障措施。

不過在使用這種技巧的時候，有些小問題可能需要稍微注意一下。

將代碼改一下：

// HTML
<div class="box">
    <img src="https://dummyimage.com/400x500/ff3ff3)" alt="">
    <span>666</span>
  </div>

// CSS
.box {
  position:relative;
  width:40%;
  height:0;
  font-size:0;
  line-height:0;
  padding:40% 0 0;
}
img {
  position: absolute;
  width: 100%;
  height: 100%;
}
span {
  position: absolute;
  bottom: 0;
  padding: 4px;
  font-size: 20px;
  background-color: skyblue;
}

增加了一個 span元素，在我想象中，效果應該是這樣的:

然而，實際上它是這樣的：

什么情況？

skyblue的背景明明是應該包裹著文字而且比文字稍大才對，怎么連同文字一起縮下去了？

對著代碼看了半天，也沒看出來哪里錯了，無奈之下只好使用刪碼大法(將樣式逐行刪去查看效果，并與之前的進行對比)，在刪到 line-height:0;的時候終于定位了，原來問題出在這里。

雖然使用 padding元素，將原本 height: 0;的元素，硬生生給撐開了，但這些撐出來的高度實際上還是被 padding給占據了，根本沒有給子元素留空間，里面的子元素就只能被擠壓到父元素外面了

如果你給.box元素增加一個 overflow:hidden;的樣式，就會發現父元素整個消失了，因為父元素本來就沒有高度，所以就把 padding給硬撐出來的高度給 hidden掉了，子元素因為是絕對定位，所以既然被擠出了父元素也不會被 hidden掉。

至于 line-height，實際上真要說起來其中還是有很多學問的，在本例中，之所以 line-height: 0能讓元素變’扁’了，就是因為其改變了文本撐出來的line高度，導致padding: 4px;不是以文本作為參考，而是以高度 0作為參考，如果審查元素的話，你就會發現那變’扁’了的 skyblue背景的高度其實是 8px，正好是 padding: 4px;的上下之和。