CSS盒子模型和BFC

CSS盒子模型基本概念: 标准模型+IE模型

标准模型+IE模型区别
1.计算高度，宽度的不同
2.具体如图

标准盒子模型

标准盒子模型: width = content

IE盒子模型

IE盒子模型: width = content + padding-left + padding-right + border-left + border-right

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/top/left (绝对定位的left/top/right/botton)

5.实例题(根据盒模型解释边距重叠)

6.BFC(边距重叠解决方案):
6.1基本概念：块级格式化上下文 block formatting context
初衷：为了让元素本身(包括它的子元素)能够正确的计算子集的宽高
6.2原理：BFC渲染规则
1.BFC垂直方向边距重叠
2.BFC元素不会与浮动元素box区域重叠(用来清除浮动和布局)
3.BFC在页面是一个独立的容器，外面元素不影响里面元素，里面也不会
4.计算BFC高度，浮动元素也会参与计算
6.3如何创建BFC
float:不为none
position:不是static,relative
display:table table-cell
overflow:hidden auto，不是visible
zoom:1 IE的
6.4使用场景

IFC:内链元素格式化上下文