CSS 盒模型

基础盒模型定义

当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

三维图：

基础盒模型的 width 就是 content width,即内容的宽度

IE盒子模型

所谓IE盒子模型，就是之前IE浏览器实现的一种怪异的盒子模型

IE盒子模型的 width 就是 border width。是内容宽度 content width 、padding width 、border width 这三者的和。

margin 合并

盒模型有设置 margin的，父子元素的 margin 会合并， 兄弟元素的 margin 会合并。

取消父子元素 margin 合并，可以在父元素 设置 padding 、border、 overflow: hidden

取消兄弟元素 margin 合并，可以将兄弟元素设置为 display: inline-block; width: 100%