box-sizing

作用

改变盒子模型的组成方式。

取值

• content-box
• border-box

标准盒模型组成方式

标准盒模型包括：width、padding、border、margin

其中：

盒模型实际占据宽度：width + 左右padding + 左右border

盒模型实际占据高度：height+ 上下padding + 上下border

注意：margin是不算入到盒子的总宽度以及总高度中去的，它只是用来将两个盒子隔开一定距离。

width、padding、border之间的关系

在css中，width/height指的是内容区域的宽度和高度，增加padding/border不会影响内容区域的尺寸，增加的是元素框的总尺寸。

举个栗子：

一个div，width=100，padding=10，那么它的width是多少？

答案：width还是100（记住上面说的，width是内容的宽度），但是元素框总宽度是100+20=120

下面介绍下box-sizing每个值的作用

content-box

默认值，如果不设置就是和标准盒模型下的组成方式是一致的。

border-box

该属性被称为怪异盒模型。

width就是元素的总宽度（固定不变），即使设置了padding/border都不会改变width的值，只是往中间挤。