CSS原理解析之模型篇

寫在前面：

嘗試回答幾個問題：

1. 什麼是盒模型，控制盒模型的屬性有哪些？
2. Margin、Padding、Border、Width、Height這些屬性改變/影響盒模型，但每一個屬性都會在全部元素上生效麼？
3. 若是存在區別，那麼和元素類型或者元素定位有關係麼？
4. 浮動元素是什麼？位置如何肯定？若是去掉浮動？
5. 層疊關係如何判斷優先級？越大就越靠近用戶麼？

盒模型是咱們天天都在接觸的，但盒子模型到底如何計算排列的，老是隻知其一;不知其二。本文嘗試從 W3C規範和實例入手，解決上述問題。

目錄

包含塊( containing block)

盒模型( Box model)

定位模式( Positioning schemes)

層疊關係( Layered presentation)

包含塊

概念

每一個盒子會變成他後代盒子的包含塊，後代盒子的大小和位置會根據他包含塊的矩形邊框進行計算。可是不會受到包含塊的限制，可能會溢出。

肯定包含塊的方法

1. 對於根元素、position=fixed的元素，包含塊都是視窗
2. 若是元素是relative或者static,則是他最近的塊形父元素的內容區(content)——注:規定了父元素必須是block container
3. 若是元素是absolute，包含塊是最近的非static的父元素的Padding區——注:父元素的類型未規定

舉例

包含塊最直觀的判斷是一個元素對大小設置百分比時，相對的元素是哪個，這個元素就是他的包含塊

1. 最基本的例子

示例代碼

2. 當em變成absolute定位

示例代碼

盒模型

Margin

1. 寬度。分爲四個方向，都支持百分比和具體的像素。而且margin的百分比是根據元素的包含塊(containing-block)的width來計算。並非margin-top/ bottom對應height。 示例代碼
2. 內聯元素(display: inline)的margin-top和margin-bottom失效。瀏覽器不容許設置。
3. 合併。

• 水平的margin不會合並(inline-block和inline都支持) 示例代碼
• 都屬於常規流內(in flow)塊級盒，處於同一個上下文的兄弟元素 解決方法：將其中一個塊盒變成BFC，阻止margin的合併 示例代碼
• 塊級父元素和其子元素，在沒有padding,border,height,空隙將之隔開時，子元素的margin會滲透到父元素上。簡單講，父元素和子元素之間沒有其餘元素。示例代碼

  4.  容許設置負值。

• 對於position=static元素，負值至關於將元素向負值方向移動覆蓋，可是隻會覆蓋顏色，不會覆蓋文字。示例代碼
• 對於position=relative元素， 負值仍是會把下面的元素粘着一塊兒移動，但會徹底覆蓋前一個元素。示例代碼
• 對於position=absolute元素，由於元素脫離了文檔流，因此負值只會本身發生偏移，對先後元素沒有任何影響。示例代碼
• 對於float元素，能夠經過負值進行覆蓋，最多見的應用是三欄應用。示例代碼

Padding

1. 寬度。同Margin。
2. 內聯元素(display: inline)的padding生效，可是top和bottom並不會推擠，只會覆蓋其餘元素，覆蓋狀況遵循z-index原則。 示例代碼
3. 合併。Padding不存在合併狀況 示例代碼
4. 不容許負值。

Border

1. 寬度。只有px，不支持百分比。
2. 合併。inline元素左右不合並，上下會合並。inline-block&block元素四個方向都不會合並 示例代碼

Width

1. 內聯元素不能設置width和height。
2. 非內聯元素百分比設置(見上文包含塊)

• 根據包含塊的content box寬度計算
• 若是當前元素是絕對定位，那麼相對父元素的padding box的寬度定位

Height

計算方式同width

定位模式

常規流

流內元素有幾大模型。CSS2.1中定義了IFC（Inline Formatting Contexts）與 BFC（Block Formatting Contexts）。CSS3中增長了GFC（GridLayout Formatting Contexts）和FFC（Flex Formatting Context）。後兩個後續文章會詳細講解，這裏暫且不提。

BFC（Block formatting contexts）塊格式化上下文

1. 什麼狀況產生BFC(四選一)

• 浮動
• 絕對定位
• 非塊盒的塊容器（inline-block）
• overflow不爲visible的塊盒

   2. 特性

• 從包含塊頂部豎直方向排列
• BFC內部兄弟盒子之間的margin會合並——能夠經過把兄弟之一變成BFC解決合併
• BFC能夠阻止margin合併

IFC（Inline formatting contexts）內聯格式化上下文

1. 如何產生：只有在一個塊級元素中僅僅包含內聯級別元素時纔會生成
2. 特性

• 從包含塊頂部水平方向排列
• 排列狀況和浮動與否會改變行盒的高度
• 當一個行盒被分割，margin,border,padding都不會再有視覺效果了

浮動

1. 概念：float CSS屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性
2. 位置:

• 當一個元素浮動以後，它會被移出正常的文檔流，而後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素
• 浮動元素會根據上一個元素的類型判斷位置，若是上一個是浮動的，則跟隨他，放不下就擠到下一行
• 若是上一個是標準流的元素，則浮動元素的相對垂直高度不變，頂部和上一個元素的底部對齊。

   3. 清除浮動

• 引入空隙，父元素使用::after僞元素
• 浮動元素限制成BFC，使用overflow:hidden
• clear屬性

   4. 代碼： 示例代碼

絕對定位

position=absolute設置元素絕對定位，會致使元素變成絕對定位，脫離文檔流，而且元素此時是BFC佈局，Margin不會進行合併。使用top/bottom/left/right(下面簡寫成TBLR)控制位置的變更，具體像素和百分比都參照包含塊進行偏移。

比較其餘position屬性值

1. position=static 常規流佈局，沒法經過TBLR控制位置
2. position=relative 盒子相對於其常規流位置進行偏移，兄弟元素相對其偏移前的位置定位。使用TBLR控制時，若是是固定像素，那盒子相對於自身邊界偏移，若是是百分比，則參照包含塊偏移。
3. position=fixed 包含塊是視窗，使用TBLR控制都是相對包含塊偏移
4. 對於百分比：left/right 相對於包含塊的width，top/bottom相對於包含塊的height

層疊關係

在一個層疊上下文中一共能夠有7種層疊等級，列舉以下： 示例代碼

1. 背景和邊框 —— 造成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級。
2. 負z-index值 —— 層疊上下文內有着負z-index值的子元素。
3. 塊級盒 —— 文檔流中非行內非定位子元素。
4. 浮動盒 —— 非定位浮動元素。
5. 行內盒 —— 文檔流中行內級別非定位子元素。
6. z-index: 0 —— 定位元素。 這些元素造成了新的層疊上下文。
7. 正z-index值 —— 定位元素。 層疊上下文中的最高等級。

當對某一個元素的z-index賦值了除了auto之外的值，就建立了一個新的層疊上下文，獨立於其餘的層疊上下文。

比較順序變成，先比較各個層疊上下文的z-index。而後在層疊上下文中比較子元素的優先級。

總結

1. 本文解釋包含塊，以及基於包含塊肯定的盒模型，對盒模型的四個邊界的計算方式作了總結。
2. 對元素的定位方式和不一樣定位方式引發的元素之間位置變化作了總結。
3. 後續會繼續以總結形式梳理CSS中常見但迷惑的地方。
4. 若有錯誤，請指出，你們一塊兒共同進步~