BULLET POINT
- 瀏覽器使用流在頁面中放置元素。
- 塊元素從上向下流,各元素之間有一個換行。默認的,每個塊元素會占瀏覽器窗口的整個寬度。
- 內聯元素在塊元素內部從左上方流向右下方。如果需要多行,瀏覽器會換行,在垂直方向上擴展外圍塊元素,來包含這些內聯元素。
- 正常頁面流中的兩個塊元素上下相鄰的外邊距會折疊為最大外邊距的大小,或者如果兩個外邊距大小相同,則會折疊成為一個外邊距。
- 浮動元素會從正常流中取出,浮動到左邊或者右邊。
- 浮動元素放在塊元素之上,不會影響正常的頁面流。不過,內聯元素會考慮浮動元素的邊界,圍繞著這個浮動元素。
- clear屬性用來指定一個塊元素左邊或右邊(或者左右兩邊)不能有浮動元素。設置了clear屬性的塊元素會下移,知道它旁邊沒有塊元素。
- 浮動元素必須有特定的寬度,不能設置為auto。
- 流體布局是指,其中內容的寬度是固定的,不會隨著瀏覽器窗口擴展或收縮。這有一個好處,可以對設計提供更多控制,不過也要付出代價,這樣就不能有效地使用瀏覽器寬度了。
- 凝膠布局是指,其中內容寬度是固定的,但是外邊距會隨著瀏覽器窗口擴展或收縮。凝膠布局通常會把內容放在中央。這樣凍結布局同樣有好處,不過通常更美觀。
- position屬性可以設置為4個值:stactic(靜態)、absolute(絕對)、fixed(固定)和relative(相對)。
- 靜態定位是默認方式,將元素放在頁面的正常流中。
- 絕對定位允許將元素放在頁面上的任何位置。默認地,絕對定位元素相對于頁面邊界來放置。
- 如果一個絕對定位元素嵌套在另一個定位元素中,這個元素就會相對于外包含元素定位。
- 絕對定位可以使用z-index屬性分層放置,使一個元素在另一個元素上面。z-index值越大,說明它層次越高(在屏幕上離你越近)。
- 固定定位元素總是相對于瀏覽器窗口定位,頁面滾動時,固定定位的元素不會移動。頁面中的其他內容會相對在這些固定定位元素線面正常滾動。
- 相對定位元素首先正常流入頁面,然后按指定的量偏移,從而留出它們原先所在的空間。
- 使用相對定位時,left、right、top和bottom是指距正常流中該元素位置的偏移量。
- CSS表格顯示允許一種表格布局來擺放元素。
- 要創建CSS表格顯示,需要使用對應表格的一個塊元素,對應行的塊元素,以及對應單元格的塊元素。通常這些塊元素都是<div>元素。
- 如果需要建立多欄布局,而且內容欄是均勻的,表格顯示就是一個很好的布局策略。