是什么
浏览器的渲染引擎将HTML文档渲染成一个文档树，然后根据CSS基础框盒模型（CSS basic box model），将每个节点渲染成一个矩形的盒子。
组成
一个盒子由content、padding、border、margin四个部分组成。
- content：内容部分，内容部分可以是文本、图片、视频、音频、对象、表格、列表、表单、动画、canvas、svg等。
- padding：内边距部分，内边距部分是内容部分与边框部分的间隔。
- border：边框部分，由
border-width（边框粗细）、border-style（边框样式）、border-color（边框颜色）三个属性组成。 - margin：外边距部分，围绕在边框外的空白部分。
分类
- W3C标准盒子模型
- width/height属性 仅仅表示content部分的宽度/高度
- IE怪异盒子模型
- width/height属性 不仅有content部分的宽度/高度，还包含padding、border部分的大小
box-sizing属性
作用：告诉浏览器如何计算一个元素的高度和宽度。
该属性有三个值：
- content-box：默认值，
width/height属性仅仅表示content部分的宽度/高度（W3C标准盒子模型），如图所示：
- border-box：
width/height属性同时表示content、padding、border部分的宽度/高度（IE怪异盒子模型），如图所示：
- inherit：继承父元素的
box-sizing属性值。当设置一个元素的box-sizing属性为inherit时，如果父元素的box-sizing属性被设置为border-box，那么子元素的盒模型计算方式也会是border-box。
