盒子模型&BFC

盒子模型 （Box Model）

所有的HTML元素都可以看作盒子，在 CSS 中，“box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

box-sizing 属性介绍

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing: content-box | border-box | inherit

• content-box ，默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

则总宽度 = margin + border + padding + width

• border-box ，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。盒子的width包含内容、边框、内边距。

则总宽度 = margin + width

• inherit ，从父元素继承 box-sizing 属性的值

---

BFC & Margin collapse

BFC的概念

BFC全称Block Formatting Context ，直译“块级格式化上下文”，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个div内部，我们用 float 和 margin 布局元素。

BFC的触发

• float 的值不是 none。
• position 的值不是 static 或者 relative。
• display 的值是 inline-block 、table-cell 、flex 、table-caption 或者 inline-flex
• overflow 的值不是 visible

BFC的作用

• 利用BFC避免外边距折叠（margin collapse）
• 清除浮动
• 避免文字环绕
• 自适应布局

Margin collaspe

在CSS当中，相邻的两个块级元素盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

下图 margin: 10px 0;

折叠的结果

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

---