3-2 CSS盒模型

1、标准模型

2、IE模型

3、CSS如何设置这两个模型

box-sizing:content-box; //浏览器默认
box-sizing:border-box

4、JS如何获取盒模型对应的宽和高

dom.style.width/height //只能取到内联样式
dom.currentStyle.width/height //只有IE支持
window.getComputedStyle(dom).width/heigth //通用性更好
dom.getBoundingClientRect().width/heigth  //计算一个元素的绝对位置，根据视窗（左上角）绝对位置，拿到4个元素（top、right、bottom，left）

5、实例题

子元素高度为100px，上边距为10px，计算父元素的高度

6、BFC（边距重叠解决方案）

（1）BFC基本概念

• 块级格式化上下文

（2）BFC原理（BFC渲染规则）

• 在BFC这个元素的垂直方向的边距会发生重叠
• BFC区域不会与浮动元素的边距重叠，常用于清除浮动和布局
• BFC在页面上是一个独立的容器，外边的元素不会影响里面的元素，反之亦然
• 计算BFC高度的时候，浮动元素也会参与运算

（3）怎么样创建BFC

• float不为none
• position值不是static或者relative
• display为inline-block 或table相关的display
• overflow不为visible，等于auto、hidden

（4） 使用场景