1. 利用 padding 或 vw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Document</title>
<style>
.square {
width: 25vw;
padding-top: 25vw;
/* height: 25vw; 也可以*/
background: pink;
/* 避免被内容撑开多余的高度 */
height: 0;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
vw单位设置了正⽅形的宽度为屏幕宽度的 1/4(25%),同时利⽤
padding-top (当然 padding-bottom 也可以)撑开盒子,使正⽅形的⾼度也为屏幕宽度的 1/4。或者直接设为父级的百分比宽度也可以。
注:vmin 是相对当前视⼝宽⾼中较小的⼀个的百分⽐单位,同理 vmax 是相对当前视⼝宽⾼中较大的⼀个的百分⽐单位。
2. 利用伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Document</title>
<style>
.square {
width: 30%;
background: pink;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
若使⽤垂直⽅向上的 padding 撑开⽗元素,则不需要触发 BFC。
.square {
width: 30%;
overflow: hidden;
background: pink;
}
.square::before {
content: '';
display: block;
margin-top: 100%;
}
由于容器与伪元素在垂直⽅向发⽣了外边距折叠,所以我们想象中的撑开⽗元素⾼度并没有出现。⽽应对的⽅法是在⽗元素上触发 BFC。
2.1 如果有内容的话
当元素内部添加内容时⾼度出现溢出,可以将内容放到独⽴的内容块中,利⽤绝对定位消除空间占⽤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>Document</title>
<style>
.square {
width: 30%;
background: pink;
position: relative;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="square">
<div class="container">内容</div>
</div>
</body>
</html>
但如果是 margin-top,则:
换成 margin 和 scroll: