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也会参与计算;
网友评论