布局
- 流體布局，擴展窗口時，頁面中的內(nèi)容隨之擴展；
- 凍結布局，頁面內(nèi)容固定，不隨頁面的擴展而擴展；
用一個<div>包含頁面所有內(nèi)容，然后給該<div>一個固定的寬度，如：
#allcontent { width: 800px; ...... } - 凝膠布局，頁面內(nèi)容寬度固定，但外邊距歲窗口的擴展而擴展；
用一個<div>包含頁面所有內(nèi)容，然后給該<div>一個固定的寬度，指定左右外邊距為auto。如：
#allcontent { width: 800px; margin-left: auto; margin-right: auto; .... } - 浮動布局
a. 將浮動元素放在塊元素上;
b. 給浮動元素設置一個特定的寬度，不能為auto。
c. 在CSS中添加float:left/right;樣式；
d. clear屬性指定一個塊元素左邊或右邊或兩邊不能有浮動元素。 - CSS表格顯示布局
a. 劃分好表格格局
b. 給表格和行分別添加<div>元素,并分別添加id
c. 在行的區(qū)域內(nèi)，添加內(nèi)容作為單元格
d. 指定表格
display:table;
指定行
display:table-row;
指定單元格
display:table-cell；
定位
- 靜態(tài)定位
靜態(tài)定位是默認方式。 - 絕對定位（absolute）
相對于頁面邊界來定位。用一個<div>包含指定內(nèi)容，然后指定它的寬度和位置，如：
#allcontent { position: absolute; top : 150px; left: 100px; width: 800px; ...... }
注意 z-index屬性。用于指定定位元素的上下層次關系。 - 固定定位（fixed）
相對于瀏覽器窗口定位，把元素放在一個特定的固定位置上，不再移動，即時滾動頁面。
如：
xxx { position: fixed; top : 150px; left: 100px; ...... } - 相對定位（relative）
相對定位是相對于其外圍包含元素來定位
xxx { position: relative; top : 50px; left: 10px; ...... }
使用絕對，固定和相對定位時，屬性top,right,bottom,left可以用來指定元素的位置。*
