題目：談?wù)勀銓?duì)CSS盒模型的理解

1. 基本概念：標(biāo)準(zhǔn)模型+IE模型
2. 標(biāo)準(zhǔn)模型和IE模型的區(qū)別
3. CSS如何設(shè)置這兩種模型
4. JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高
5. 實(shí)例題（根據(jù)盒模型解釋邊距重疊）
6. BFC（邊距重疊解決方案）/IFC

一、基本概念

CSS盒模型：內(nèi)容(content)捕犬、填充(padding)、邊框(border)婉陷、邊界(margin)

二纱皆、標(biāo)準(zhǔn)模型和IE模型的區(qū)別

1. 標(biāo)準(zhǔn)模型：寬高都指content辐董，不包括padding和border雾棺；

   
   
   標(biāo)準(zhǔn)模型.jpg

2. IE模型：寬高是指content+padding+border的總的寬高柱告；

   
   
   IE模型.jpg

三、CSS如何設(shè)置這兩種模型

1. 設(shè)置標(biāo)準(zhǔn)盒模型(<font color='#f00'>瀏覽器默認(rèn)</font>)：box-sizing:content-box;;
2. 設(shè)置IE盒模型：box-sizing:border-box;;

四征椒、JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高

1. dom.style.width/height(只能取出內(nèi)聯(lián)樣式的寬和高);
2. dom.currentStyle.width/height(三種設(shè)置方式設(shè)置的寬高都可以取到娇哆，但是只支持IE瀏覽器)；
3. window.getComputedStyle(dom).idth/height(三種設(shè)置方式設(shè)置的寬高都可以取到勃救，兼容firefox和chrome,相比上一種通用性更好一些)
4. dom.getBoundingClientRect().width/height(適用場(chǎng)所：計(jì)算一個(gè)元素的絕對(duì)位置碍讨，相對(duì)于視窗viewport的左頂點(diǎn)的絕對(duì)位置，dom.getBoundingClientRect()方法可以拿到四個(gè)元素蒙秒，分別是top/left/width/height);

五勃黍、實(shí)例題（根據(jù)盒模型解釋邊距重疊）

1. 父子元素：子元素的height=100px；marign-top=10px晕讲；請(qǐng)問(wèn)父元素的高度是覆获？

• 下面的代碼片段顯示子元素和父元素的高度都是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的基本概念：塊級(jí)格式化上下文；IFC的基本概念：內(nèi)聯(lián)元素格式化上下文型雳；
2. BFC的原理（BFC的渲染規(guī)則）：
   • 在BFC這個(gè)元素的垂直方向上的邊距重疊当凡；
   • BFC的區(qū)域不會(huì)和浮動(dòng)元素的box重疊（用來(lái)清除浮動(dòng)和做布局）山害；
   • BFC在頁(yè)面上是一個(gè)獨(dú)立的容器，它外面的元素不會(huì)影響它里面的元素宁玫，它里面的元素也不會(huì)影響它外面的元素粗恢；
   • 計(jì)算BFC高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算欧瘪；
3. 如何創(chuàng)建BFC眷射？
   • float的值不是none的時(shí)候；
   • position的值不是static/relative的時(shí)候佛掖；
   • display的值是table相關(guān)的值的時(shí)候妖碉；
   • overflow的值不是visible的時(shí)候；
4. BFC的使用場(chǎng)景
   • BFC垂直方向邊距重疊的問(wèn)題芥被；
   • BFC不與float重疊欧宜；
   • 清除浮動(dòng)；