前端面试题（2）——CSS盒模型

---

题目：谈谈你对CSS盒模型的理解

1. 基本概念：标准模型+IE模型
2. 标准模型和IE模型的区别
3. CSS如何设置这两种模型
4. JS如何设置获取盒模型对应的宽和高
5. 实例题（根据盒模型解释边距重叠）
6. BFC（边距重叠解决方案）/IFC

一、基本概念

CSS盒模型：内容(content)、填充(padding)、边框(border)、边界(margin)

二、标准模型和IE模型的区别

1. 标准模型：宽高都指content，不包括padding和border；

   
   标准模型.jpg

2. IE模型：宽高是指content+padding+border的总的宽高；

   
   IE模型.jpg

三、CSS如何设置这两种模型

1. 设置标准盒模型(<font color='#f00'>浏览器默认</font>)：box-sizing:content-box;;
2. 设置IE盒模型：box-sizing:border-box;;

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

1. dom.style.width/height(只能取出内联样式的宽和高);
2. dom.currentStyle.width/height(三种设置方式设置的宽高都可以取到，但是只支持IE浏览器)；
3. window.getComputedStyle(dom).idth/height(三种设置方式设置的宽高都可以取到，兼容firefox和chrome,相比上一种通用性更好一些)
4. dom.getBoundingClientRect().width/height(适用场所：计算一个元素的绝对位置，相对于视窗viewport的左顶点的绝对位置，dom.getBoundingClientRect()方法可以拿到四个元素，分别是top/left/width/height);

五、实例题（根据盒模型解释边距重叠）

1. 父子元素：子元素的height=100px；marign-top=10px；请问父元素的高度是？

• 下面的代码片段显示子元素和父元素的高度都是100px；
• 若给父元素加上overflow:hidden;（BFC），则子元素的高度为100不变，父元素的高度为110px;

  <section id="sec">
      <style>
          * {
              margin: 0;
              padding: 0;
          }
          
          #sec {
              background: #f00;
          }
          
          .child {
              height: 100px;
              margin-top: 10px;
              background: yellow;
          }
      </style>
      <article class="child"></article>
  </section>
  

2. 兄弟元素：若为上下分布，则大的margin兼容小的margin；若为左右分布，则相加；

   • 上下分布: 以下代码片段中，elderBrother和youngerBrother之间的上下间距是30px；

   <section id="sect">
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           
           #sect article {
               height: 200px;
           }
           
           .elderBrother {
               margin-bottom: 30px;
               background: #f00;
           }
           
           .youngerBrother {
               margin-top: 10px;
               background: yellow;
           }
       </style>
       <article class="elderBrother"></article>
       <article class="youngerBrother"></article>
   </section>
   

   • 左右分布：以下代码片段中，elderBrother和youngerBrother之间的左右间距是40px；

   <section id="sect">
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           
           #sect article {
               height: 100px;
               width: 300px;
               display: inline-block;
           }
           
           .elderBrother {
               margin-bottom: 30px;
               background: #f00;
           }
           
           .youngerBrother {
               margin-top: 10px;
               background: yellow;
           }
       </style>
       <article class="elderBrother"></article>
       <article class="youngerBrother"></article>
   </section>
   

六、BFC（边距重叠解决方案）

1. BFC的基本概念：块级格式化上下文；IFC的基本概念：内联元素格式化上下文；
2. BFC的原理（BFC的渲染规则）：
   • 在BFC这个元素的垂直方向上的边距重叠；
   • BFC的区域不会和浮动元素的box重叠（用来清除浮动和做布局）；
   • BFC在页面上是一个独立的容器，它外面的元素不会影响它里面的元素，它里面的元素也不会影响它外面的元素；
   • 计算BFC高度的时候，浮动元素也会参与计算；
3. 如何创建BFC？
   • float的值不是none的时候；
   • position的值不是static/relative的时候；
   • display的值是table相关的值的时候；
   • overflow的值不是visible的时候；
4. BFC的使用场景
   • BFC垂直方向边距重叠的问题；
   • BFC不与float重叠；
   • 清除浮动；