盒模式有两种：标准模型与IE模型
两种模型对比：标准模型的宽高只是内容得宽高，而IE模型的宽高是内容+填充+边框的宽高。
CSS设置模型：
<!--标准模型-->
box-sizing:content-box;
<!--IE模型-->
box-sizing:border-box;如何获取宽高
通过JS获取盒模式对应的宽和高，有以下几种方法：
1、dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。
2、dom.currentStyle.width/height
这种方式获取的是页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。
但这种方式只有IE浏览器支持。
3、window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
4、dom.getBoundingClientRect().width/height
这种方式是根据元素在视窗中的绝对位置来获取宽高的
5、dom.offsetWidth/offsetHeight
这个就没什么好说的了，最常用的，也是兼容最好的。
边距重叠解决方案（BFC）
首先什么是边距重叠：边距重叠式是指，当子元素设置了margin-top值的时候，可以看出父元素也一起有了边距。
BFC：Block Formatting Context直译为“块级格式化上下文”
BFC的原理
1、内部的box会在垂直方向，一个接一个的放置
2、每个元素的margin box的左边，与包含块border box 的左边相接触（对于从左往右的格式化，否则相反）
3、box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box
4、bfc的区域不会与浮动区域的box重叠
5、bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来里面的也不会影响外面的。
6、计算bfc高度的时候，浮动元素也会参与计算
怎么去创建bfc
1.float属性不为none(脱离文档流)
2.position为absolute或fixed
3.display为inline-block，table-cell, table-caption, inline-flex
4.overflow不为visible
5.根元素
应用场景
1.利用BFC阻止文本换行
2.清除内部浮动，容纳浮动元素
3.放置垂直margin重叠
重叠案例
看下例1.2中（利用BFC容纳浮动元素）：
有时候，确切的说大部分，文本会环绕浮动元素（如图Figure1），但是却不是我们想要的，我们想要Figure2
其实，在Figure1中，整个p元素实际上是处于上图中的黑色区域，p元素没有移动是因为它在浮动元素的下方，但实际上p作为块级元素（相对于行内文本）却发生了移动，因为要给float“腾”位置，而随着文本的增加，文本高度超过浮动元素的部分则不会在水平方向上收缩内部距离，因此看起来像是环绕。
要想实现图二，我们只需要为p建立BFC即可。
看下例1.2中（利用BFC容纳浮动元素）：
我们经常遇到一个容器中有浮动元素，但是这个容器的高度确是0；
HTML:
<div class="container">
<div>sibling</div>
<div>sibling</div>
</div>CSS:
.container{
background-color: green;
}
.container div{
background-color: lightgreen;
float:left;
margin: 10px;
padding: 0 50px;
}浏览器显示：
针对上面的情形，container是不会有高度的，因为它包含了浮动元素。利用一个伪元素可以实现clear fix；但是利用BFC，可以更好地解决这个问题。因为它能够容纳浮动元素。我们让container形成BFC规则，如下所示：
.container{
overflow: hidden; /*create block formatting context*/
background-color: green;
}
.container div{
float: left;
background-color: lightgreen;
margin: 10px;
padding: 10px 50px;
}浏览器显示如下：
看下例1.3中（放置垂直margin重叠）：
<!DOCTYPE html>
<html>
<head>
<title>BFC</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0
}
.top{
margin-bottom: 30px;
background-color: #0ff;
height: 300px;
}
.bottom{
height: 100px;
margin-top: 50px;
background-color: #ddd;
}
</style>
<body>
<section class="top">
<h1>上</h1>
margin-bottom:30px
</section>
<!-- 给下面这个块添加一个父元素，在父元素上创建bfc-->
<div style="overflow: hidden;">
<section class="bottom">
<h1>下</h1>
margin-top:50px
</section>
</div>
</body>
</html>浏览器显示效果
看上例中，如果把html的body部分改为下面：
<body>
<section class="top">
<h1>上</h1>
margin-bottom:30px
</section>
<section class="bottom">
<h1>下</h1>
margin-top:50px
</section>
</body>浏览器显示效果为：
总结：只有当元素在同一个BFC中，垂直方向上的margin才会坍塌（只取一个大的margin值）；如果他们不属于同一个BFC，则不会有margin 坍塌。
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
