1、W3c盒子模型
可以看到W3C盒子模型包括4分：margin，border，padding，content，其中，width只含有 content不包括其他部分但是在IE盒子模型中，width包括了border和padding
2、IE盒子模型
有网友说IE5及以下版本默认是怪异模型，但是我测试的IE5确实标准盒子模型。
如何设置这两种模式
- 在网页的顶部加上 DOCTYPE 声明 ，就选择了标准模型
- css设置
标准：
box-sizing:content-box
IE：box-sizing:border-box
js如何获取盒模型对应的宽高
var sel=document.querySelector('.table')
console.log(document.defaultView.getComputedStyle(sel,null).width)//683px
console.log(window.getComputedStyle(sel,null).width)//683px
console.log(sel.getBoundingClientRect().width)//683,没有px
console.log(sel.currentStyle.width)//仅IE
console.log(sel.style.width)//仅获取内联样式
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。
console.log(sel.getBoundingClientRect())
计算盒子的高度
描述：求container盒子的高度
//html
<div class="container">
<div class="demo"></div>
</div>
//css
.demo {
height: 30px;
background: red;
margin-top: 10px;
}
答案是30px。原因，父子元素发生了外边距重叠。
发生外边距重叠的情况：
1.都属于普通流的块级盒子且参与到相同的块级格式上下文中
2.没有被padding、border、clear和line box分隔开
3. 都属于垂直毗邻盒子边缘：
- 盒子的top margin和它第一个普通流子元素的top margin
- 盒子的bottom margin和它下一个普通流兄弟的top margin
- 盒子的bottom margin和它父元素的bottom margin
- 盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素
demo1
<style>
.parent1 {
height: 20px;
background: yellow;
margin-bottom: 20px;
}
.parent2 {
margin: 20px 0 30px;
}
.parent3 {
height: 20px;
background: green;
margin-top: 20px;
}
.child {
background: red;
height: 20px;
margin: 40px 0 30px;
}
</style>
<div class="parent1"></div>
<div class="parent2">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent3"></div>
情况1，情况2：parent1和parent2之间的边距是40px。原因是：parent2和child之间的外边距重合，以绝对值大的为基准，那么20<40因此取40，同理，parent1和parent2之间的边距重合，故最终是40px
情况3：.parent2中的最后一个 .child 发生 bottom margin叠加，.parent2和 .parent3之间的边距为 30px。
demo
.demo {
height: 30px;
background: red;
}
.margin-test {
margin: 20px 0 30px;
}
<div class="container">
<div class="demo"></div>
<div class="margin-test"></div>
<div class="demo"></div>
</div>
情况4：.margin-test元素没有内容没有高度，元素自身的外边距top 和 bottom 发生折叠为30px，container高度是90px
BFC(边距重叠解决方案)
BFC 的基本概念
Block Formatting Context, 块级格式化上下文，一个独立的块级渲染区域，该区域拥有一套渲染规格来约束块级盒子的布局，且与区域外部无关。
BFC 的原理
1、 同一个BFC 区域的的内部元素的垂直边距会发生重叠
2、 不是同一个BFC区域的元素的垂直边距不发生重叠
3、 BFC 的区域不会与浮动元素的 float 重叠（float脱离文档流，其他box会侵占float原来的位置，float会在其他box的上方）
4、 独立的容器，内外元素互不影响
5、计算 BFC 高度，浮动元素也参与计算
如何创建 BFC
1、 float 不为none的时候
2、 position 不为 static 或者 relative 的时候
3、 display 与 table 相关的时候
4、 overflow 为auto, hidden 的时候
5、flex boxes (元素的display: flex或inline-flex)；
应用1：解决垂直边距重叠
<style>
html,*{
padding: 0;margin: 0;
}
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
</style>
</head>
<body>
<section id="margin">
<p>1</p>
<p>2</p>
<p>3</p>
</section>
</body>
问题：只有第1个p元素的上边距是5px，其余的都上下边距重叠为25px，而非30px。
2、 不是同一个BFC区域的元素的垂直边距不发生重叠
<style>
html,*{
padding: 0;margin: 0;
}
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
</style>
</head>
<body>
<section id="margin">
<p>1</p>
<div style="overflow: hidden; background:green">
<p>2</p>
</div>
<p>3</p>
</section>
</body>
应用2：解决侵占float区域
<style>
html,*{
padding: 0;margin: 0;
}
#layout{
background: red;
}
.left {
width: 100px;
height: 100px;
background: pink;
float:left;
}
.right{
height: 110px;
background: #ccc;
}
</style>
</head>
<body>
<section id="layout">
<div class="left"></div>
<div class="right"></div>
</section>
</body>
.left元素浮动覆盖.right元素
3、 BFC 的区域不会与浮动元素的 float 重叠（float脱离文档流，其他box会侵占float原来的位置，float会在其他box的上方）
<body>
<style>
html,*{
padding: 0;margin: 0;
}
#layout{
background: red;
}
.left {
width: 100px;
height: 100px;
background: pink;
float:left;
}
.right{
height: 110px;
background: #ccc;
/* float: left; */
overflow: auto;
width: 130px;
}
</style>
</head>
<body>
<section id="layout">
<div class="left"></div>
<div class="right"></div>
</section>
</body>
应用3：清除浮动
<section id="float">
<style media="screen">
#float{
background: red;
border:1px solid;
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
问题：浮动元素脱离了父元素，父元素塌陷。
计算 BFC 高度，浮动元素也参与计算,这也是清除浮动的原理
<!-- BFC子元素即使是float也会参与计算 -->
<section id="float">
<style media="screen">
#float{
background: red;
border:1px solid;
overflow: auto;
/*float: left;*/
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
