共计 1865 个字符，预计需要花费 5 分钟才能阅读完成。
css 盒模型概念
css 盒子模型又称框模型 (Box Model)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
图中 element 元素是实际内容，也就是元素框，紧挨着元素框外部的是内边距 padding，其次是边框（border），然后最外层是外边距（margin），整个构成了盒子模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距 margin 是透明的，不会遮挡周边的其他元素。那么：
总宽度 = 元素（element）的 width + padding 的左边距和右边距的值 + border 的左右宽度 + margin 的左边距和右边距的值；
总高度 = 元素（element）的 height + padding 的上下边距的值 + border 的上下宽度 + margin 的上下边距的值。
css 外边距合并 (叠加)
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.top{
width:400px;
background: #0ff;
height:100px;
margin:30px 30px;
}
.bottom{
width:400px;
height:100px;
margin:50px 30px;
background: #ddd;
}
</style>
</head>
<body>
<section class=”top”>
<h1> 上 </h1>
margin-bottom:30px;
</section>
<section class=”bottom”>
<h1> 下 </h1>
margin-top:50px;
</section>
</body>
</html>
需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。
边距合并解决方案 (BFC)
BFC 其英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
元素产生 BFC 的条件
float 属性不为 none（脱离文档流）
position 为 absolute 或 fixed
display 为 inline-block,table-cell,table-caption,flex,inine-flex
overflow 不为 visible
BFC 元素所具有的特性
在 BFC 中，盒子从顶端开始垂直地一个接一个地排列。
盒子垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子垂直方向的 margin 会发生重叠。
在 BFC 中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left），对于从右往左的格式来说，会触碰到右边缘。
BFC 不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
计算 BFC 高度 BFC 时，自然也会检测浮动的子盒子高度。
应用场景
自适应两栏布局
清除内部浮动
防止垂直 margin 重叠
上面边距合并例子调整：
<section class=”top”>
<h1> 上 </h1>
margin-bottom:30px;
</section>
<!– 给下面这个块添加一个父元素，在父元素上创建 bfc –>
<div style=”overflow:hidden”>
<section class=”bottom”>
<h1> 下 </h1>
margin-top:50px;
</section>
</div>
关于 bfc 的应用的案例这里就不在一一举出了，大家去网上找一些其他的文章看一下。
box-sizing 属性介绍
box-sizing : content-box|border-box|inherit
content-box(标准盒子), 默认值, 可以使设置的宽度和高度值应用到元素的内容框。盒子的宽高只包含内容。总宽度 =margin+border+padding+width; 总高度 =margin+border+padding+height
border-box(IE 盒子), 设置的 width 值其实是除 margin 外的 border+padding+element 的总宽度。盒子的 width 包含 border+padding+ 内容。总宽度 =margin+width; 总高度 =margin+height
inherit , 规定应从父元素继承 box-sizing 属性的值
偷两张图贴起来~
