Css盒模型以及Bfc的应用场景

CSS盒模型：

一 基本概念：

分为标准模型+IE模型。

---

二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒模型。

1.标准的：box-sizing：content-box;(浏览器默认的) 2.IE的 box-sizing:border-box;

---

三 JS如何设置获取盒模型对应的宽高。

1.Dom.style.width/height(只能取内联样式的宽和高。   style标签内的写法，以及外联的都取不到。)

2.Dom.currentStyle.width/height;(三种样式都支持，是拿到渲染以后的宽和高，相对准确，但是只能用于IE浏览器。)

3.Window.getComputentdStyle(dom).width/height;通用性更好。推荐

4.Dom.getBouningClientRect().width/height;能拿到元素真实的宽和高。 应用场景，计算元素的 绝对位置 根据视窗view port 可以拿到四个元素，left top width height;

 实例（根据盒模型解释边距重叠）

四 BFC（边距重叠解决方案）

基本概念：块级作用域格式化上下文。

---

五 原理（渲染规则）：

1.bfc这个元素垂直方向的边距会发生重叠。

2. bfc的区域不会与浮动的box区域重叠。（清除浮动 ）

3. Bfc在页面上是一个独立的容器，外边的元素不会影响里面的的元素，相反也一样。

4. 计算bfc高度，浮动的高度也会参与计算。

---

六 如何创建BFC：哪些css的写法能创建bfc？

1.overflow：hidden auto；

2.float值不为none;

3.只要position:的值不是static或者是relitive那就是创建了一个bfc; 

4.display属性inline-box  table相关的属性也是创建一个bfc；

---

七 BFC的使用场景有哪些？

Bfc不与float重叠。 float影响了普通文档流生成的高度（清除浮动）BFC子元素即使是float也会参与计算;