前端面试系列：CSS盒模型
题目：谈谈你对CSS盒模型的认识
一、 基本概念
标准模型+IE模型。盒子模型包括 border、margin、padding、content。
二、 标准模型和IE模型区别
计算宽度和高度的方式不同。
- W3C盒子模型，元素的width=content的宽度，元素的height=content的高度。
- IE盒子模型，元素的width=content的宽度+padding+border，元素的height=content的高度+padding+border
三、CSS如何设置这两种模型
- box-sizing：content-box；标准模型（浏览器默认）
- box-sizing：border-box；IE模型
四、JS如何设置获取盒模型对应的宽和高
- dom.style.width/height //内联样式的宽和高
- dom.currentStyle.width/height //渲染后的元素的宽高，相对来说比较准确，仅IE支持
- window.getComputedStyle(dom).width/height //原理同上，兼容Firefox和Chrome，所有浏览器都支持
- dom.getBoundingClientRect().width/height
//dom.getBoundingClientRect() 函数返回一个Object对象，该对象有6个属性：top、lef、right、bottom、width、height
五、实例题（根据盒模型解释边距重叠）
边距重叠是指两个或多个盒子（可能相邻也可以嵌套）的相邻边界（其间没有任何非空内容、补白、边框）重合在一起而形成的一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。
边距重叠例子
- 父子元素的边界重叠
<style>
.parent {
background: #E7A1C5;
}
.parent .child {
background: #C8CDF5;
height: 100px;
margin-top: 10px;
}
</style>
<section class="parent">
<article class="child"></article>
</section>
想实现的效果
实际上的效果
在这里父元素的高度不是110px，而是100px。发生了高度坍塌。原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
-
兄弟元素的边界重叠
边距重叠取最大值
-
空元素的边界重叠
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
六、BFC（边距重叠解决方案）
1、基本概念
BFC(Block formatting context)直译为“块级格式化上下文”。
具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。通俗一点来讲，可以把BFC理解为一个封闭的箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
2、 原理/特性/渲染规则
- 处于同一个BFC中的元素相互影响。可能会发生边距重叠、边距坍塌
- BFC在页面上是一个独立的容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，浮动子元素也参与计算
- BFC的区域不会与float的元素区域重叠
拓展IFC
Inline Formatting Contexts，也就是“内联格式化上下文”。
3、如何创建BFC
- float属性不为none
- position为absolute或fixed
- display为inline-block、table、 table-cell、 table-caption、flex、 inline-flex
- overflow不为visible
4、BFC的使用场景
-
防止垂直margin重叠
1.父子元素的边界重叠时在父元素上加上overflow:hidden，使其成为BFC。
2.兄弟元素的边界重叠，在第二个子元素创建一个BFC上下文 -
清除内部浮动
父元素的高度为0，解决方案为为父元素创建BFC，这样浮动子元素的高度也会参与到父元素的高度计算。
#float {
background: #FEC68B;
overflow: hidden; /*这里也可以用float:left*/
}
-
自适应两栏布局
在这里右边的高度高于左边，可以看到左边超出的部分跑到右边去了，这是由于由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。
解决方案为给右侧元素创建一个BFC，原理是BFC不会与float元素发生重叠。
