CSS盒模型

CSS盒模型，几点注意

1. CSS盒模型是什么
   CSS盒模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素

2. 标准模型和IE模型的区别
   

3. CSS如何设置这两种模型
   *box-sizing：content-box;//标准盒子
   box-sizing: border-box;*//IE盒子

4. JS如何设置获取盒模型对应的宽和高
   dom.style.width/height 只对设置了内联样式的元素生效
   dom.currentStyle.width/height 只对IE起作用
   window.getComputedStyle(dom).width/height 通用性好
   dom.getBoundingClientRect().width/height 这个方法就是获取元素的绝对位置
   dom.offsetWidth/offsetHeight 常用 兼容最好

5. 实例题（根据盒模型解释边距重叠）
   父子元素，若子元素设置外边距而父元素没有设置，因为边距重叠，父元素也会有外边距、兄弟元素，上面的设置下外边距，下面的设置上外边距，会产生重叠，取最大的那个外边距作为外边距

6. BFC（边距重叠解决方案）
   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
   根元素

应用场景

自适应两栏布局
清除内部浮动 
防止垂直margin重叠