每個元素都相對於其包含塊擺放，對於正常的西方語言文字流的中的乙個元素，包含塊由其最近的塊級祖先框、表單元格或行內塊祖先框的內容邊界組成。例如：
***p>
div>
body>則p的包含塊是div，div的包含塊是body。因此，p的布局依賴於div，div的布局依賴於body。
替換元素
指用作為其他元素佔位符的元素。例如img，它指向乙個影象檔案，這個檔案將插入到img元素在文件流中所在的位置。
非替換元素
如果元素的內容包含在文件中，則稱之為非替換元素。
塊級元素
指在正常流中會在其框前和框後會生成換行的元素。通過宣告display:block可以生成塊級框。
行內元素
指不會在其前和其後生成換行的元素。通過宣告display:inline可以生成行內框。
關於元素框的概念這裡就不介紹了。
正常流中塊級元素框的水平部分總和等於其父元素的width。即內容區寬度加上（如果有的話）內邊距、邊框、外邊距的寬度就等於其父元素內容區的寬度。
水平屬性
七大屬性：margin-left、border-left、padding-left、width、margin-right、border-right、padding-right。其中，只有3個元素可以設定為auto：width、margin-left、margin-right。
使用auto
如果只設定其中的乙個值為auto，剩下兩個都為指定值，則設定為auto的會自動確定其值以使元素框的寬度等於其父元素的width。pp
p
如果有兩個都設定為auto的話：
p
p
p
注意，水平外邊距是不會合併的。父元素的邊距可能會影響子元素。
負外邊距
外邊距可以設定為負值。
div
p
div
p
也可以設定左外邊距為負值：
注意：只有外邊距可以為負值，內邊距、邊框、寬度、高度都不可以為負值。
百分數
當width、內外邊距設定為百分數時，會遵循同樣的規則。邊框的寬度不能設定為百分數，只能是長度。顯然，如果將百分數和長度單位混合使用，可能會很麻煩。
替換元素的水平格式化
上述都是非替換塊級元素的水平格式化，其所有規則同樣適用於替換塊元素。只有乙個例外：如果width的值為auto，則元素的寬度即為內容的固有寬度。例如：img元素指向的影象的寬度是20px，則img的width也為20px。但是，可以為width指定乙個值來覆蓋原值。
需要注意的是，width變化時，height也會跟著變化，除非為height也指定乙個特定值。反過來也是。
margin-top、border-top、padding-top、height、margin-bottom、border-bottom、pdding-bottom。只有margin-top、height、margin-bottom可以設定為auto。不同於水平屬性，如果正常流中乙個塊元素的margin-top或margin-bottom的值設定為auto，則會計算為0。
取值仍是包含塊的高度的百分數值，不同的是：如果沒有顯式宣告包含塊的高度，則百分數重置為auto。
div
p
auto高度
在最簡單的情況下，正常流中塊級元素設定height：auto時，顯示時其高度將恰好足夠包含其內聯元素的行盒。高度為auto時，會在段落上設定乙個邊框，並認為沒有內邊距，這樣下邊框正好在文字最後一行的下面，上邊框正好在文字第一行的上面。
如果正常流中塊級元素的height值為auto，且只含有塊級子元素，則其預設高度是從最高塊級子元素的外邊框邊界到最低塊級子元素的外邊框邊界之間的距離。因此，外邊距會超出包含這些元素的元素。不過，如果塊級元素有內邊距或邊框，其高度則是從最高塊級子元素的上外邊距邊界到最低塊級子元素的下外邊距邊界之間的距離。例如：
div
pdiv
p
只有外邊距會發生合併，內邊距和邊框並不會。如果在包含塊設定內邊距或邊框，則其子元素的外邊距會在包含塊內，不會發生垂直外邊距合併。
負外邊距會影響垂直外邊距合併：如果兩個外邊距都為負值，則取絕對值最大的那個作為外邊距；如果乙個正，乙個負，則正的會減去負的絕對值。注意：上、下外邊距為負時，有一種拉近的效果：
div
pa paragraph
a div
div>則顯示如下：
由於段落的上外邊距為負，它被「上拉」了50px，同樣的，div的內容也被上拉了50px。
liulh1
解釋：先是-18和-15合併，得到-18，然後再與20合併，得到2，因此列表底端與h1頂端之間的距離為2px。
《CSS權威指南》學習記錄 浮動
關鍵字 float。可接受 left right none 預設值 適用於所有元素。無繼承性。乙個元素浮動時，其他元素會 圍繞 該元素。浮動元素不會與周圍元素發生外邊距合併。如果要浮動乙個非替換元素，則必須要為其宣告乙個width。讓乙個元素浮動，它會像塊級元素一樣擺放和表現，但本質不變。幾點規則 ...
《CSS權威指南》學習記錄 列表
咖啡li 茶li 牛奶li ul 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。咖啡li 牛奶li 茶li ol 列表項內部可以使用段落 換行符 鏈結以及其他列表等等。自定義列表不僅僅是一列專案，而是專案及其注釋的組合。自定義列表以 標籤開始。每個自定義列表項以 開始。每個自定義列表項的定義...
《CSS權威指南》學習記錄 定位（一）
利用定位，可以準確地定義元素框相對於其正常位置應該出現在 或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。關鍵字 position。可接受 static 預設值 relative absolute fixed。應用於所有元素。無繼承性。static 元素框正常生成。relative 元素框偏移...