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