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 都将在元素内部进行绘制，因此就不用担心会影响元素自身的尺寸了。需要注意的是，元素自身的有效空间就被压缩了！