前端面试总结（CSS篇）- 1

阐述一下盒子模型以及它有什么特殊的应用，BFC是什么？

这是一道大厂百分百会考的题目，毕竟css的知识点多而杂，就盒子模型比较系统一点，适合当考题。

盒子模型

1. 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
2. CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
3. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Box Model 是 CSS 布局的对象和基本单位，页面就是由这一个个盒子所构成的。

属性与特点

• 盒子实际宽度（高度） = 内容（content）+ 边框（border）+ 间隙（padding）+ 间隔（margin）。

• 外边距（margin）折叠：在常规流布局时，盒子都是垂直排列（在未改变div的属性前都是占一行的），两者之间的间距由各自的外边距所决定（一般取最大），但不是二者外边距之和。

• 浏览器的兼容性问题：
  根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
  （同时IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。）

根据上面的提到的属性跟特点，我们会引发两个问题：

1. 当我们为盒子设置width的时候（排除IE），实际上盒子的大小并不是你预想设置的那样，因为还要加上margin，padding，border，这样我们设计宽度的时候就有些麻烦了。
2. 当两个盒子的都设定了 margin:10px; 就会出现下面的情况，两个盒子中间只有 10px 而不是 20px 。

我们先看第一个问题，为了方便我们设计盒子的宽度 W3C 为了我们提供了： box-sizing 的属性。

也就是说当我们设置盒子样式为：box-sizing: border-box时就可以解决这一问题，细心的你不知道有没有发现，这里还是没有把外边距（margin）包含在里面，这里是有两点原因：

1. margin在W3C定义为透明的背景边框；
2. 它不适合做其他调整，不符合其身份定义；

对于第二问题，这就要引入大名鼎鼎的BFC了。

BFC

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC，块级格式化上下文 (Block Fromatting Context)。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

根据自身的需要确定如何创建BFC环境，那我们试着解决第二个问题。

// 产生外边距折叠的css
.container {
  background-color: red;
}
p {
  background-color: lightgreen;
  margin: 10px 0;
}

// 产生外边距折叠的dom结构
<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
</div>

只要我们为 Sibling 2 创建BFC就可以解决这个问题了，下面上代码

.container {
    background-color: red;
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  
}

<div class="container">
    <p>Sibling 1</p>
    <div class="newBFC">
        <p>Sibling 2</p>
    </div>
</div>

拓展

BFC 除了解决外边距折叠外还有什么作用呢？相信大家都遇到过这样的情况，当父元素没有设置高度，里面的子元素为绝对定位即脱离文档流时，父元素将不会被撑开。

<div class="container">
    <div>Sibling</div>
    <div>Sibling</div>
</div>

.container {
  /* 放开下面代码后，形成BFC解决问题 */ 
  /* overflow: hidden; */
  background-color: green;
}
.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}

以上就为盒子模型的全部，感谢这篇博客的资料提供《什么是BFC》。