前端面试总结（CSS篇）- 1-原创手记-慕课网

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

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

盒子模型

css盒子模型

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

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

属性与特点

盒子实际宽度（高度） = 内容（content）+ 边框（border）+ 间隙（padding）+ 间隔（margin）。
外边距（margin）折叠：在常规流布局时，盒子都是垂直排列（在未改变div的属性前都是占一行的），两者之间的间距由各自的外边距所决定（一般取最大），但不是二者外边距之和。
浏览器的兼容性问题：
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
（同时IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明即可。）

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

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

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

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

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

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

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

BFC

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

序号	形成BFC条件
1	float的值不是none
2	position的值不是static或者relative
3	display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4	overflow的值不是visible

根据自身的需要确定如何创建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 除了解决外边距折叠外还有什么作用呢？相信大家都遇到过这样的情况，当父元素没有设置高度，里面的子元素为绝对定位即脱离文档流时，父元素将不会被撑开。

父元素container未撑开与撑开

<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》。