方法一：vw / vh 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>正方形</title>
<style>
.square {
width: 25vw;
/* 利⽤vw单位实现⾃适应宽度 */
background-color: red;
padding-top: 25vw;
/* 利⽤padding实现⾃适应⾼度 */
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
上⾯的代码中，利⽤vw单位设置了正⽅形的宽度为屏幕宽度的 1/4（25%），同时利⽤ padding-top 设置正⽅形的⾼度也为屏幕宽度的 1/4，这样就实现了⼀个宽⾼⾃适应的正⽅形。
方法二：伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>正方形</title>
<style>
.square {
position: relative;
width: 50%;
background-color: red;
}
.square::before {
content: "";
display: block;
padding-top: 100%;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
上⾯的代码中，通过设置 div 元素的宽度为 50% ，再利⽤ ::before 伪元素设置 padding-top 为 100% ，就可以实现⼀个宽⾼⾃适应的正⽅形。
方法三：padding 撑开
在方法一已经使用。
扫一扫
1667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
