精通CSS盒模型

什麼是CSS盒模型

每一個html元素咱們能夠認爲表示爲一個小盒子。一個盒子裏面有邊框+內邊距+內容組成。這就是所謂的盒模型。

基本概念：標準模型+IE模型

盒模型細分紅標準模型和IE模型兩種模式，二者差異就是劃定界限不同。

主要仍是瀏覽器解析盒模型標準各不同引發的。瀏覽器默認盒子應該標準模型，而IE則認爲邊框+內邊距+內容纔算的是盒模型。

因此爲了解決這矛盾，文檔須要聲明DOCTYPE類型，這樣全部的瀏覽器都會把盒模型解釋爲b標準盒模型

標準模型和IE模型區別

• content-box（標準盒模型）
  • width = 內容的寬度
  • height = 內容的高度
• border-box（IE模型）
  • width = border + padding + 內容的寬度
  • height = border + padding + 內容的高度

CSS如何設置這兩種模型

有一天，有人以爲IE模型和標準模型各各的優勢，因此CSS3規範有新出box-size屬性來轉換二者模式（默認標準模型）

然而你覺得這樣就結束了嗎？並無。

當你寫複雜點頁面時候又會遇到一些常見的問題：

• 上下兩個相鄰盒子的margin會發生重疊
• 浮動盒子和普通盒子重疊
• 盒容器裏面的子元素影響到外面的元素。
• 計算浮動盒子高度爲零。

爲了解決這些問題，咱們就要觸發BFC，來處理這些問題：

什麼是BFC原理

塊級格式化上下文

怎麼觸發 BFC

• float不爲none
• position不爲static/relative
• display的值爲inline-block、table-cell、table-caption、flex
• overflow的值不爲visible

上下兩個相鄰盒子的margin會發生重疊

解決方法：

浮動盒子和普通盒子重疊

浮動的盒子會在文檔流的盒子上面，主要是瀏覽器識別不到浮動盒子，也就計算不到高度，解決方法，給盒子加個屬性觸發BFC