哎呀吆博客

大前端爱好与探索者-Jerry

等宽高自适应盒子CSS实现方案

CSS 0 评

问题背景:
其实就是被别人突然问了那么一下,然后感觉这个这么简单还问。例如flex布局,先等比例划分三个,然后宽度……,然后宽度怎么才能跟高度一样了……尴尬😅
只要问问度娘,她会毫不吝啬的给出你一堆解决方案!但总结下来,主要就是如下三种:

1.使用vw

CSS3 中新增了一组相对于可视区域百分比的长度单位vwvhvminvmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理vmax是相对当前视口宽高中较大的一个的百分比单位。

.divP{
    width: 100%;
    display: flex;
}
.container{
    width: 33.333333%;
    height: 33.333333vw;
}
.maincontent1{
    background: pink;
}
.maincontent2{
    background: skyblue;
}
.maincontent3{
    background: gold;
}
<div class="divP">
    <div class="container maincontent1"></div>
    <div class="container maincontent2"></div>
    <div class="container maincontent3"> </div>
</div>

这种方法利用了CSS3,最为简洁,但要考虑一定的兼容性。

2.利用自身垂直方向的padding

利用marginpadding的百分比是相对于父容器进行计算的这一特性,可将padding的百分比值同宽度保持一致便能实现自适应的方形盒子了。

body{
    margin: 0;
    padding: 0;
}
.divP{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.divP>div{
    flex: 1;
    /* 必须设置height为0,否则容器添加内容会占据一定的高度,盒子宽高将不再一致 */
    height: 0;
    padding-bottom: 33.333333%;
    overflow: hidden;
}
.divP>div:first-child{
    background: pink;
}
.divP>div:nth-child(2) {
    background: skyblue;
}
.divP>div:last-child{
    background: gold;
}
<div class="divP">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>

该方法兼容性较好,也够简洁。

3.利用子元素的垂直paddingmargin撑开父容器

这里使用伪元素来作为子元素去撑开父容器,这样能让html标签显得更加简洁。
注意,如果使用margin的话,会出现伪元素与父容器在垂直方向的外边距合并的现象,也就是大家所说的margin塌陷现象,而解决该类问题就是为父容器添加overflow: hidden样式来在父容器触发BFC。
若使用padding不用考虑该问题。
如果在最外层容器设置横向的flex样式,也可避免上述问题。
最后要注意的是,父容器里若要添加元素的话,会占据一定的高度,为防止破坏等宽高的样式需要再利用定位等方式配合实现相关需求。

.divP{
    width: 100%;
    display: flex;
}
.divC{
    position: relative;
    width: 33.333333%;
    /* overflow: hidden; 配合margin使用*/
}
.divC::after{
    content: '';
    display: block;
    margin-top: 100% /* padding-top: 100%; 二选其一*/
}
.content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content1{
    background: pink;
}
.content2{
    background: skyblue;
}
.content3{
    background: gold;
}
<div class="divP">
    <div class="divC">
        <div class="content content1"></div>
    </div>
    <div class="divC">
        <div class="content content2"></div>
    </div>
    <div class="divC">
        <div class="content content3"></div>
    </div>
</div>

综上可见,第三种方式较为繁琐,但改种方案也不乏有人使用,能做的就是考虑的更加全面些吧。

上一篇

发表评论

电子邮件地址不会被公开。 必填项已用*标注