學習總結：CSS(一)塊級與行級元素特性、盒模型、層模型、BUG與BFC、浮動模型
一、元素的塊級與行級特性
在CSS屬性display控制元素是否及如何顯示的特性，常用的值有none、inline、block、inline-block，在CSS3中還有一些新的特性狀態，在這裡不做討論。
這裡我們主要討論display在CSS佈局中涉及到主要屬性值inline、block、inline-block三個特性狀態。
通常我們在使用元素做頁面佈局設計時會說行級元素和塊級元素，我們通常也遵循塊級元素搭建頁面設計架構，使用行級元素和行級塊元素設計內容。
| 行級元素（內聯元素inline） | span strong em a del | 內容決定元素所佔位置；不可通過css改變寬高； |
| 塊級元素（block） | div p ul li ol form address | 獨佔一行；可以通過css改變寬高； |
| 行級塊元素（inline-block） | img | 內容決定大小，可改變寬高； |
元素如何顯示的特性是由瀏覽器根據不同標籤，設定的原始值來決定的，但這並不代表元素的顯示特性就一成不變了，display的值是可以通過人為修改來改變。但是這樣的操作我並不贊同。
元素的display特性凡是具備inline特性值時，也就是行級元素或者行級塊元素都有文字特性，這個特性就是在兩個元素之間如果存在邏輯上的空格，元素之間就會有文字之間的間隙一樣，這個間隙的寬度根據不同瀏覽器，不同版本而定。單著並不是我們要討論的問題。
注：我們需要討論的是因為img標籤具備inline特性，而我們在實際開發時通常用來排列圖片設計時，會習慣每行一個標籤來編輯，因為換行在文字中存在邏輯上的空格，所以在測試的時候元素之間會出現間隙，這並不是bug，這樣的空格在我們壓縮檔案釋出時，壓縮過程中會清除這些元素之間的邏輯空格。通過壓縮後再執行的程式碼在img之間就不會有空隙了，而我們平時在編輯測試時建議將img回成一行來測試。
二、盒模型
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
boreder(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文字和圖形。
三、層模型
position屬性規定元素的定位型別。
| absolute | 生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位。 元素的位置通過"left"，"top"，"right"，以及"bottom"屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過"left"，"top"，"right"以及"bottom"屬性進行規定。 |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20"會向元素的left位置新增20畫素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略top，bottom,left,right或z-index宣告）。 |
| inhert | 規定應該從父元素繼承position屬性的值。 |
absolute:1.脫離原來位置進行定位（即定位到其他位置，原來的位置會被佔位，也是元素髮生了層變化）。
2.以最近的有定位的父級進行定位，如果沒有，則相對於文件進行定位。
relative: 1.保留原來位置進行定位，原來位置不會被佔用，也不會發生層變化。
2.相對自己原來的位置進行定位。
開發經驗：以relative作為定位參照，用absolute實現定位功能。
.四、經典的BUG與BFC
BFC：block format context ; 塊級盒模型
觸發盒子的BFC:
position:absolute; 絕對定位
display:inline-block; 元素特性修改為：行級塊元素
float:left/right; 元素浮動
overflow:hidden 溢位部分隱藏
1.margin塌陷
現象：子元素與父元素同時設定margin-top時，子元素的margin-top不相對於父級的top位置作用效果，而是相對於瀏覽器或父級鏈上有bfc渲染規則的元素作用效果。
解決方法：讓父級觸發bfc渲染規則
2.margin合併
現象：兩個並列的元素，前面的元素設定margin-bottom,後面的元素設定margin-top,取一個大值作為兩個元素之間的間隔距離。
解決方法：可以將兩個元素巢狀在bfc渲染規則的盒子裡面，或則其中一個巢狀在bfc渲染規則的盒子裡面。注：這個bug一般不解決，採用資料計算，在一個邊距上設定值就可以了。
五、浮動模型（教程：html-css-4.1-48：00）
float:left/right
當兩個並列元素，前一個設定了浮動，後一個沒有設定，如果後一個是塊級元素就會移動到浮動元素的下方（這裡不是層模型）。
當浮動元素被父級元素包裹時，父級元素不會被正常撐開，因為子元素的下方法產生了浮動流。父級元素的下邊框就看到浮動的子元素了。
浮動元素會產生浮動流：
1.塊級元素看不到產生浮動流的元素（會佔位到浮動元素的下面）。
2.產生了bfc渲染規則的元素和文字類屬性（inline）的元素以及文字都能看到浮動元素（這些元素和文字會排列到浮動元素的後面）。
並列元素間的浮動問題解決方法：bfc渲染規則及可以解決。
父子元素間的浮動問題解決方法：1.採用新增一個標籤設定樣式clear：both;清除這個標籤周邊的浮動流（改變頁面結構，實際不能用）。2.可以設定父級元素轉換成bfc渲染規則。3.可以使用偽元素after替換新增的標籤的方法。
element::after{ content:"";//讓偽元素生效 clear:both;//清除左右浮動 display:block;//偽元素是行級元素，需要改變它的元素特性為塊級元素才能生效。 }
浮動流的就是被設定浮動的元素下方在邏輯上會產生一個浮動流的作用，塊級元素看不到並列在前面的浮動元素的和子元素。如果是前面存在並列的浮動元素，塊級元素就會移動到浮動元素的下方。如果是子元素被設定了浮動，父級元素就會失去對子元素的約束（下邊框無法被子元素撐開）。解決方法上面已給出。