在默认的程度文档流偏向下，CSS margin和padding属性的垂直偏向的百分比值都是相对付宽度计较的，这个和top, bottom等属性的百分比值纷歧样。
这么设计的原因在我的新书（应该不出几个月就要出书了）中会有说明，这里不展开。
对付padding属性而言，任意偏向的百分比padding都现对付宽度计较可以让我们轻松实现牢靠比例的块级容器，举个例子，假设此刻有个<div>元素：
div { padding: 50%; }
可能：
div { padding: 100% 0 0; }
可能：
div { padding-bottom: 100%; }
则这个<div>元素尺寸就是一个宽高1:1的正方形，无论其父容器宽度是几多，这个<div>元素总能保持比例稳定。
这种能牢靠比例的特性什么浸染呢？
对付绝大大都都机关，我们并不要求非要比例牢靠，可是有一种环境破例，那就是图片，因为图片原始尺寸它是牢靠的。在传统的牢靠宽度的机关下，我们会通过给图片设定详细的宽度和高度值，来担保我们的图片占据区域稳固；可是在移动端可能在响应式开拓环境下，图片最终揭示的宽度很大概是不确定的，譬喻手机端的一个通栏告白，iPhone7下宽度是375，iPhone7 Plus下是414，尚有360等尺寸，此时需要的不是对图片举办牢靠尺寸设定，而是比例设定。
凡是有如下一些实现：
1. 牢靠一个高度，然后利用background-size属性节制，如下：
.banner { height: 40px; background-size: cover; }
及时结果如下：
可以看到跟着宽度的变革，总会有部门图片区域（宽度或高度）无法显示，并不是完美的做法。
2. 利用视区宽度单元vw，如下：
.banner { height: 15.15vw; background-size: cover; }
假如对兼容性要求不是很高，利用vw也是一个不错的做法，至少领略起来要更轻松一点。
可是，假如我们的图片不是通栏，而是需要离阁下各1rem的间隔，此时，我们的CSS代码就要烦琐点了，想要保持完美比例，就利用借助CSS3 calc()计较：
.banner { height: calc(0.1515 * (100vw - 2rem)); background-size: cover; }
假如，图片间隔两侧的宽度是动态不确定的，则，此时calc()也捉襟见肘了，但，恰恰是普普通通其貌不扬的padding属性，其兼容性和适应性都一级棒。
3. 利用百分比padding，如下：
.banner { padding: 15.15% 0 0; background-size: cover; }
此时无论图片的外部元素怎么变换，比例都是恒定稳定的。
二、CSS百分比padding与宽度自适应图片机关
可是有时候我们的图片是不利便作为配景图泛起的，而是内联的<img>，百分比padding也是可以轻松应对的，求套路是较量牢靠的，图片元素外面需要一个牢靠比例的容器元素，譬喻下面的HTML布局：
<div> <img src=""banner.jpg> </div>
.banner元素同样认真节制比例，然后图片填充.banner元素即可，CSS代码如下：
.banner { padding: 15.15% 0 0; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
结果就告竣了！
目睹为实，去年起点中文网手机版诸多页面的通栏告白就都是这么实现的，最终的结果拜见下面的gif截图（假如图无法显示，可以评论反馈）：
可以看到，无论屏幕宽度多宽，我们的告白图片比例都是牢靠的，不会有任何剪裁，不会有任何区域缺失，机关就显得很是有弹性，也更结实。
————-
其实，我之前一直低估百分比padding的实际应用代价，因为有vw单元的存在，究竟领略vw看上去要更简朴一些，所以，一直就没做相关能力的先容。可是，跟着图片相关机关处理惩罚越来越多，我发明，百分比padding的实用代价要比想象的大，要比vw单元合用场景更多，兼容性更好（百分比特性IE6+支持，图片100%包围IE8+支持）。
对付巨大机关，假如图片的宽度是不牢靠的自适应的，我们凡是会想到这么一个取巧的做法，就是只设定图片的宽度，譬喻：
img { width: 100%; }
此时欣赏器默认会保持图片比例显示，图片宽度大了，高度也随着一起变大；图片宽度小了，高度也随着一起变小。开拓人员好像无需体贴图片真实比例是奈何的。
然而这种能力有一个很是欠好的体验问题，那就是跟着页面加载的举办，图片占据的高度会有一个从0到计较高度的图片变革，视觉上会有明明的元素跳动，代码层面会有机关重计较。