持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
实际上这篇文章来自一个经典面试题目： 当外部div标签包裹一个内部div标签，且只知内部div标签width为50%，如何使内部div呈现为一个正方形？
<div clss="out">
<div class="square"></div>
</div>
.square {
width: 50%;
}
方案一：CSS3 vw 单位
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height。
利用 vw 单位，我们可以很方便做出自适应的正方形：
<div clss="out">
<div class="square"></div>
</div>
.square {
width: 50%;
height: 50vw;
}
补充：
vmin使用最小那边的比例。也就是说，如果浏览器窗口的高度小于他的宽时，1vmin将等价于1vh；如果浏览器的宽度小于他的高度时，1vmin等价于1vw。
vmax则相反：它使用最大的那一边。因此当viewport的宽大于高时，1vmax等价于1vw；如果浏览器的高大于宽时，1max将等价于1vh。
方案二：设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
<div clss="out">
<div class="square"></div>
</div>
.square {
width: 50%;
height: 0; /* 防止因为添加内容导致的高度溢出 */
padding-bottom: 50%;
}
方案三：利用伪元素的 margin(padding)-top 撑开容器
用一个子元素撑开 square 部分的高度，从而实现正方形
<div clss="out">
<div class="square"></div>
</div>
.square {
width: 50%;
overflow: hidden; /* BFC 划重点，防止容器与伪元素在垂直方向发生了外边距折叠 */
}
.square::after {
content: '';
display: block;
margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
注：若使用垂直方向上的 padding 撑开父元素，则不需要触发 BFC
补充：（我知道你会去查）
CSS伪元素
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
参考：
