CSS布局基礎
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的祖先元素
這裡有一點很重要，元素可以定位到其包含塊的外面。