1.塊區域介紹
1: <body>
2: <div>
3: <p>This is a pargraph.</p>
4: </div>
5: </body>
p 元素的包含塊是 div 元素，因為作為塊級元素，表單元格或行內元素，這是最近的祖先元素，類似的，div的包含塊是 body. 因此，p的布局依賴於 div的布局，而div的布局則依賴於 body的布局。
塊級元素會自動重啟一行。
2. 塊級元素
正常流布局
一般的，一個元素的width被定義為從左內邊界到右內邊界，height則是從上內邊界到下內邊界的距離。
不同的寬度，高度，內邊距和外邊距相結合，就可以確定文檔的布局。
水平布局
簡單規則，正常流中塊級元素框的水平部分 總和 就等於父元素的 width . 假設一個div中有兩個段落，這兩個段落的外邊距設置為 1 em，段落內容寬度 width 在加上其左，右內邊距，邊框或外邊距加在一起正好是div內容的width.
7大屬性，margin-left, border-left, padding-left, width, padding-right, border-right, margin-right
這 7 個屬性的值加在一起必須是父塊元素的width值. ( 其中 margin-left, margin-right, width 可以設置成auto ) 設置成 auto, 會按照以上規則自動匹配到父塊的寬度，例如 7個屬性的和必須為 400像素，沒有設置內邊距或邊距 ( 默認為 0) 而右外邊距和width設置為100px, 左外邊距為 auto,那么左外邊距的寬度將是200px. 可以用 auto 彌補實際值與所需綜合的差距。注：如果3個可以設置auto,都沒設置成auto,而且寬度加在一起還不夠父塊區域的寬度的話，會默認將margin-right設置成 auto來滿足總和與父塊相等的要求。
如果兩個外邊距設置成 auto,那么，它們會是等長的，因此將元素在其父親元素中居中。
如果這3個屬性都設置成auto, 那么, 外邊距會是0，而讓 width 盡可能的長。
可以使用百分數，但是邊框的寬度不能是百分數。
垂直布局
7大屬性，margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom , 同樣，這7個屬性的值的總和是父元素 height 值。
其中 , margin-top, height, margin-bottom 也可以設置成 auto. ( 如果 margin-top, margin-bottom設置成 auto, 那么它們就會自動設置成 0 ).
3.浮動與定位( 確認基本布局 )
1) 浮動
一個元素浮動時，其他內容會“環繞”該元素，浮動元素要設置一個width.
float ( left , right , none ) , none 的情況一般用在文檔內部，用來覆蓋式樣表，一般很少使用 none.
浮動元素會自動生成一個塊級框。
浮動元素規則
浮動元素不能超過包含它的塊的左右邊界。（1,2 左右邊界受限 )
浮動元素之前如果出現浮動元素，則必須在該浮動元素之后（不能覆蓋 ) ( 2 左邊受限 ）
如果浮動元素加一起太寬，會自動向下。。（寬度受限 )
垂直方向要頂頭不能超過塊區域，同樣不能超過在它上面的浮動元素。( 上邊界受限 )
第一個浮動元素之后，第二個在它的下邊，因為他們，第3個在它的右邊。（ 2 上邊受限 )
浮動元素的頂端，不能比之前所有浮動元素或塊級別元素的頂端更高 ( 頂端受限 )
浮動元素之間左右的邊界不能覆蓋，如下1,2,3, 之間不能覆蓋 ( 元素之間受限 )
浮動元素會盡可能高的放置
浮動元素會盡可能向左向右
clear , 可以防止指定了 clear 元素的兩邊存在浮動元素
2) 定位
利用定位，可以准確的定義元素框相對於其正常位置應該出現在哪里，或者相對於父元素，另一個元素甚至瀏覽器窗口。
position : static | relative | absolute | fixed
static : 元素框正常生成
relative : 元素框偏移某個距離
absolute : 元素框從文檔流完全刪除，並相對於其包含塊定。包含塊可能是文檔中的另一個元素或初始包含塊。
fixed : 類似 absolute，不過其包含塊是視窗本身。
包含塊：
根元素( html或body ) , 初始包含塊是一個視窗大小的矩形.
非根元素 :
- 非根元素, 如果其 position是 relative 或 static, 則包含塊由最近的塊級框，表單元格或行內塊構成。
- 非根元素, 如果其 position是 absolute , 包含塊為最近的 position值不是 static的祖先元素
這里有一點很重要，元素可以定位到其包含塊的外面。
4. 實踐經驗
- 九宮格顯示，第1季
html
1 <!doctype html> 2 <html> 3 <head> 4 <link rel="stylesheet" type="text/css"/ href="aa.css"> 5 <title>practice</title> 6 </head> 7 <body> 8 <div id="container"> 9 <div id="top"> 10 <div id="topleft"> 11 <p>1</p> 12 </div> 13 <div id="topmid"> 14 <p>2</p> 15 </div> 16 <div id="topright"> 17 <p>3</p> 18 </div> 19 </div> 20 <div id="mid"> 21 <div id="midleft"> 22 <p>4</p> 23 </div> 24 <div id="midmid"> 25 <p>5</p> 26 </div> 27 <div id="midright"> 28 <p>6</p> 29 </div> 30 </div> 31 <div id="bottom"> 32 <div id="bottomleft"> 33 <p>7</p> 34 </div> 35 <div id="bottommid"> 36 <p>8</p> 37 </div> 38 <div id="bottomright"> 39 <p>9</p> 40 </div> 41 </div> 42 </div> 43 </body> 44 </html>
CSS
1 body { 2 margin: 0px; 3 padding: 0px; 4 } 5 6 p { 7 font-size: 20px; 8 text-align: center; 9 } 10 11 #container { 12 margin: 0px; 13 padding: 0px; 14 background: red; 15 position: absoult; 16 height:738px; 17 } 18 19 #top { 20 21 margin-top: auto; 22 border-top: 1px; 23 padding-top: 1px; 24 height: 33%; 25 padding-bottom: 1px; 26 border-bottom: 1px; 27 margin-bottom: auto; 28 background: blue; 29 } 30 31 #mid { 32 33 margin-top: auto; 34 border-top: 1px; 35 padding-top: 1px; 36 height: 33%; 37 padding-bottom: 1px; 38 border-bottom: 1px; 39 margin-bottom: auto; 40 background: yellow; 41 } 42 43 #bottom { 44 45 margin-top: auto; 46 border-top: 1px; 47 padding-top: 1px; 48 height: 33%; 49 padding-bottom: 1px; 50 border-bottom: 1px; 51 margin-bottom: auto; 52 background: green; 53 } 54 55 #topleft { 56 float:left; 57 background: yellow; 58 margin-left: auto; 59 border-left: 1px; 60 padding-left: 1px; 61 width: 33%; 62 padding-right: 1px; 63 border-right: 1px; 64 margin-right: auto; 65 height: 100%; 66 67 } 68 #topmid { 69 float:left; 70 background: green; 71 margin-left: auto; 72 border-left: 1px; 73 padding-left: 1px; 74 width: 33%; 75 padding-right: 1px; 76 border-right: 1px; 77 margin-right: auto; 78 height: 100%; 79 } 80 #topright { 81 float:left; 82 background: red; 83 margin-left: auto; 84 border-left: 1px; 85 padding-left: 1px; 86 width: 33%; 87 padding-right: 1px; 88 border-right: 1px; 89 margin-right: auto; 90 height: 100%; 91 } 92 #midleft { 93 float:left; 94 background: blue; 95 margin-left: auto; 96 border-left: 1px; 97 padding-left: 1px; 98 width: 33%; 99 padding-right: 1px; 100 border-right: 1px; 101 margin-right: auto; 102 height: 100%; 103 } 104 #midmid { 105 float:left; 106 background: yellow; 107 margin-left: auto; 108 border-left: 1px; 109 padding-left: 1px; 110 width: 33%; 111 padding-right: 1px; 112 border-right: 1px; 113 margin-right: auto; 114 height: 100%; 115 } 116 117 #midright { 118 float:left; 119 background: green; 120 margin-left: auto; 121 border-left: 1px; 122 padding-left: 1px; 123 width: 33%; 124 padding-right: 1px; 125 border-right: 1px; 126 margin-right: auto; 127 height: 100%; 128 } 129 #bottomleft { 130 float:left; 131 background: red; 132 margin-left: auto; 133 border-left: 1px; 134 padding-left: 1px; 135 width: 33%; 136 padding-right: 1px; 137 border-right: 1px; 138 margin-right: auto; 139 height: 100%; 140 } 141 #bottommid { 142 float:left; 143 background: blue; 144 margin-left: auto; 145 border-left: 1px; 146 padding-left: 1px; 147 width: 33%; 148 padding-right: 1px; 149 border-right: 1px; 150 margin-right: auto; 151 height: 100%; 152 } 153 #bottomright { 154 float:left; 155 background: yellow; 156 margin-left: auto; 157 border-left: 1px; 158 padding-left: 1px; 159 width: 33%; 160 padding-right: 1px; 161 border-right: 1px; 162 margin-right: auto; 163 height: 100%; 164 }