CSS 实现自适应正方形

1.直接采用vw布局

高度和宽度统一采用 vw 布局，达到高度宽度自适用的效果。

.square {
  width:50vw,
  height:50vw
}

❓ 只能相对于 viewport 进行布局，但很多时候我们的业务场景并不是相对于窗口大小缩放正方形大小。

2.巧用padding

padding的百分比是相对父元素的宽度进行计算的

.square {
            width: 20%;
            height: 0;//如果不将heigh设置为0，当square内有内容的时候就会撑开盒子，所以将这个元素的高度限制为只能由 padding 来控制
            padding-top: 20%;
            background-color: tomato;
        }

• 这种布局，通常会给父元素设置固定的高度，子元素设置width百分比布局，通过padding是基于父元素宽度前提下，进行适配

padding百分比+height设置0；推荐！！！

3. 巧用伪元素 + margin

margin的百分比是相对父元素的宽度进行计算的

        .square {
            width: 30%;
            overflow: hidden; // 触发BFC，父子嵌套的元素垂直方向的margin取最大值；不写会发生margin塌陷
            background-color: tomato;
        }

        .square::after {
            content: '';
            display: block;
            margin-top: 100%;
        }

• margin百分比也是相对于父元素的 width ，设置伪元素的 margin-top: 100% 其实就是撑开容器的height，让 heigth = width。
• 什么是margin塌陷和margin合并

❓ 容器内无法填充内容，不推荐……