一、基本概念
盒子模型就是网页布局中的一种手段，包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。
要点：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
.parent {
width: 400px;
height: 400px;
background: #ccc;
}
.child1, .child2 {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid #000;
background: #f00;
}
二、盒模型的两种标准
要点：
- 标准模型中盒模型的宽高只是内容（content）的宽高
- IE模型中盒模型的宽高是内容（content）+填充（padding）+边框（border）的总宽高
三、CSS3 box-sizing 属性
box-sizing 是用于告诉浏览器如何计算一个元素的总宽度和总高度
- 标准盒模型 box-sizing: content-box
<p> width = content width</p>
<p> height = content height</p>
-
IE盒模型 box-sizing: border-box
<p> width = border + padding + content width</p>
<p> height = border + padding + content height</p>
<div class="parent">
<div class="child1 content-box"></div>
<div class="child2 border-box"></div>
</div>
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
四、margin折叠问题
css2.1盒子模型中规定：
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
产生折叠的必备条件：margin必须是邻接的!
解决嵌套元素产生折叠问题的方法：
- 给父元素设置padding
- 给父元素设置透明border
.parent {
/* padding-top:1px; */
border: 1px solid rgba(0,0,0,0);
width: 400px;
height: 400px;
background: #ccc;
}
五、什么是BFC
1、BFC 定义
BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level Box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
Box：css布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
Box盒子的类型：
- block-level box : display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
- inline-level box : display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
2、如何创建BFC
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
3、BFC的布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
4、BFC的应用场景
（1）利用BFC避免margin重叠
- 解决嵌套元素margin重叠，父元素可选择添加以下样式之一
padding-top:1px;
border: 1px solid rgba(0,0,0,0);
display: inline-block;
display: table;
display: table-caption;
display: flex;
display: inline-flex;
float: left;
position: absolute;
overflow:hidden;
- 解决同级相邻元素margin重叠，任意相邻元素可选择添加以下样式之一
display:inline-block;
display:table-caption;
display:inline-flex;
（2）自适应两栏布局
- 要点：BFC的区域不会与float box重叠
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
.left {
float: left;
width: 200px;
height: 150px;
line-height: 150px;
text-align: center;
font-size: 40px;
background: #00f;
}
.right {
overflow: hidden;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 40px;
background: #f00;
}
（3）清除浮动
- 当我们不给父节点设置高度，同时给子节点设置了浮动的时候，就会发生高度塌陷，这个时候我们就要清除浮动
- 要点：计算BFC的高度时，浮动元素也参与计算
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
overflow: hidden;
width: 300px;
border: 5px solid #f00;
}
.child {
float: left;
width:100px;
height: 100px;
border: 5px solid #00f;
}
