盒模型相关

标准模型和IE模型的区别

区别在于计算宽度和高度的不同

标准盒模型：盒子总宽度/高度 =width/height + padding + border + margin。（ 即 width/height 只是 内容高度，不包含 padding 和 border 值 ）

IE盒子模型：盒子总宽度/高度 =width/height + margin = (内容区宽度/高度 + padding + border) + margin。（ 即 width/height 包含了 padding 和 border 值 ）

CSS如何设置这两种模型

标准：box-sizing: content-box;( 浏览器默认设置 )

IE：box-sizing: border-box;

BFC布局

BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。

父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。

BFC原理（渲染规则|布局规则）：

（1）内部的Box会在垂直方向，从顶部开始一个接着一个地放置；

（2）Box垂直方向的距离由margin(外边距)决定，属于同一个BFC的两个相邻Box的margin会发生重叠；

（3）每个元素的margin Box的左边， 与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；

（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置float；

（5）BFC 的区域不会与float Box重叠（清浮动）;

（6）计算BFC的高度时，浮动元素也参与计算。