理解border-box

By 刘志军, 2021-06-12, 分类: css

css

box-sizing 可以控制盒模型的行为,默认值是content-box, 另一个属性值是 border-box。在理解 border-box 的作用前,先来看一个例子。

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

容器盒子里面有两个子元素,我们希望两个元素的左右布局,显示在一行。

我们给他配上样式

.container {

    background-color: #aaa;
    width: 600px;
    margin: 10px auto;
    border: 1px solid #000;

}

.left {
    background-color: #fff;
    width: 400px;
    float: left;
    height:200px;
    border: 1px solid #ccc;
}

.right{
    width:200px;
    float:left;
    background-color: #fff;
    border: 1px solid #ccc;
    height:200px;
}

.container::after{
    content: "";
    display: block;
    clear:both;
}

container容器的宽度是600px,子元素 left 的宽度400px,right 的宽度是200px。使用浮动的方式让两个div显示在一行,但结果是右边的div换行了。

微信截图_20210611181027.png

原因就是div的box-sizing默认属性值是 content-box, 它的特点是,你设置的width是内容的宽度,如果加上外边距、内边距、和边框的宽度,元素的实际宽度是 width+margin+padding+border 。

所以这里右边的子元素实际宽度是202,因为边框左右各有1px。如果要使得这两个元素放在一行,必须将其中一个元素的 width 减少2px。

除此之外,第二种方式就是将box-sizing的值改成border-box, 该属性的行为表现为:当你设置width:200px, 这个元素的实际宽度就是200px,这个值是内容的宽度+内外边距以及边框之和, 因此,这时候再设置边距只会减少内容的宽度,因为总宽度已经是固定值了。

设置为boder-box后, left 400, right200 加起来宽度正好是600。 所以他们就能显示在一行了。这也是通用做法

同时为了将该属性设置为通用行为,让所有元素的行为表现一致,可以设置全局样式

*;
::before,
::after{
    box-sizing: border-box;
}

微信截图_20210611182834.png


有问题可以扫描二维码和我交流

关注公众号「Python之禅」,回复「1024」免费获取Python资源

python之禅

猜你喜欢

2019-05-08
CSS块级元素与行内元素
2021-06-01
理解CSS行高line-height
2020-04-15
重学前端:相对定位VS绝对定位VS固定定位
2021-05-26
理解 focus-within 伪类
2021-05-20
CSS元素遮挡问题与z-index属性
2021-05-20
CSS 媒体查询