css 自适应正方形
2021-02-07 本文已影响0人
草祭木初
要用到3个技术点
1，BFC
2，伪元素
3，padding设置百分比时，是基于元素的宽度
<html>
<style>
p {
margin: 20px;
border: 1px solid;
display: inline-block; /* 用来触发BFC */
}
p:after {
display: block;
content: ' ';
padding-bottom: 100%;
float: left;
}
</style>
<body>
<div style='border: 1px solid;position: relative'>
<p>自适应正方形</p>
<div>
<p>自适应正方形</p>
</div>
</div>
<script>
</script>
</body>
</html>
p 的 display:inline-block; 用来触发bfc，让after的高度 能撑起p的高度
after设置了 float: left; 目的是不跟p的内部元素抢空间。
否则p的整体高度就是p的内部元素高度+after的高度
自适应正方形.png
