css 盒模型

前端面試對於CSS這塊不可或缺的一個考察點就是盒模型（BOX），經過對BOX的提問就能夠了解你在CSS知識方面的掌握程度。本文主要介紹CSS中的盒模型在面試中可能會問到的相關問題和知識點，不足指出請指出改正。

首先，最基礎的問題–什麼是盒模型？ 
能夠說，頁面就是由一個個盒模型堆砌起來的，每一個HTML元素均可以叫作盒模型，盒模型由外而內包括：邊距（margin）、邊框（border）、填充（padding）、內容（content）。它在頁面中所佔的實際寬度是margin + border + paddint + content 的寬度相加。

可是，盒模型有標準盒模型和IE的盒模型。若是你打出來這兩種，那麼確定會問二者的區別是什麼？咱們先來看兩張圖： 
標準的(W3C)盒模型： 

 
IE盒模型： 
 
經過這兩張圖片咱們能夠很直觀的看出二者的區別。不一樣之處就是標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小。

那麼隨之而來第二個問題–怎麼設置這兩種模型呢？ 
很簡單，經過設置 box-sizing:content-box(W3C)/border-box(IE)就能夠達到自由切換的效果。

第三個問題，JS怎麼獲取和設置box的寬高呢，你能想到幾種方法？

對於這個問題我給你們推薦一篇文章，寫的是比較全乎的。JavaScript獲取元素尺寸和大小操做總結 
除了文章中說的方法呢，還能夠經過，dom.currentStyle.width/height來獲取，獲取到的是元素渲染以後的寬高，是準確的，可是隻限於IE使用。 
還能夠經過window.getComputedStyle(dom).width/height獲取元素的寬高。這個方法兼容性較好，支持firefox、chrome。

第四個問題可能就會問道你關於邊距重疊方面的知識了。

什麼是邊距重疊？什麼狀況下會發生邊距重疊？如何解決邊距重疊？

邊距重疊：兩個box若是都設置了邊距，那麼在垂直方向上，兩個box的邊距會發生重疊，以絕對值大的那個爲最終結果顯示在頁面上。

父子關係的邊距重疊：

<!-- 父子關係，若是子元素設置了外邊距，在沒有把父元素變成BFC的狀況下，父元素也會產生外邊距，給父元素添加 overflow：hidden 這樣父元素就變爲 BFC，不會隨子元素產生外邊距，可是父元素的高會變化。 -->
    <section class="box" id="fat">
        <style type="text/css">
            #fat {
                background-color: #f00;
                overflow: hidden;
            }

            #fat .child {
                margin-top: 10px;
                height: 100px;
                background-color: blue;
            }   
        </style>
        <article class="child"></article>
    </section>

同級關係的重疊：

<!-- 同級元素在垂直方向上外邊距會出現重疊狀況，最後外邊距的大小取二者絕對值大的那個 -->
    <section class="fat">
        <style type="text/css">
            .fat {
                background-color: #ccc;
            }
            .fat .child-one {
                width: 100px;
                height: 100px;
                margin-bottom: 30px;
                background-color: #f00;
            }

            .fat .child-two {
                width: 100px;
                height: 100px;
                margin-top: 10px;
                background-color: #345890;
            }
        </style>
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>


經過這個問題就又引出了一個知識點–BFC，以及BFC的一系列問題？

BFC的基本概念–BFC就是「塊級格式化上下文」的意思，也有譯做「塊級格式化範圍」。它是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。通俗的講，就是一個特殊的塊，內部有本身的佈局方式，不受外邊元素的影響。

BFC原理–

BFC內部的盒子，會在垂直方向，一個接一個地放置。垂直方向上也會發生邊距重疊。
BFC就是頁面上的一個獨立容器，容器裏面的子元素不會影響到外面的元素，外邊的也不會影響裏邊的。
BFC的區域不會與float box重疊。
計算BFC的高度時，浮動元素也被計算在內。
BFC如何產生– 
- overflow: auto/ hidden; 
- position: absolute/ fixed; 
- float: left/ right; 
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex 
在屬性值爲這些的狀況下，都會讓所屬的box產生BFC。

BFC的使用場景–能夠用來自適應佈局。

<!-- BFC不與float重疊 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的這一個原理就能夠實現兩欄佈局，左邊定寬，右邊自適應。不會相互影響，哪怕高度不相等。 -->
    </section>

能夠清除浮動：

<!-- BFC子元素即便是float也會參與計算 -->
        <section id="float">
            <style media="screen">
              #float{
                background: #434343;
                overflow: auto;
              }
              #float .float{
                float: left;
                font-size: 30px;
              }
            </style>
            <div class="float">我是浮動元素</div>
        </section>

解決垂直邊距重疊：

    <section id="margin">         <style>             #margin{                 background: pink;                 overflow: hidden;             }             #margin>p{                 margin: 5px auto 25px;                 background: red;             }             #margin>div>p {                 margin: 5px auto 20px;                 background: red;             }         </style>         <p>1</p>         <div style="overflow:hidden">             <p>2</p>         </div>         <p>3</p>         <!-- 這樣就會出現第一個p標籤的margin-bottom不會和第二個p標籤的margin-top重疊，這也是BFC元素的另外一個原則，不會影響到外邊的box，是一個獨立的區域。 -->     </section> 關於BOX相關的知識和問題就介紹這麼多，若是有不對的地方歡迎留言交流。