web前端 之 CSS盒模型

题目：谈谈你对CSS盒模型的认识

基本概念：标准模型+IE模型

盒模型包括margin、border、padding、content（由外向里）
盒模型包括标准模型和IE模型
如下图所示：（注意他们的高宽度包含的内容）

这两者的区别（计算高度和宽度的不同）

标准模型高度和宽度指的是content的高度和宽度
IE模型高度和宽度指的是content+padding+border加起来的高度和宽度

CSS如何设置这两种模型

标准模型：box-sizing: content-box
IE模型：box-sizing: border-box

JS如何设置获取盒模型对应得高和宽

（1）dom.style.width/heigt
这种方式只能获取dom元素通过内联样式所得的高宽（dom元素设置元素一般有三种方式：网节点上内嵌<内联>；html中加style节点<内联>；link引外部的样式<外联>）
（2）dom.currentStyle.width/height
这种方式获取的是页面渲染之后即时运行的结果，也就是外联/内联都可以获取，相对来说比较准确；
缺点：但是这种方式只有IE支持
（3）window.getComputedStyle(dom).width/height
原理与（2）相似，但是通用性更高，兼容性更好
（4）dom.getBoundingClientRect().width/height
根据dom元素在视窗中的绝对位置来获取高宽的
（5）dom.offsetWidth/offsetHeight
最常用的，也是兼容性最好的

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

父子元素边界重叠（父元素没有设置边距，子元素设置了边距，那么父元素也有了边距）

兄弟元素边界重叠（取两者之间的最大值作为边距）
空元素的边距（margin-top/margin-bottom取一个最大值作为边距）

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

1、BFC的基本概念
边距重叠解决方案
2、BFC的原理
（1）内部的box会在垂直方向一个接着一个放置；
（2）box垂直方向的边距由margin决定，属于同一个BFC的两个相邻box会发生重叠；
（3）计算BFC的高度时，float浮动的高度宽度会被计算进去；
（4）BFC区域不会与浮动区域发生重叠；
（5）BFC区域的元素不会影响外面的元素，同样，外面的元素也不会影响BFC里面的元素
3、如何创建BFC
（1）float不为none（脱离文档流）；
（2）position为fixed和absolute；
（3）dislapy为inline-block,table-cell,table-caption,flex,inine-flex；
（4）overflow不为visible
（5）根元素
4、BFC的使用场景
（1）分栏布局时某一个分栏文字溢出覆盖了相邻分栏的部分（对应原理（4））

效果图：
（前）

（后）

（2）解决边距重叠问题（对应原理（1）原理（2））

（3）清除内部浮动（对应原理（3））

效果图：
（前）

（后）