在讲box-sizing这个属性之前我们先来回顾一下CSS中的盒子模型
盒子模型
盒子模型
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。 -
Border(边框) - 围绕在内边距和内容外的边框。 -
Padding(内边距) - 清除内容周围的区域，内边距是透明的。 -
Content(内容) - 盒子的内容，显示文本和图像。
那标签元素在默认的情况下高度和宽度是怎么计算的呢？
元素的宽度和高度
当我们指定一个标签的宽度和高度属性时，默认情况下，我们只是设置内容区域的宽度和高度。如果你想知道完全大小的元素，还必须添加内边距，边框和外边距
我们举个例子来说明
div {
background-color: #fafafa;
width: 200px;
border: 10px solid yellow;
padding: 10px;
margin: 10px;
}
那上面这个div标签实际宽度是多少呢？让我们来算算：
200px (宽) + 20px (左 + 右内边距) + 20px (左 + 右边框)+ 20px (左 + 右外边距) = 260px
这个div最终实际占得宽度就是260px
为什么这么计算呢？这就不得不引出box-sizing这个属性来
box-sizing
在默认情况下，box-sizing的值为：content-box，代表你对一个元素所设置的 width和height 只会应用到这个元素的内容区。
如果这个元素有任何的 border，或 padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值
这使得我们调整标签大小是必须得时刻小心，将边框和内边距也计算进去,不然布局可能会出错，这一点比较烦人
那box-sizing的值为：border-box很好的解决了这一点！
border-box代表你对一个元素所设置的 width和height 会应用到这个元素的边框区。也就是说width或者height中已经包含了padding和border 的值
内容区的实际使用宽高就是减去(border + padding)的值，这样就使的我们在大多数情况下，很容易地设定一个元素的宽高
记住
box-sizing:content-box宽高不包含padding和border
box-sizing:border-box宽高包含padding和border的值
在平时开发中，可以统一使用box-sizing:border-box，这样我们设置宽高的时候更容易一些，不容易出错
最后 🙌
好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~
网友评论