先来看需求：容器(宽高不等的)内部自适应的正方形
方案一：宽高设置为vw，vh
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
/*只是为了证明宽高不等而已*/
height: calc(100vw + 100px);
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 40vw;
height: 40vw;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
这种方式最简单了，缺点：它是基于窗口的宽高的，不是基于父元素的宽高的
方案二：
设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
/*只是为了证明宽高不等而已*/
height: calc(100vw + 100px);
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50%;
height: 0;
padding-bottom: 50%;
background: red;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
为什么需要设置height:0,如果不设置，box中有内容的话，会出现如下现象
方案三：利用伪元素的 margin(padding)-top 撑开容器,在加一个绝对定位容器放置内容
这个其实和方案一思路一样，只不过使用伪元素副作用更小。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
/*只是为了证明宽高不等而已*/
height: calc(100vw + 100px);
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: relative;
width: 50%;
background: red;
overflow: hidden;
}
/*伪元素的目的是用来撑开父容器的*/
.box::after {
content: "";
display: block;
margin-top: 100%;
/*padding-top: 100%;*/
}
/*单独增加一个容器，用来放置内容*/
.content {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="content">
我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</div>
</div>
</body>
</html>
应用：
可以用于一些图片的自适应展示：
<style type="text/css">
img{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="container">
<div class="box">
<div class="content">
<img src="aa.png"/>
</div>
</div>
</div>
</body>
