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

想学习更多前段知识？苦于没有人教？这都不是事！加入咱们的前段交流扣扣群，解决你的一切疑惑，群好：791038323

盒模型是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。

学习更多的知识，欢迎加入咋们的扣扣群哈，群豪：791038323

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的解释。

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

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

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

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

<style type="text/css"> 

 html *{

 padding: 0;

 margin: 0; 

 }

 #father { 

 background: green;

 }

 #son { 

 height: 100px; 

 background: pink;

 margin-top:10px;

 } 

</style> 

<section id="father">

   <article id="son">

     <p>我是子元素</p> 

     <p>我是子元素</p> 

     <p>我是子元素</p> 

   </article> 

</section> 

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

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

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

#father { 

    background: green; 

    overflow: hidden; 

 }

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

原理：给父元素添加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.清除浮动

  扫码进群更方便哦。

好啦，此次就讲这么多吧！想要学习的话欢迎进群哦！

你能够中止学习，但你的竞争对手不会。