一、CSS百分比padding都是相對寬度計算的

在默認(rèn)的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對于寬度計算的，這個和top, bottom等屬性的百分比值不一樣。

這么設(shè)計的原因在我的新書（應(yīng)該不出幾個月就要出版了）中會有說明，這里不展開。

對于padding屬性而言，任意方向的百分比padding都現(xiàn)對于寬度計算可以讓我們輕松實(shí)現(xiàn)固定比例的塊級容器，舉個例子，假設(shè)現(xiàn)在有個<div>元素：

div { padding: 50%; }

或者：

div { padding: 100% 0 0; }

或者：

div { padding-bottom: 100%; }

則這個<div>元素尺寸就是一個寬高1:1的正方形，無論其父容器寬度是多少，這個<div>元素總能保持比例不變。

這種能固定比例的特性什么作用呢？

對于絕大多數(shù)都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因?yàn)閳D片原始尺寸它是固定的。在傳統(tǒng)的固定寬度的布局下，我們會通過給圖片設(shè)定具體的寬度和高度值，來保證我們的圖片占據(jù)區(qū)域穩(wěn)固；但是在移動端或者在響應(yīng)式開發(fā)情況下，圖片最終展現(xiàn)的寬度很可能是不確定的，例如手機(jī)端的一個通欄廣告，iPhone7下寬度是375，iPhone7 Plus下是414，還有360等尺寸，此時需要的不是對圖片進(jìn)行固定尺寸設(shè)定，而是比例設(shè)定。

通常有如下一些實(shí)現(xiàn)：

1. 固定一個高度，然后使用background-size屬性控制，如下：

.banner { height: 40px; background-size: cover;}

實(shí)時效果如下：

可以看到隨著寬度的變化，總會有部分圖片區(qū)域（寬度或高度）無法顯示，并不是完美的做法。

2. 使用視區(qū)寬度單位vw，如下：

.banner { height: 15.15vw; background-size: cover;}

如果對兼容性要求不是很高，使用vw也是一個不錯的做法，至少理解起來要更輕松一點(diǎn)。

但是，如果我們的圖片不是通欄，而是需要離左右各1rem的距離，此時，我們的CSS代碼就要