css笔记->利用padding百分比值实现div宽高相等

知识点：padding百分比值无论是水平方向还是垂直方向均是根据宽度计算。

我们可以根据这个实现一个宽高相等的div

<div style="background-color: blue;">
     <div style="background-color: chartreuse;width: 50%;height: 0px;padding-bottom: 50%">111</div>
    </div>

宽度为：50%

高度：0px

padding-bottom: 50% <!--与宽度相同-->

就可以了，效果如下图：