什么叫CSS盒模型？有哪几种盒模型？有什么区别？box-sizing属性有什么用？

什么是CSS盒模型？
在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:

内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成.

有哪几种盒模型？
对于盒模型，分为标准盒模型和怪异盒模型两种.

有什么区别？
标准(W3C)盒模型的范围包括margin、border、padding、content,并且设置的宽高只包含content，不包含（padding+border）其他部分
怪异(IE)盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border

box-sizing作用:
用来控制元素的盒子模型的解析模式，默认为content-box

如何计算盒子的宽度和盒模型的宽度
盒子的宽度：内容width+左右padding+左右border
盒子的高度：内容高度+上下padding+上下border
盒模型的宽度
盒子模型的宽度：内容width+左右padding+左右border边框+左右margin
盒子模型的高度：内容高度+上下padding+上下边框+上下margin