前端面试必备总结：CSS盒模型与BFC

你的名字 2021-12-10 06:34 315阅读 0赞

盒模型是css的基石，由什么是css盒模型一个问题引出下面一系列的问题，深度逐渐递增。

1.基本概念：标准模型+IE模型

2.标准模型和IE模型的区别

3.css如何设置这两种模型

4.JS如何设置获取盒模型对应的宽和高

5.根据盒模型解释边距重叠

6.BFC（边距重叠解决方案）

## 1.什么是css盒模型 ##

css盒模型包括标准模型和IE模型。默认是标准模型

所有的HTML元素都可以看做盒子，css盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

*  边距(margin)
 *  边框(border)
 *  填充(padding)
 *  实际内容(content)

## 2.标准模型和IE模型的区别 ##

标准模型和IE模型的区别就是高度和宽度的计算方式不同。

标准模型盒子的内容不包含其他部分，而IE模型的内容部分包含了padding和border。所以**标准模型盒子的宽度/高度指的就是content内容部分的宽度/高度，IE模型盒子的宽度/高度指的是包含width/height、padding、border的宽度/高度**。

在标准模式下的盒模型：  
盒子实际内容（content）的width/height = 设置的width/height。  
盒子总宽度/高度 = width/height+padding+border+margin。

在IE模型下：  
盒子实际内容（content）的width/height = 设置的width/height+padding+border。  
盒子总宽度/高度 = width/height+padding+border+margin。

## 3.css如何设置这两种模型 ##

设置方法如下：

/*标准模型设置*/
    box-sizing: content-box;
    /*IE模型设置*/
    box-sizing: border-box;

## 4.JS如何设置获取盒模型对应的宽和高 ##

获取宽和高有以下4钟方法:

1.  通过dom元素的stytle属性获取
    
        dom.stytle.width/height;
    
    （dom指dom节点，比如使用`getElementById()`方式取都没、节点）。
    
    **局限性：这种方法只能取出内联方式设置的宽和高！！！**
2.  通过dom元素的currentStyle属性获取
    
        dom.currentStyle.width/height;
    
    `Element.currentStyle` 是一个与 `window.getComputedStyle()`方法功能相同的属性。这个属性实现在旧版本的IE浏览器中。
    
    **局限性：这个方法只适用于IE！！！**
3.  通用
    
        window.getComputedStyle(dom).width/height;
    
    `Window.getComputedStyle()`方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
    
    **优点：该方法与上面第二个方法原理是相同的，但是兼容性比第二个方法好，Window.getComputedStyle()可以兼容Chrome、火狐等多种浏览器！！！**
4.  通过获取元素的绝对位置的方法
    
        dom.getBoundingClientRect().width/height;
    
    `Element.getBoundingClientRect()`方法返回元素的大小及其相对于视口的位置。关于返回值下面是MDN的解释。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

**面试的时候上面四种方法要能说出区别和哪种方法的通用性较好。**

## 5.根据盒模型解释边距重叠 ##

上下边距重叠时，只取较大值作为margin值，水平方向也是如此。

为了方便理解，这一部分使用代码说明。

得到的效果如下（实际父容器的背景颜色并未显示）：

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]

上图可知子元素的高度是100px，而父元素的高度是多少呢？100px？110px？答案请看下图。

![效果2][2]

为什么父元素高度是100px而不是110px呢，下面给父元素加上一个属性如下：

#father { 
    		background: green;
    		overflow: hidden;
    	}

此时父元素背景显示出来，高度也变成110px，如下：

![效果3][3]

原理：给父元素添加overflow: hidden属性实际就是给父元素创建了一个BFC，就是块级格式化上下文（下面讲）。

## 6.BFC（块级格式化上下文） ##

1.  BFC基本概念：块级格式化上下文。与BFC对应的是IFC（不常用）。
    
    BFC很常见的应用就是边距重叠解决。
2.  BFC的原理
    
    BFC的原理就是BFC的渲染规则（可以说出4点就可以）。
    
    1.BFC 内部的子元素，在垂直方向，边距会发生重叠。
    
    2.BFC的区域不会与浮动元素的box重叠，这个主要用于清除浮动带来的影响。
    
    3.BFC在页面中是一个独立的容器，外面的元素不会影响里面的元素，反过来里面的元素也不会影响外面的元素。
    
    4.计算BFC的高度时，浮动的子元素也会参与计算。
3.  如何创建BFC
    
    有如下4个方法可以创建BFC。
    
    1.float属性：float的属性值不为none。意思是，只要设置了float的值不是none，当前元素就创建了BFC。
    
    2.position属性：只要position的值不是static或者relative，那么就创建了一个BFC。比如设置`position:fixed`,`position:absolute`都是创建了BFC。
    
    3.display属性：只要display属性为`inline-block`、`table-cell`,、`table-caption`, `table`、`flex`, `inline-flex`（与table相关的那几个属性）都可以创建BFC。
    
    4.overflow属性：只要overflow属性值不为visible，都可以创建BFC，例如`overflow:auto`，`overflow:hidden`均可以创建BFC。【最为常用】
4.  BFC使用场景
    
    1.解决 margin 重叠  
    2.清除浮动

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20211209/a7e5c2da95634207b8f370af7f481b36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20211209/7d147cf4ea194d2c8324046f45f5c71c.png
[2]: /images/20211209/0a1a620b30e7471798c92ac5c6275ff4.png
[3]: /images/20211209/aacfbc4e8aa6431f9f02f1d2cf7a2a69.png