理解border-box

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

css

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

 div {
     width: 100px;
     height: 100px;
     background-color: lightgreen;
     border: 10px solid lightcoral;
     padding: 50px;
}

我给div指定了100px的宽度,同时设置了border和padding,最后你会发现盒子的宽度最后变成了220px。

原因是div的box-sizing默认属性值是 content-box, 它的特点是,你设置的width仅仅是实际内容区域的宽度,而元素的实际宽度是 width+padding+border 。

如果要让实际宽度为100px,同时保留padding和border值,就必须调整width属性的值。

当然,还有另一种办法就是使用box-sizing的另一个属性:border-box该属性的行为表现为:当你设置width:200px, 这个元素的实际宽度就是200px,这个值是内容的宽度+内边距以+边框之和, 因此,这时候再设置内边距只会减少内容的宽度,因为总宽度已经是固定值了。

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

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

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

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

python之禅

猜你喜欢

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