一、css盒模型

1. 盒(框)模型介紹

(1) 文件的每個元素被構造成文件佈局內的一個矩形框，框每層的大小都可以使用一些特定的css屬性調整。相關屬性如下：

• content：框內容顯示區域，包括框內的文字內容以及表示巢狀子元素的其他框；
• width：設定內容的寬度，還有min-width，max-width兩個屬性可設定內容的寬度限制；
• height：設定內容的高度，還有min-height，max-height兩個屬性可設定內容的高度限制；
• padding：css框的內邊距，位於內容框的外邊緣與邊界的內邊緣之間。該層的大小可以通過簡寫屬性padding 一次設定所有四個邊，或用 padding-top、padding-right、padding-bottom 和 padding-left 屬性一次設定一個邊。
• border：css框的邊界，是一個分隔層，位於內邊距的外邊緣和外邊距的內邊緣之間。邊界的預設大小為0，即不可見狀態，可以通過設定邊界的厚度、風格、顏色讓其展示。設定屬性方法分為簡寫和詳寫，簡寫即使用border屬性進行設定，詳寫即使用border-top、border-right、border-bottom、border-left屬性分別設定css框某一邊的厚度、風格、顏色；使用border-width、border-style、border-color分別設定css框四條邊的厚度/風格/顏色；也可以單獨設定某一個邊的某一個屬性，如border-top-style等。
• margin：css框的外邊距，即與其他css框的間距，可以使用margin屬性設定，也可以用margin-top、margin-right、margin-bottom、margin-left分別設定。注意：外邊距有一個特別行為稱為“外邊距塌陷”，也稱為外邊距合併或者外邊距摺疊，即 當兩個css框彼此接觸時，它們的間距為兩個css框所設定的外邊距的最大值，而不是兩個css框外邊距的總和。

(2) 外邊距塌陷的基本情況(除去 浮動元素 和 絕對定位元素)：

• 相鄰元素之間：外邊距會摺疊；
• 父元素與其第一個或最後一個子元素之間：若父元素與其第一個子元素之間不存在邊界、內邊距、行內內容，沒有建立塊格式化上下文、沒有清除浮動將兩者的margin-top分開，或者父元素與其最後一個子元素之間不存在邊界、內邊距、行內內容、height、min-height、max-height將兩者的margin-bottom分開，則這兩對外邊距之間會產生摺疊，此時子元素的外邊距會“溢位”到父元素的外面。
• 空的塊級元素：若一個塊級元素中不包含任何內容，並且在其margin-top與margin-bottom之間沒有邊界、內邊距、行內內容、height、min-height，將兩者分開，則該元素的上下外邊距會摺疊。

(3) css框元素的總寬度為：content的width + padding-right + padding-left + border-right + border-left。border忽略百分比寬度設定，因此若設定border或padding為畫素表示，則在響應式佈局下會產生不友好的體驗，此時可使用 box-sizing屬性調整框模型。box-sizing屬性用於更改預設的計算元素寬度/高度的css盒子模型，可用該屬性模擬不正確支援csss盒子模型規範的瀏覽器行為。

box-sizing屬性值 - 關鍵字 值：

• content-box：預設值，即預設css框模型設定的width屬性為content的width，最終css框的總寬為content、border、padding 的寬總和；
• border-box：告知瀏覽器當前css框設定的width屬性為content、border、padding寬的總和，即將預設的css框模型更改為新的模型：，大多數情況下該設定可以更容易的去設定一個元素的寬度。

box-sizing屬性值 - 全域性 值：inherit、initial、unset。

(4) css框的高度不遵守百分比設定，總是採用content的高度，除非設定一個指定的絕對高度，例如使用px或em等。

2. 盒(框)模型的其他屬性

除了width、height、border、padding、margin屬性之外，還有其他屬性可以改變它們的行為。

(1) 溢流：overflow

當使用固定值設定框的大小時，要放置的內容可能超出了固定值的大小，此時內容就會從盒子中溢流，可使用 overflow屬性進行控制。overflow屬性值：

• visible：預設值。內容不會被修剪，當內容超出元素框固定值範圍，則會呈現在元素框之外；
• hidden：當內容超出元素框固定值範圍，超出部分會被修剪，為不可見狀態；
• scroll：內容超出元素框的部分會被修剪，瀏覽器會顯示滾動條以供檢視超出框固定值範圍的內容，此時內容撐開的寬度不包括滾動條的寬度
• auto：當內容超出元素框時會被修剪，瀏覽器呈現滾動條一共檢視超出框的內容，此時內容撐開的寬度包括滾動條的寬度；
• inherit：規定應該從父元素繼承overflow屬性的值。

 (2)背景裁剪：background-clip

框的背景由顏色和圖片組成，它們堆疊在一起被應用到一個盒子裡，然後被畫在盒子的下面。預設情況下，背景延伸到了邊界外沿，若想只讓其延伸到內容的邊沿，則可以通過設定盒子的background-clip屬性進行調整。background-clip屬性值：

• border-box：背景延伸到邊框外沿，但是在邊框之下；
• padding-box：邊框下面沒有背景，即背景延伸到內邊距外沿；
• content-box：背景裁剪到內容區(content)外沿；
• text：背景被裁剪為文字的前景色(只有chrome支援)；
• inherit：繼承父級元素的同屬性設定。

(3)輪廓：outline

一個框的outline時一個看起來像是邊界但又不屬於框模型的東西。它的行為和邊界差不多，但是並不改變框的尺寸，其被勾畫於邊界之外、外邊距區域之內。outline屬性是一個簡寫屬性，詳寫輪廓屬性有：outline-style、outline-width、outline-color。輪廓與邊框的不同包括：

• 輪廓不佔據空間，它們被描繪於內容之上；
• 輪廓可以是非矩形的。在Gecko/Firefox中，輪廓是矩形的，但是Opera則會圍繞元素結構繪製非矩形的形狀。

注：使用 outline 屬性的時候要注意，它一般只在需要可用性的一些情況才被使用，例如在一些使用者點選它的時候使用 outline 來表示高亮、可用，如果你要使用 outline，請確保不要因為它看起來像連結的高亮讓使用者迷惑。

3. css框型別

使用 display屬性 來設定元素的框型別，常見型別有三種：塊狀(block)、行內(inline)、行內塊狀(inline-block)。

• 塊框(block box)：是定義為堆放在其他框上的框（例如：其內容會獨佔一行），而且可以設定它的寬高，之前所有對於框模型的應用適用於塊框；
• 行內框(inline box)與塊框是相反的，它隨著文件的文字（例如：它將會和周圍的文字和其他行內元素出現在同一行，而且它的內容會像一段中的文字一樣隨著文字部分的流動而打亂），對行內盒設定寬高無效，設定padding, margin 和 border都會更新周圍文字的位置，但是對於周圍的的塊框（ block box）不會有影響。
• 行內塊狀框(inline-block box)像是上述兩種的集合：它不會重新另起一行但會像行內框（ inline box）一樣隨著周圍文字而流動，而且他能夠設定寬高，並且像塊框一樣保持了其塊特性的完整性，它不會在段落行中斷開。（若第一行沒有足夠的空間，行內塊狀框會放在第二行文字上，其不會突破兩行。然而，如果沒有足夠的空間，行內框會在多條線上斷裂，會失去一個框的形狀）；

 注意：預設狀態下display屬性值，塊級元素display: block，行內元素display: inline。

二、浮動

1. float

float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文字和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。注意：由於float意味著使用塊佈局，它在某些情況下修改display 值的計算值。

float 屬性的值被指定為單一的關鍵字：

2. 浮動元素的定位

       當一個元素浮動之後，它會被移出正常的文件流，然後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另外一個浮動的元素。而多個浮動元素在相同關鍵字下依次堆放(left：依次向右堆放，right：依次向左堆放)，當填滿容器一整行時換行至下一行。

• left：表明元素必須浮動在其所在的塊容器左側；
• right：表明元素必須浮動在其所在的塊容器右側；
• none：表明元素不進行浮動；
• inline-start：表明元素必須浮動在其所在塊容器的開始一側，在ltr指令碼中是左側，在rtl指令碼中是右側；
• inline-end：表明元素必須浮動在其所在塊容器的結束一側，在ltr指令碼中是右側，在rtl指令碼中是左側。

3. 清除浮動

       如果塊元素內的文字太短，不足以把塊元素的大小撐到高度大於所有浮動元素的高度，會影響下面不期望出現浮動的文件流的樣式，此時可以給後面元素新增 clear：both 屬性值來清除浮動，然而這個方法只是在同一塊級格式化上下文（block formatting context）中沒有其他元素的時候才是有效的。如果後面元素有兄弟元素是向左浮動和向右浮動的邊欄，那麼使用clear 會導致這個元素出現在邊欄的下方，這顯然不是期望的結果。

       如果不能使用清除浮動，另一種做法是浮動容器的限制塊級格式化上下文。可以設定浮動容器(塊級)元素的overflow屬性值變成hidden 或者auto，這樣可以讓容器元素伸展到能夠所有的浮動子元素，而不是讓他們超出塊元素的底部。設定overflow為scroll 也可以讓塊元素撐大來包含所有的浮動子元素，但是這樣不論內容有多少都會顯示出一個滾動條。即使 height 預設值為 auto，還是設定了該屬性，是為了表明容器應該增大高度以便包裹住裡面的內容。

4. 浮動問題

(1) 整個寬度可能難以計算，這樣當新增padding、border、margin等屬性時容易造成佈局混亂，解決方案：使用box-sizing屬性更改盒模型。

(2) float元素在父級元素佔用面積有效高度為0，非浮動元素的外邊距不能用於它們和浮動元素之間來建立空間，因此不能給浮動元素後面新增clear：both屬性的非浮動元素新增margin 屬性以實現元素間分隔，解決方案：在浮動元素與非浮動元素之間新增一個空div元素，給該空div元素新增clear：both屬性，然後再為非浮動元素設定樣式。

(3) 浮動專案的背景高度不一，對於多列浮動，當其高度不同背景顏色不同時樣式會非常不美觀，解決方案：

• flexbox佈局：Flexbox可以自動地延長列，這樣每列就會像最長的一列一樣。
• 將這些列的背景顏色設定為父元素的背景顏色，從視覺上不會看到高度是不同的。這是目前最好的選擇。但對於不同背景顏色的設計不適用；
• 將各列設定為固定的高度，設定overflow：auto屬性使內容滾動；
• 使用一種叫做偽列（faux columns）的技術——這包括將背景(和邊界)從實際的列中提取出來，並在列的父元素上畫一個偽造的背景，看起來像列的背景一樣。不幸的是，這將無法處理列邊界。

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的視覺化CSS渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的互動限定區域。

下列方式會建立塊格式化上下文：

• 根元素或包含根元素的元素
• 浮動元素（元素的 float不是 none）
• 絕對定位元素（元素的 position為 absolute 或 fixed）
• 行內塊元素（元素的 display 為 inline-block）
• 表格單元格（元素的 display 為 table-cell，HTML表格單元格預設為該值）
• 表格標題（元素的 display 為 table-caption，HTML表格標題預設為該值）
• 匿名錶格單元格元素（元素的 display 為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的預設屬性）或 inline-table）
• overfolw 值不為 visible 的塊元素
• display 值為 flow-root 的元素
• contain值為 layout、content或 strict 的元素
• 彈性元素（ display 為 flex 或 inline-flex元素的直接子元素）
• 網格元素（ display 為 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
• column-span 為 all 的元素始終會建立一個新的BFC，即使該元素沒有包裹在一個多列容器中。

塊格式化上下文包含建立它的元素內部的所有內容.

塊格式化上下文對   浮動定位   與   清除浮動   都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。 外邊距摺疊   也只會發生在屬於同一BFC的塊級元素之間。