概念
css盒模型 又称框模型 (Box Model) ，由里向外包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
-
标准模型
biaozhun.png -
IE模型
ie.png
对比可以看出：
IE模型下面: width = content + padding + border
标准模型下: width = content
如何设置
使用css3中的box-sizing属性
box-sizing: border-box; IE模型
box-sizing: content-box; 标准模型
边距重叠(问题)
bfc.png
如上图， 下面的父元素并没有设置margin-top， 子元素设置了，但是父元素也同时margin-top了; 在日常开发中也经常遇到
BFC(块级格式化上下文)
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的原理
- 内部的box会在垂直方向，一个接一个的放置
- 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
- box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
- bfc的区域不会与浮动区域的box重叠
- bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
- 计算bfc高度的时候，浮动元素也会参与计算
创建BFC
- float属性不为none（脱离文档流）
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inine-flex
- overflow不为visible
- 根元素
应用场景
- 自适应两栏布局
- 清除浮动 (在父元素上面设置bfc)
- 防止垂直margin重叠
