不用js巧妙设置百分比图片or元素等宽高

在上一篇博客中提到，倘若用javascript来大量设置元素的定形尺寸，在网速不乐观的场景下，体验会异常糟糕！

这主要是HTML文档渲染顺序引起的，script标签在css文件渲染之后执行，在网速慢时用户会先看到css里的样式，不久之后（js执行结束）会看到js操作DOM设置的元素样式，用户就会看到元素“漂移”的现象！

（自带特效）很炫酷？！你们可以自己在弱网络下测试下，这里就不贴视频了。

那么问题来了！我需要一个百分比响应移动设备宽度的元素，同时不打算使用js来获取宽度动态设置高度，怎么实现元素等宽高？

方案一：利用padding模型

MDN关于padding的解析如下：

看到亮点了吗？！

Percentages: refer to the width of the containing block

也就是：

单位值为百分比时，是基于父元素的宽度的百分比

那么，我们不妨在需要定形的元素上外嵌一个只用padding来占据元素宽高的div：

<style>
    /*等宽高*/
    .container {
        width: 20%;
    }
    .container .assist-block {
        position: relative;
        padding: 50% 0;
    }
    .container .assist-block img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="container">
    <div class="assist-block">
        <img src="jordon.jpg" alt="">
    </div>
</div>

.assist-block容器样式中，padding: 50% 0，即此元素内边距等于父元素的宽度。

需要注意的是，position:relative一定不能省略，这里涉及到绝对定位与相对定位的参考坐标问题，如果此处省略，子元素（img元素）会继续往上寻找有设置定位方式的元素作为参考坐标（这里的参考坐标将是根元素），则图片宽高等于页面的宽高！

img元素中采用绝对定位，是为了脱离父元素的文档流，否则img元素的宽高定形将不起作用！

这里有一个小细节，当采用相对定位时，元素的宽高是参照父元素盒模型中content的height；而使用绝对定位时，元素的宽高是参照父元素盒模型中content的height+padding！

个人认为这种现象与box-sizing样式有关：

使用相对定位时，box-sizing属性默认为content-box，border和padding不计算入width之内；
使用绝对定位时，box-sizing属性默认为border-box，border和padding计算入width之内；

但当我在样式中设置元素的box-sizing属性时，仍无法改变！

显而易见，倘若我们需要宽高比为2:1的图片，则：

<style>
    /*宽高比为2:1*/
    .container {
        width: 20%;
    }
    .container .assist-block {
        position: relative;
        padding-top: 25%;
    }
    .container .assist-block img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

方案二：利用伪元素after

此方案不需要外嵌多余的div，但仅对闭合标签起作用（譬如：div），即对img元素无效。

<style>
    .box{
        width: 20%;
    }
    .box:after{
        display: block;
        padding: 50% 0;
        content : '';
    }
</style>

<div class="box" style="background-color:red"></div>

效果如下：

文章最后宣传一下我刚搭建的个人站点！