Css盒模型以及BFC

##Css盒模型

css中所有html元素都可以看成为一个盒子，一个盒模型包括margin、border、padding、content
###分类

• 标准模型-width与height按照content宽高计算
  
• IE模型-width与height按照content+padding+border计算
  

两种模型设置方法（Css3）

box-sizing：content-box; // 标准盒模型
box-sizing：border-box;	// IE盒模型

js获取宽高

/*标签属性中的*/
dom.style.width/height
/*计算后的*/
/*标签style中(内联)+内嵌中的+外部的*/
dom.currentStyle.width/height // (仅IE支持)
window.getComputedStyle(dom).width/height(全兼容)
dom.getBoundingClientRect().width/height

---

BFC(块级格式化上下文)

边距重叠

父子元素，子元素margin，父元素高度和子元素一样

Bfc原理(规则)

• 属于同一个BFC的两个相邻Box的margin会发生重叠
• BFC的区域不会与float box重叠
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
• 计算BFC的高度时，浮动元素也参与计算

创建bfc方法

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

bfc的使应用

• 自适应两栏布局
• 清除浮动（高度塌陷）或者使用伪元素before after 中clear:both
• 防止垂直margin重叠