css实现div宽度⾃适应，宽⾼保持等⽐缩放
css实现div宽度⾃适应，宽⾼保持等⽐缩放
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:'';
margin属性值可以为百分比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%;
}
本篇⽂章内容来⾃⼩程序“前端⾯试星球”。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。