思路,正方形,长宽都一样,需要找到一个标准值然后再去设置盒子模型,可以用padding,margin, width/height,
正题开始
1. 使用padding,原因,百分比是基于父元素的宽度,所以如果是根据父盒子的百分比来算,则可以使用这个方法
具体代码如下
<div class="square"></div>
.square {
display: inline-block;
padding: 0 20% 20% 0;
background: red;
}
- padding+flex,适合做多个正方形,同样利用padding撑开盒子模型,使高度与宽度相同
<div class="square-wrapper">
<div class="square"></div>
<div class="square"></div>
</div>
.square-wrapper {
display: flex;
}
.square {
flex: 1;
}
.square::after {
content: "";
display: block;
padding-bottom: 100%;
background: #000;
}
- 相同原理也可以使用在内部元素加margin来完成撑开盒子
.square-wrapper {
display: flex;
}
.square {
flex: 1;
background: #000;
}
.square::after {
content: "";
display: block;
margin-bottom: 100%;
}
- rem / em 都是同一个值,rem取到的是html标签的font-size,em是父元素的font-size,同样是固定的
- 使用vw,表示将屏幕的宽度切割成100份,然后也可以完美适应各种屏幕(这里的屏幕指的是包含这个document对象的容器,如果在浏览器打开,那么就是浏览器内部可展示的宽度;如果在iframe中打开,就是iframe的宽度)
.square {
width: 20vw;
background: #000;
}
.square::after {
content: "";
display: block;
padding-bottom: 100%;
// margin-bottom: 100%; // 也可以
}
暂时就想到这么多了。如果你有更好的,可以留言告诉我哦~