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