CSS相关 | 面试高频问题（三）| 盒模型、BFC、IFC、margin塌陷、flex、grid

CSS面试高频问题（一）
CSS面试高频问题（二）

---

4.盒子模型和box-sizing（★★★★★）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

分类：
标准盒子模型（W3C)、怪异盒子模型（IE6）
1.标准盒子模型（W3C）： 元素width=content，
盒子宽度=width+padding+border+margin
2.怪异盒子模型（IE6）： 元素width=左右border+左右padding+content
盒子宽度=width+margin

CSS3引入新属性：
box-sizing：border-box、content-box、inherit：指定box-sizing属性的值，应该从父元素继承

区别是box的width计算方式不同：content+border+padding、content
content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
border-box:此值让元素维持IE传统的Box Model（IE6以下版本）
box-sizing现代浏览器都支持，但IE家族只有IE8版本以上才支持，虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀

box-sizing主要运用在哪些方面呢
第一点就是我们布局上，第二点就是表单元素上。

1. 我想大家在平时布局中都有碰到当两个块元素的宽度刚好是其父元素总宽度时我们布局不会有任何问题，但当你在其中一个块加上padding或border时（哪怕是1px）整个布局就会完全打乱，因为其总宽度超过了父元素的宽度。这种情况其Box Model完全符合W3C的标准，为了修复这样的布局，我们需要把Box Model改用IE传统下的解析，给他加上box-sizing属性，就能拯救这个局面。
2. 第二点表单元素，不同的表单元素在不同的浏览器上的大小是很难控制的。在不同的浏览器都有不同的border和padding，这个时候可以用border-box统一样式是特别方便的！

5.BFC、IFC

BFC
参考

概念：
即 Block Formatting Contexts (块级格式化上下文)，它属于定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性：

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值(hidden、auto、scroll)

BFC 特性及应用

1. 同一个 BFC 下外边距会发生折叠（Margin塌陷（重叠））首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
2. BFC 可以包含浮动的元素（清除浮动） 由于容器内元素浮动，脱离了文档流，如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
3. BFC 可以阻止元素被浮动元素覆盖
4. 第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden.

BFC可用于实现两栏自适用布局，非常好用。其中利用overflow来触发BFC更是经常看到，屡试不爽。
(1)为什么overflow:hidden可以起到清除浮动的效果？因为触发了新的BFC区域，和其他的BFC隔离开，各自对自己包裹的对象进行定位，也能包含浮动元素。(2)两列自适应布局

IFC

Inline Formatting Contexts，也就是“内联格式化上下文”。
符合以下条件即会生成一个IFC : 块级元素中仅包含内联级别元素

IFC布局规则

• 子元素水平方向横向排列，并且垂直方向起点为元素顶部。
• 子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
• 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
• 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
• IFC中的“line box”一般左右边贴紧其包含块，float元素会优先排列。
• IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
• 当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
  
• 当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

6.margin塌陷（重叠）（★★★）

1、什么是Margin塌陷（重叠） ？
在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。

2、Margin塌陷现象何时产生？ margin的塌陷现象分两种情况：1，兄弟关系的盒子 2 ，父子关系的盒子
注：两个盒子的垂直外边距完全接触才会触发。

3.现象实例
（1）兄弟关系盒子垂直并列（少见）
垂直之间塌陷的原则是以两盒子最大的外边距为准。
（2）父子关系盒子（常见）
无论给子元素设不设置margin-top值，其都不发生作用，都会作用于父元素身上。
解决方法 ：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合；
（2）为父盒子设定padding值，抵消掉子元素设置margin值的方式；
（3）为父盒子添加overflow：hidden；
（4）为父盒子添加position：fixed；
（5）为父盒子添加 display：table；
（6）利用伪元素给子元素的前面添加一个空元素。

7.flex、grid布局（★★★★★）

flex布局：


grid布局：

参考

三栏布局方式：（5种）