CCS 盒模型分析

時間 2019-11-10

標籤 ccs 模型分析简体版

原文原文鏈接

基本概念

頁面中的每一個元素均可以當作一個盒子，盒子裏面能夠裝其餘盒子，層層嵌套。html 標籤就是最外面的大盒子。每一個盒子由內向外分別是 content, padding, border, margin 。css

外邊距摺疊問題

相鄰元素在豎直方向上的外邊距在相遇時會發生合併，合併後的外邊距的高度等於兩個外邊距中較大的那個值。

兄弟元素間

父子元素間

外邊距摺疊解決方案（BFC）

Block Formatting Context （塊級格式化上下文）

BFC 能夠簡單地理解爲某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。dom

怎樣讓元素建立 BFC

float 的值不爲 none （浮動元素）
overflow 的值不爲 visible
display 的值爲 inline-block 、table-caption 、 table-cell 、flex 、inline-flex
positon 的值爲 absolute 或 fixed
<html>(根元素)

BFC 的佈局規則

內部的 box 會在垂直方向上一個接一個地放置（平時說的塊級元素一行行放）
box 間垂直方向的距離由 margin 決定。同一個BFC中的兩個相鄰的 box 仍是會產生外邊距重疊問題
BFC 的區域不會與浮動的 box 重疊
BFC 是一個獨立的容器，裏面的元素不會影響外面的元素，反之亦然。
包含浮動元素，計算 BFC 的高度時，浮動的元素也會參與計算

BFC 的應用場景

分屬於不一樣 BFC 的元素能夠防止垂直外邊距摺疊
清除內部浮動（使浮動元素能夠撐起父盒子）
自適應兩欄佈局（BFC 區域不會與浮動元素重疊）
防止元素被浮動元素覆蓋

float + BFC 兩欄佈局:佈局

<div class="parent">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<style>
    .left {
        float: left;
        width: 100px;
        background-color: blue;
    }
    .right {
        overflow: hidden; // 觸發 BFC
        background-color: green;
    }
</style>

閱讀原文
<br/>
參考文章：
關於CSS-BFC深刻理解
 css 盒子模型理解post