CSS盒模型與BFC

box-sizing: content-box 標準模型(瀏覽器默認設置) box-sizing: border-box IE模型css

如何獲取盒模型的寬高

BFC(用於解決邊距重疊)

基本概念

BFC（Block Formatting Context）直譯爲「塊級格式化範圍」。是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裏有點相似一個BFC就是一個獨立的行政單位的意思。也能夠說BFC就是一個做用範圍。能夠把它理解成是一個獨立的容器，而且這個容器的裏box的佈局，與這個容器外的絕不相干。html

做用

如何建立BFC

最多見的就是overflow:hidden、float:left/right、position:absolute瀏覽器

BFC使用場景

之因此是這樣，是由於上文的規則5：每一個元素的左邊，與包含的盒子的左邊相接觸，即便存在浮動也是如此；bash

因此要想改變效果，使其互補干擾，就得利用規則6 ：BFC的區域不會與float重疊，讓 ide

也能觸發BFC的性質，即：

.main {
    overflow: hidden;
}
複製代碼

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

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

根據規範，一個盒子若是沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。兩個相鄰的margin之間若是沒有明確的界限（padding、border），則會發生重疊，重疊後相應的margin爲較大的那個post

例子：flex

盒子的top margin和它第一個普通流子元素的top margin
盒子的bottom margin和它下一個普通流兄弟的top margin
盒子的bottom margin和它父元素的bottom margin
盒子的top margin和bottom margin，且沒有建立一個新的塊級格式上下文，且有被計算爲0的min-height，被計算爲0或auto的height，且沒有普通流子元素

<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>
複製代碼

兩個p之間的margin僅爲100px, 是由於他們同屬於 body這個根元素，根據規則3，他們會發生margin重疊。因此咱們須要讓它們不屬於同一個BFC，就能避免外邊距摺疊spa

<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>
複製代碼

清除元素內部浮動當container內部有float元素時，container自己沒有高度，裏面的子元素也會脫離文檔流，爲了不這個狀況，能夠用BFC，根據BFC規範中的第4條：計算BFC的高度時，浮動元素也參與計算，那麼外部div容器就能夠包裹着浮動元素

.container {
  overflow: hidden; /* creates block formatting context */
  background-color: green;
}

.container div {
  float: left;
  background-color: lightgreen;
  margin: 10px;
}
複製代碼

參考3d

https://juejin.im/post/5a4dbe026fb9a0452207ebe6
https://juejin.im/post/59b73d5bf265da064618731d