题目：谈谈你对CSS盒模型的理解
基本概念：标准模型和IE模型
微信图片_20181126172514.png
微信图片_20181126174908.png
标准模型和IE模型的区别：计算宽高的方式不同
- 标准模型：content
- IE模型：content + border + padding
CSS如何设置这两种模型：box-sizing
- 标准模型（浏览器默认）：box-sizing:content-box
- IE模型：box-sizing:border-box
js如何获取盒模型对于的宽和高
- dom.style.width/height // 仅适用于内联样式，也就是说嵌入样式和外联样式是不适用的
- dom.currentStyle.width/height // 仅IE浏览器支持，兼容性较差
- window.getComputedStyle(dom).width/height // Chorme和Firefox都支持，兼容性较好
- dom.getBoundingClientRect().width/height
BFC (Block Fromatting Context)
基本概念，什么是BFC
BFC的意思是块级格式化上下文 (Block Fromatting Context)
BFC的原理(渲染规则)
- BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之里面的元素也不会影响外面的元素
- BFC元素的区域，不会与浮动元素的box重叠
- 计算BFC高度的时候，浮动元素也会参与计算
如何创建BFC
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC的使用场景
- 第一个使用场景：解决垂直方向边距重叠问题
先来看问题，从显示结果上可以看到，第一个p元素和第二个p元素之间，还有第二个p元素和第三个p元素之间，边距已经发生了重叠。彼此之间的间距是20px，而不是相加之后的30px。
- 【问题】html
<section id="margin">
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
</section>
- 【问题】css
#margin{
background-color: pink;
overflow: auto;
}
#margin p{
margin: 10px auto 20px;
background-color: red;
}
-
【问题】显示结果
微信图片_20181126233755.png
如果不想让第二个p元素的边距与上下相邻的元素发生重叠，该怎么做呢？其实，只需要为第二个p元素添加一个BFC的父元素就可以了。
我们来看下面的修改方案，从显示结果可以看到，三个p元素之间的间距已经变成30px了，也就是说，第二个p元素的边距已经不再与相邻的元素重合了。这是因为第二个p元素所在的父元素，是一个BFC元素(overflow: auto)，它是一个独立的容器，高度包括子元素（也就是第二个p元素）的边距，且不受到外界其他元素的影响。
- 【方案】html（为第二个p元素添加了BFC父元素）
<section id="margin">
<p>第一个p元素</p>
<div style="overflow:hidden">
<p>第二个p元素</p>
</div>
<p>第三个p元素</p>
</section>
- 【方案】css（没有变化）
#margin{
background-color: pink;
overflow: auto;
}
#margin p{
margin: 10px auto 20px;
background-color: red;
}
-
【方案】显示结果
微信图片_20181126235108.png
- 第二个使用场景：使BFC不与float重叠
先来看问题，从显示结果上可以看到，左边的元素是浮动的，而右边的元素由于比左边的高一点点（10px），那些多出来的部分会包裹在左边元素的下面。这个现象是左边元素的浮动属性造成的，浮动元素会脱离文档流。
- 【问题】html
<section id="layout">
<div class="left">left</div>
<div class="right">right</div>
</section>
- 【问题】css
#layout{
background-color: pink;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
#layout .right{
height: 110px;
background-color: yellow;
}
-
【问题】显示结果
微信图片_20181127001607.png
这显然不是我们想要的布局效果，怎样才能让右边元素自然的显示为一个方块呢？答案是，只要设置右边元素设为BFC元素就可以了。
我们来看下面的修改方案，从显示结果可以看到，右边元素的样式就比较舒服了，是我们想要的效果。这是因为右边元素被设置为BFC元素(overflow: hidden)之后，就不会再与浮动元素的box重叠了。
- 【方案】html（没有变化）
<section id="layout">
<div class="left">left</div>
<div class="right">right</div>
</section>
- 【方案】css（右边元素添加了overflow: hidden）
#layout{
background-color: pink;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
#layout .right{
height: 110px;
background-color: yellow;
overflow: hidden; /* 增加了这个属性*/
}
-
【方案】显示结果
微信图片_20181127003837.png
- 第三个使用场景：计算浮动元素的高度，清除浮动
先来看问题，从显示结果上可以看到，父元素的背景颜色并没有显示，这是因为父元素的高度为0。而高度为0的原因，是因为子元素是浮动的，所以父元素在计算高度的时候，并没有把这个浮动的子元素高度计算进去，导致父元素本身的高度为0。
- 【问题】html
<section id="float">
<div class="float">我是浮动元素</div>
</section>
- 【问题】css
#float{
background-color: pink;
}
#float .float{
float: left;
font-size: 30px;
}
-
【问题】显示结果
微信图片_20181127085054.png
我们来看下面的修改方案，可以看到父元素的背景颜色已经显示出来了。
其实这就是清除浮动背后的原理，设置父元素为BFC元素。
- 【方案】html（没有变化）
<section id="float">
<div class="float">我是浮动元素</div>
</section>
- 【方案】css
#float{
background-color: pink;
overflow: hidden; /* 增加了这个属性*/
}
#float .float{
float: left;
font-size: 30px;
}
-
【方案】显示结果
微信图片_20181127085535.png
网友评论