1.盒模型简介
当对一个文档进行布局(lay out)的时候，浏览器的渲染引擎会根据标准之一的CSS基础盒模型(CSS basic box model)，将所有元素表示为一个个矩形的小盒子(box)。CSS决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸...)。
每个盒子由四个部分(或称区域)组成，其效用由它们各自的边界(Edge)所定义。如图，与盒子的四个组成区域相对应，每个盒子都有四个边界：内容边界Content Edge、内边距Padding Edge、边框边界Border Edge、外边框边界Margin Edge。
2.盒模型结构介绍
盒模型分类
1.content-box 内容盒 width = content宽度 // 默认是content-box,两者可以通过box-sizing属性切换
2.border-box 边框盒 width = content宽度 + padding宽度 + border宽度
- margin-area
外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度。
外边距区域的大小由 margin-top、margin-bottom、margin-left、margin-right和简写属性 margin 控制。
- border-area
边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度和 border-box 高度。
边框粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width、max-width、height、min-height 和 max-height 属性控制，假如框盒上有背景(background-color 或 background-image)，背景将会延伸至边框的外沿(默认在边框的下层延伸，边框会盖在背景上)。此默认表现可通过CSS属性 background-clip 来改变。
- padding-area
内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-bottom、padding-left、padding-right 和简写属性 padding 控制
- tips : 为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素默认内外边距清除
*{
padding: 0;
margin: 0;
}
- content-area
内容区域 content-area，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度(或称 content-box 宽度)和内容高度(或称 content-box 高度)。它通常含有一个背景颜色(默认颜色为透明)或背景图像。
- margin(外边距)的合并现象(合并现象仅限上下margin)
外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。如果设置了属性 display: inline-block;,那么margin则会分开计算不会合并
- 两个元素是兄弟关系
解决方法：尽量只给一个盒子margin值
- 两个元素是父子关系(塌陷) 如果子元素的值大于父元素时，它会带着父元素一起偏移
解决方法：
(1)给父元素加上边框
(2)给父元素加上内边距
(3)给父元素加上overflow: hidden;
2.盒模型布局的稳定性
优先使用宽度(width),其次使用内边距(padding),最后使用外边距(margin)
