盒子模型box-sizing

前言：box-sizing包含两种content-box和border-box

一、类型

1. content-box 标准盒子模型

盒子大小为 content + padding + border 

width为content大小

2. border-box 怪异盒子模型

盒子大小为 content + padding + border 

width为content + padding + border 

二、使用

在公共样式中设置盒子模型为border-box

* {
    box-sizing: border-box;
}

之所以用border-box是因为，UI小姐姐提供设计稿后我们测量width和height然后进行排版，你肯定不想padding或者border撑大了盒子。

三、其它

1. 如果你看见padding-box那是background-clip的一种类型，意思是背景的绘制区域覆盖到padding区域，不包含border。background-clip属性还包含content-box和border-box具体可以查阅background属性资料，这里不做讨论。

2. 至于margin-box，从来没支持过，因为没必要，它不改变盒子的大小