这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战
css盒模型
就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
box-sizing(有3个值哦)：border-box,padding-box,content-box.
标准盒子模型：
IE盒子模型：
区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：width
IE盒子模型的盒子宽度：左右border+左右padding+width
在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型 box-sizing属性的三个值 ：
- content-box： 默认值，border和padding不算到width范围内，采用标准模式解析计算，是W3c的标准模型(default)
- border-box：border和padding划归到width范围内，采用怪异模式解析计算，是IE的怪异盒模型
- padding-box：将padding算入width范围
最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width 也很好理解性记忆，包含什么，width就从什么开始算起。
BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）
块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
那些元素会生成BFC：
根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素 这里可以参考我的文章BFC
垂直居中的方法
- margin:auto法
css:
div{
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
html:
<div>
<img src="mm.jpg">
</div>
定位为上下左右为0，margin：0可以实现脱离文档流的居中.
- margin负值法
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; height的一半
margin-left: -240px; width的一半
补充：其实这里也可以将marin-top和margin-left负值替换成， transform：translateX(-50%)和transform：translateY(-50%)
- table-cell（未脱离文档流的）
设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。
div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}
- 利用flex
将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
