1、方式一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.square {
width: 30%;
height: 30vh;
border: 1px solid red;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
2、方式二
由于margin, padding的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。但要注意,仅仅设置padding-bottom是不够的,若向容器添加内容,内容会占据一定高度,为了解决这个问题,需要设置height: 0。
.square2 {
width: 30%;
height: 0;
padding-bottom: 30%;
border: 1px solid red;
background-color: #00FFFF;
}
3、方式三
利用伪元素的margin(padding)-top撑开容器。max-height属性失效的原因是: max-height属 性只限制于
height,也就是只会对元素的content height起作用。
解决方法是:用一个子元素撑开content部分的高度,从而使max-height属性生效。
首先需要设置伪元素,其内容为空,margin-top设置 为100%。
但要注意,若使用垂直方向上的margin撑开父元素,仅仅设置伪元素是不够的,这涉及到margin collapse外边距合并的概念,由于容器与伪元素在垂直方向发生了外边距合并,所以撑开父元素高度并没有出现,解决方法是在父元素上触发BFC:设置overflow:hidden。
.square3 {
width: 20%;
/* 处理外边距合并 */
overflow: hidden;
border: 1px solid red;
background-color: #00FFFF;
}
.square3::after {
content: '';
display: block;
margin-top: 100%;
}
4、方式四
若使用垂直方向上的padding撑开父元素,则不需要触发BFC。子元素的100%就相当于父元素的20%
.square4 {
width: 20%;
border: 1px solid red;
background-color: #00FFFF;
}
.square4::after {
content: '';
display: block;
padding-top: 100%;
}
本篇文章内容来自微信小程序“前端面试星球”。