1、盒模型
上面是一個盒子模型圖，一個盒子包括了content（實際內容）、border（邊框）、padding（內邊距）和margin（外邊距）。
盒子的內容，顯示文本和圖像。我們給元素設置的width和height其實是content的寬高，如果content指定高度大于顯示內容所需高度，多余的高度會產生類似內邊距一樣的效果；如果指定高度小于顯示內容所需高度，會出現滾動條。如果元素內容的高度大于元素框的高度，瀏覽器的具體行為取決于overflow屬性。
元素的邊框是圍繞元素內容的內邊距的一條或多條線。邊框由粗細、樣式和顏色三部分組成。
清除內容周圍的區域，內邊距是透明的，取值不能為負，受盒子的Background屬性影響，padding是有背景的。
?
在元素外創建額外的空白，空白通常指不能放其他元素的區域，而且在這個區域中可以看到父元素的背景（padding所帶的是本身的背景而非父元素）。margin經常取負值實現定位的作用。
外邊距有一個合并問題，經常使人們混淆，簡單來說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
其實盒模型有兩種，分別是ie盒子模型（IE6以下版本瀏覽器)和標準w3c盒子模型，區別在于前者content的寬度和高度包括了border和padding。
margin（外邊界）雖不可見，但是它確實在文檔中占據了空間，我們要區分兩個概念即：盒子所占空間（計入margin ）和盒子實際的大小（不計入margin） 。
下面舉個例子來區分兩種盒模型：一個盒子的margin 為 20px，border 為 2px，padding 為 10px，content 的寬為 200px、高為 50px。
盒子所占空間：width=20ｘ2+200=240? ? ? ? ? ? ? ? height=20ｘ2+50=90
盒子實際大小：width=200? ? ? ? ? height=50
盒子所占空間：width=20ｘ2+2ｘ2+10ｘ2+200=264? ? height=20ｘ2+２ｘ2+10ｘ2 +50=114
盒子實際大小：width=200 +2ｘ2+10ｘ2 =224? ? ? height=50+2ｘ2+10ｘ2=74
解釋到這里，有的人可能會想起CSS3里面有個叫做box-sizing的屬性，咦？兩個盒模型不就是它不同取值下的效果嗎？那我恭喜你，你說對了～
box-sizing有三個取值：
1、content-box:使元素遵循標準 w3c 盒子模型（默認值）。
2、border-box:使元素遵循ie 盒子模型。
3、inherit： 規定應從父元素繼承 box-sizing 屬性的值。
那么我可以用box-sizing的不同取值讓大家直觀地理解兩個盒子的區別，也順帶理解這個屬性，下面是需要用到的html代碼，方便大家看得清楚，我給盒子外面添加一個寬高各500px的灰色背景
????????????<div class='box'></div>
????????</div>
? ????? .box{
? ? ????? ????? background-color: #91D4DA;
? ? ????????? ? width: 300px;
? ? ????????? ? height: 300px;
? ? ? ????????? padding: 20px;
? ? ? ????????? border: 10px solid #5B5B5B;
box-sizing: content-box;? ? /*默認值，可以不寫*/
? ????????? }
下面改變padding和border的值
????????????.box{
????????????????background-color: #91D4DA;
????????????????width: 300px;
????????????????height: 300px;
????????????????padding: 50px;
????????????????border: 20px solid #5B5B5B;
box-sizing: content-box; /*默認值，可以不寫*/
????????}
????大家可以發現，元素盒子的實際寬度是隨padding和border改變的。
???????????? .box{
???????????????? background-color: #91D4DA;
???????????????? width: 300px;
???????????????? height: 300px;
???????????????? padding: 20px;
???????????????? border: 10px solid #5B5B5B;
???????????????? box-sizing: border-box;
???????????? }
下面改變padding和border的值
???????????? .box{
???????????????? background-color: #91D4DA;
???????????????? width: 300px;
???????????????? height: 300px;
???????????????? padding: 50px;
???????????????? border: 20px solid #5B5B5B;
??????????????? box-sizing: border-box;
???????????? }
發現區別了吧，當你遵循ie盒子模型時，不管你如何設置padding和border（小于width/2），它只在盒子里面伸縮，不影響整體的寬高，這個border-box是不是在某些時候非常好用？但也不能盲目地用，因為它會影響content，如果padding和border太大，會把內容擠掉的。
現在還在用IE6以下的瀏覽器的用戶已經很少了，所以目前瀏覽器大部分元素都是基于W3C標準盒子模型 上。所以我們平常說的盒子模型一般就是標準
w3c盒子模型 （但對于input、button元素默認border-box ，還是基于傳統的ie 盒子模型）。一定有人會問，那我們怎樣讓我們的元素都遵循W3C標準盒子模型呢？哈哈，看看你html的文件頭部是不是有一個<!DOCTYPE html>，有這個，就說明你已經遵循W3C標準盒子模型了。
[if !supportLists]2、[endif]基線
2-1.基線、底線、頂線、中線
基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿
2-2.內容區
內容區是指底線和頂線包裹的區域（行內元素display：inline可以通過background-color屬性顯示出來），實際中不一定看得到，但確實存在。內容區的大小依據font-size的值和字體進行變化。
?
2-3.行高
行高（line-height）：包括內容區與以內容區為基礎對稱拓展的空白區域，我們稱之為行高。一般情況下，也可以認為是相鄰文本行基線間的距離(張鑫旭css世界)。
2-4. 行內框inline box
行內框是一個瀏覽器渲染模式中的一個概念，無法顯示出來，但是它又確實存在，它的高度就是行高指定的高度。
2-5. 行框line box
行框（line box），同行內框類似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等于本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框采用自己的對齊方式向基準對齊，最終計算行框的高度）。
2-6.Vertical-align:垂直居中
上一節我們講解了行高與單行純文字的垂直居中（line-height），而如果行內含有圖片和文字，在瀏覽器渲染出來后，讀者可以發現文字和圖片在垂直方向并不是沿中線居中，而是沿基線對齊。這是因為，元素默認的垂直對齊方式為基線對齊（vertical-align: baseline）。
CSS語法：vertical-align
語法：
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <長度> | inherit
說明：
設置元素內容的垂直對齊方式。
參數：
baseline： 基線對齊；
sub： 下標顯示；
super： 上標顯示；
top： 頂端對齊；
text-top： 文本的頂端對齊；
middle： 中部對齊；??//沒有研究透的屬性
bottom： 底端對齊；
text-bottom： ? 文本的底端對齊；
百分比和長度：CSS2，可為負數。
初始值：baseline
繼承性：不繼承
?此處需要特別注意的是：垂直對齊屬性只對文本有效（是指包含了#Text節點的元素節點才能正確地處理vertical-align屬性）。同時，該屬性不能繼承。
屬性值詳解
在上面一節中，介紹了文本的基線、頂線、中線和底線，還有內容區、行內框和行框，而本節的垂直對齊和這幾個概念密切相關。
1. 基線對齊（vertical-align : baseline）
基線對齊（vertical-align : baseline）使元素的基線同基準元素（取行高最高的作為基準）的基線對齊
2. 頂端對齊（vertical-align : top）
頂端對齊（vertical-align : top）是將元素的行內框的頂端與行框的頂端對齊
3. 文本頂端對齊（vertical-align : text-top）
文本頂端對齊（vertical-align : text-top）是將元素行內框的頂端同文本行的頂線對齊
4. 底端對齊（vertical-align : bottom）
底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反
5. 文本底端對齊（vertical-align : text-bottom）
中間對齊（vertical-align : middle）
中間對齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線對齊。
中線的定義為：中線位于基線的上方，與基線的距離為小寫字母x高度的一半（即0.5ex），而ex同font-size相關，大部分瀏覽器認為1ex = 0.5em（em同樣也是相對單位，不是絕對單位），因此會將基線以上四分之一em處作為中線來對齊。
7. 上標和下標
上標（vertical-align:super）使元素的基線相對于基準元素的基線升高，下標（vertical-align:sub）使元素的基線降低，移動的幅度CSS規范中沒有規定，由瀏覽器來決定。
上下標不會改變元素文字的尺寸大小。
3、文檔流
3-1. 標準文檔流
文檔流指的是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
?
3-2. 標準流的微觀現象：
[if !supportLists]·?[endif]空白折疊現象。（見代碼）
[if !supportLists]·?[endif]高矮不齊，底邊對齊
[if !supportLists]·?[endif]自動換行，一行寫不完時，換行
?
3-3.標準文檔流等級
分為兩種等級：塊級元素和行內元素
內聯元素文檔流
內聯元素的文檔流是從左往右流動的，當一行滿了之后會另起一行從新開始
1).與其他元素并排2).不能設置寬、高。默認的寬度就是文字的寬度
塊級元素文檔流
塊級元素文檔流是從上往下依次流動的，每個塊級元素占滿一行
1).霸占一行，不能與其他任何元素并列2).能接受寬、高3).如果不設置寬度，那么寬度將默認變為父親的100%，即和父親一樣寬
3-4.脫離文檔流
float使用
浮動元素是如何定位的
當一個元素浮動之后，它會被移出正常的文檔流，然后向左或者向右平移，一直平移到碰到了所處的容器的邊框，或者碰到了另外一個浮動的元素。
浮動屬性
[if !supportLists]1.?[endif]只有橫向浮動，并沒有縱向浮動。2.當元素應用了float屬性后，將會脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度。3.會將元素的display屬性變更為block
[if !supportLists]4.?[endif]浮動元素的后一個元素會圍繞著浮動元素（典型運用是文字圍繞圖片），與應用了position的元素相比浮動元素并不會遮蓋后一個元素。5.浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素并排顯示，必須讓兩個塊狀元素都應用float）
文字環繞效果（見代碼）
按我的理解，div2向左浮動了，div3就跑到div2的下面了，同時div3中的內容應該也就看不到了，但真實效果卻不是這樣的，div3的內容被擠出來了，這個是怎么回事呢？
尋找原因
經過查詢資料后，讓我了解到了float的歷史背景：
早些時候，W3C規定出來的浮動實際并不是為了布局所用，當時是為了做文字環繞才使用了浮動，只是后來人發現用它做布局也挺不錯的，故至此float就擔任了CSS中布局的任務，但我們還是不要忘了，float起初就是為了做文字環繞的。
可能浮動并不是像我想象的那樣，元素完全的脫離了文檔流，其實浮動還是比較特殊的，雖然脫離的文檔流，但最終還是能影響到布局。
下面讓我們比對一下絕對定位和浮動的區別，感受一下真正的脫離文檔流是什么樣子的。
浮動與絕對定位對比（見代碼）
絕對定位是將元素徹底的從文檔流中刪除，并相對于某個父元素進行定位，元素原先在文檔流中所占的空間會關閉，就好像該元素原來不存在一樣，該元素再也不會影響其他元素的布局了。
浮動使元素脫離了文檔流，但依然影響了布局。在CSS中，浮動元素幾乎“自成一派”，比較特殊。這種影響來源于一個事實：一個元素浮動時，其他內容會“環繞”該元素。
從上圖可以看出，div2的確占據了div1的位置，綠色的部分和灰色的部分有重合，所以可以說，浮動的元素脫離了文檔流。但div2的文字內容并沒有被div1給覆蓋，而是環繞在div1的周圍，所以可以說，浮動影響了布局。其實環繞是浮動最初的目的。
總結
絕對定位是使元素完全的脫離文檔流，也是我們大部分人理解的浮動，影響了自身的位置，但并沒有影響到其它元素的內部布局。
float可以理解是一種特殊的“浮動”，元素雖然脫離的文檔流，但依然會影響到其他元素的內部布局。float有兩個功能：
1、脫離文檔流
2、文字環繞
position:fixed 元素在一定的容器內固定定位
position:fixed;默認是相對瀏覽器窗口定位的，如果想要讓一個元素相對一個div容器內固定定位，html部分如下：
HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種。首先需要說明的是，這三者是可以互相轉換的，使用display屬性能夠將三者任意轉換：
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
<!DOCTYPE html>
<html>
????<head>
????????<meta charset="utf-8" />
????????<title>測試案例</title>
????????<style type="text/css">
????????????span {
?????????????????display: block;
????????????????width: 120px;
????????????????height: 30px;
????????????????background: red;
????????????}
????????????div {
????????????????display: inline;
????????????????width: 120px;
????????????????height: 200px;
????????????????background: green;
????????????}
????????????i {
????????????????display: inline-block;
????????????????width: 120px;
????????????????height: 30px;
????????????????background: lightblue;
????????????}
????????</style>
????</head>
????<body>
????????<span>行內轉塊狀</span>
????????<div>塊狀轉行內 </div>
????????<i>行內轉行內塊狀</i>
????</body>
</html>
3-4-1.行內元素
??行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體和標簽，還有和這兩個標簽可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
行內元素特征：(1)設置寬高無效
[if !supportLists](2)?[endif]對margin僅設置左右方向有效，上下無效；padding????設置上下左右都有效，即會撐大空間
(3)不會自動進行換行
?
?
3-4-2.塊級元素
???塊狀元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div來實現。不過為了可以方便程序員解讀代碼，一般都會使用特定的語義化標簽，使得代碼可讀性強，且便于查錯。
塊狀元素特征：(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下
3-4-3.行內塊狀元素
行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。
行內塊狀元素特征：(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右
來源公司技術分享--金鑫
