面试题：盒模型和BFC

什么是盒子模型？

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

标准模式下：一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异模式下：一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

标准和怪异模型的转换

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

 

BFC

BFC的基本概念: BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理:

1. BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2. BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3. BFC的区域不会与float box重叠。
4. 计算BFC的高度时，浮动元素也被计算在内。

BFC如何产生:

在box属性值为这些的情况下，都会让所属的box产生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

BFC的使用场景

1. 可以用来自适应布局

2. 可以清除浮动：

3. 解决垂直边距重叠：