题目：谈谈对css盒模型的基本认识
- 基本概念：标准模型+IE模型
- 标准模型和IE模型的区别
（计算宽度和高度的不同） - css如何设置这两种模型
- js如何设置获取盒模型对应的宽和高
- 实例题（根据盒模型解释边距重叠）
-
BFC（边距重叠解决方案）
css如何设置这两种模型？
box-sizing：content-box（标准模型，也是浏览器默认模型）
box-sizing：border-box（ie模型）
js如何设置获取盒模型对应的宽和高？
dom.style.width/height（只能获取内联属性的值）
内联样式：直接在标签内写样式style=""
dom.currentStyle,width/height (只要是浏览器渲染出来的dom都能获取到，但是只有ie支持）
window.getComputedStyle(dom).width/height(兼容性更好，通用）
一个div中嵌套了一个div，子元素高为100px，子元素与父元素上边距为10px，问父元素高为多少，是110px还是100px？
答案：100px或者110px都对，要看父元素的盒模型怎么设置。
父元素设置了overflow：hidden时，高度为110px，没有设置的时候为100px。
<style type="text/css">
.child{
width: 300px;
height: 300px;
margin-top: 20px;
background: #0000FF;
}
.parent{
background: #FF0000;
width: 300px;
/* overflow: hidden; */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style type="text/css">
.child{
width: 300px;
height: 300px;
margin-top: 20px;
background: #0000FF;
}
.parent{
background: #FF0000;
width: 300px;
overflow: hidden;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
补充知识（边距重叠）
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
两个或多个块级盒子的垂直相邻边界会重合，它们的边界宽度是相邻边界宽度中的最大值。注意水平边界是不会重合的。
①父子元素的边界重叠
- 上面例子中一开始时父元素的高度不是110px，而是100px，在这里发生了高度坍塌。原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。也就是说，子元素的外边距变成了父元素的外边距，父元素在进行高度计算时不会对子元素的边距进行计算。
②兄弟元素的边界重叠
<style>
#margin {
background: #E7A1C5;
overflow: hidden;
width: 300px;
}
#margin>p {
background: #C8CDF5;
margin: 20px auto 30px;
}
</style>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
可以看到1和2,2和3之间的间距不是50px，发生了边距重叠是取了它们之间的最大值30px。
③空元素的边界重叠
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
bfc（边距重叠解决方案）
- 基本概念（块级格式上下文）
- 原理（渲染规则）
① bfc里的元素垂直方向上的边距会发生边距重叠
②bfc区域不会与浮动元素发生重叠
③ bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素不会影响外面的元素
④ 计算bfc高度的时候，浮动元素也会参与计算 - 如何创建bfc
①float值不为none
②position的值不为static/relative
③display为inline-box/table/table-cell
④overflow：auto/hidden - bfc的使用场景
①清除浮动（解决父元素高度坍塌，使父元素计算高度时也将浮动元素高度计算进去）
②BFC垂直方向边距重叠
解决方法：给其中一个元素再添加一个父元素，给父元素触发bfc
③布局，左边固定，右边自适应（bfc元素不与浮动元素重叠）
