CSS实现自适应宽度正方形

在CSS3中增加了一系列相对于视窗区域百分比的单位：vw、vh。

其中vw是相对于视窗区域宽度百分比的单位，1vw = 1% viewport width。vh是相对于视窗区域高度百分比的单位，1vh = 1% viewport height。使用这个单位可以很方便的做出自适应正方形。

在线预览：

See the Pen OXqYNy by abcdGJJ (@abcdGJJ) on CodePen.

这种方案优点是简洁，不过缺点是兼容性不好

在CSS盒子模型中，margin和padding的百分比数值是相对于父元素宽度（←这是重点，拿笔记下来）计算的，因此只要将元素垂直方向的一个padding值设为与width相同的百分比就行了

在线预览：

See the Pen zBbQEJ by abcdGJJ (@abcdGJJ) on CodePen.

表面上看一切正常，但是当我们增加内容的时候会发现高度溢出，因为内容区域占据了高度。为了解决这个问题，我们可以把高度设为0

在线预览：

See the Pen AXwkbg by abcdGJJ (@abcdGJJ) on CodePen.

此方案兼容性好，但缺点是可能碰上 max-height 无效

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效

而失效的原因是 max-height 属性只限制于 height，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：

.square {
    width: 100%;
}
.square:after {
    content: '';
    display: block;
    margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

一刷新页面，怎么什么也没有？

这里就涉及到 margin collapse 的概念了，由于容器与伪元素在垂直方向发生了外边距折叠，所以我们想象中的撑开父元素高度并没有出现。而应对的方法是在父元素上触发 BFC：

1
2
3

.square {
    overflow: hidden;
}

OK，父元素被撑起来了，我们再试一试设置 max-height：

See the Pen AXwkbg by abcdGJJ (@abcdGJJ) on CodePen.