【css盒模型】深入理解 css 盒模型

基本概念：标准模型和IE模型 border margin padding content

延伸：标准模型和IE模型的区别？css如何设置这两种模型？JS如何设置获取盒模型对应的宽和高？根据盒模型解释边距重叠。BFC边距重叠解决方案？IFC？

 

标准模型和IE模型的区别：高和宽的计算方式不同，标准模型宽不包含padding和border,IE模型的宽计算padding和border。

css如何设置这两种模型：box-sizing: content-box;//标准模型（浏览器默认方式）  box-sizing: border-box;//IE模型

JS如何设置、获取盒模型对应的宽和高：

dom.style.width/dom.style.height //获取内联元素宽、高

dom.currentStyle.width/dom.currentStyle.height // 渲染后的宽高，只有IE支持

window.getComputedStyle(dom).width/window.getComputedStyle(dom).height // 通用性、兼容性较好

dom.getBoundingClientRect().width/dom.getBoundingClientRect().height //left\top\width\height 适用场景计算元素的绝对位置，viewport左上角以基点，此方法获取到四个值

根据盒模型解释边距重叠：

边距重叠有三种：父子元素边距重叠、兄弟元素边距重叠、空元素的边距重叠。重叠的原则是取最大值。

BFC（Block Formatting Context）：块级格式化上下文（边距重叠解决方案）

BFC原理（渲染规则）：

1、在BFC元素的垂直方向边距会发生重叠

2、BFC区域不会和浮动元素重叠（清除浮动-应用场景：左右栏布局）

3、BFC在页面上是个独立的容器，外边的元素不会影响里面的元素，里面的元素不会影响外面的元素

4、计算BFC高度时，浮动元素也会参与计算 //使用场景-子元素float 父元素触发 BFC 参与计算

怎么触发（创建）BFC？

1、Float值不为none

2、Position 的值不是static 或 relative

3、display为inline-block、table-cell、table、table-caption

4、overflow 不为visible

BFC使用场景

IFC（Inline Formatting Context）：内联格式化上下文

关于BFC和IFC 这里有一篇很详细的研究

https://segmentfault.com/a/1190000009545742