CSS 设置 border 边框不占元素宽高

box-sizing 属性作用

用于设置 html 标签的宽度和高度是否包含 padding 和 border 的属性

box-sizing 常用的有以下两种值 :

• content-box
• border-box

1.

content-box

( 默认值 )

如下图所示，css 中设置的宽度和高度应用到元素上，然后在元素之外绘制 padding 及 border ，所以元素的尺寸也就不再是我们设置的大小了，而是

元素本身的宽高

+

padding 的宽高

+

border 的宽高

。

2.

border-box

当 box-sizing 的值为 border-box 时，为元素指定的任何 padding 和 border 都将在元素内部进行绘制，因此就不用担心会影响元素自身的尺寸了。需要注意的是，元素自身的有效空间就被压缩了！