前端面試2：CSS盒模型

明易發表於2018-12-05
前端面試CSS模型

課程思維導圖

CSS盒模型.png

Q：CSS盒模型是什麼？

盒子模型包括：content、padding、margin、border

Q：標準模型和IE模型的區別？

  1. 標準模型的寬高為content的寬高
  2. IE模型的寬高包括border

Q：CSS如何設定這兩種模型？

  1. 標準模型：box-sizing：content-box
  2. IE模型：box-sizing：border-box

Q：JS如何設定/獲取盒模型對應的寬高

dom.style.width/height：內聯樣式的寬高
dom.currentStyle.width/height：渲染後的最終寬高（IE）
window.getComputedStyle(dom).width/height：DOM標準，不支援IE
dom.getBoundingClientRect().width/height：計算元素的絕對位置（視窗左頂點為起點，含left/right/height/width）
複製程式碼

Q：BFC是什麼，講一下原理？

塊級格式化上下文

Q：BFC佈局規則是？

  1. 內部的Box會在垂直方向，一個接一個地放置。
  2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
  3. BFC的區域不會與float box重疊。
  4. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
  5. 計算BFC的高度時，浮動元素也參與計算

Q：哪些元素會生成BFC?

  1. float不為none
  2. position不為static/relative
  3. display的值為inline-block、table-cell、table-caption
  4. overflow的值不為visible
  5. 根元素

Q：BFC的使用場景有哪些？

一、自適應兩欄佈局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
複製程式碼

前端面試2：CSS盒模型
根據BFC佈局規則第三條：

BFC的區域不會與float box重疊。

我們可以通過通過觸發main生成BFC， 來實現自適應兩欄佈局。

.main {
    overflow: hidden;
}
複製程式碼

當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：

前端面試2：CSS盒模型

二、清除內部浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
複製程式碼

前端面試2：CSS盒模型
根據BFC佈局規則第五條：

計算BFC的高度時，浮動元素也參與計算

為達到清除內部浮動，我們可以觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。

.par {
    overflow: hidden;
}
複製程式碼

前端面試2：CSS盒模型

三、防止垂直 margin 重疊

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>
複製程式碼

前端面試2：CSS盒模型
根據BFC佈局規則第一條：

Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

我們可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>
複製程式碼

前端面試2：CSS盒模型

其實以上的幾個例子都體現了BFC佈局規則第五條：

BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。

相關文章