css 盒模型

概念

css盒模型 又称框模型 (Box Model) ，由里向外包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

1. 标准模型

   
   
   biaozhun.png

2. 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的原理

1. 内部的box会在垂直方向，一个接一个的放置
2. 每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）
3. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
4. bfc的区域不会与浮动区域的box重叠
5. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
6. 计算bfc高度的时候，浮动元素也会参与计算

创建BFC

1. float属性不为none（脱离文档流）
2. position为absolute或fixed
3. display为inline-block,table-cell,table-caption,flex,inine-flex
4. overflow不为visible
5. 根元素

应用场景

1. 自适应两栏布局
2. 清除浮动 (在父元素上面设置bfc)
3. 防止垂直margin重叠