1、position.
1)position:relative; 相對定位. 以自己所在位置為參考點.
自己所在位置為 top:0; left:0;
設定position:relative;後，元素位置不變，而且會佔據自己所在位置.
通過設定left, top,(這兩個很常用) right,bottom,來改變元素所在的位置，
此時該元素屬於浮動狀態，但自己最初的位置不會被其他元素占用，自己也不會佔據其它元素位置.
2)position:absolute; 絕對定位. 以body左上角為參考點.
body左上角位置為 top:0; left:0;
設定position:absolute;後，元素不佔據位置，會浮動起來，原來位置會被其他元素佔據.
可通過設定left, top,(這兩個很常用) right,bottom,來改變元素所在的位置，
對兩個元素都設定position:absolute;時，可能會出現兩個元素覆蓋的現象，
此時可以通過設定z-index:數值; 對它進行調節，數值大的會顯現在上面.
body左上角位置為 top:0; left:0;
設定position:fixed;後，此元素會定在頁面所在的位置，不會隨著頁面的重新整理而改變.
而且此元素會浮動起來，不會佔據任何位置，自己本身位置還會被其它元素佔據.
可通過設定left, top,(這兩個很常用) right,bottom,來改變元素所在的位置.
4)position:relative; position:absolute; 聯用：
當元素設定 position:relative; 不設定其它改變值時，就表示此時元素是在給它的子級元素設定參考點，
它的子級元素設定position:absolute;此時參考點便是父級元素所在的位置，
而且子級元素會隨著父級元素的改變而改變.
2、margin. padding.
1)margin. 元素與父級元素間的邊距關係.
margin-left:10px; 左邊距，margin-top:20px; 上邊距，margin-right:30px; 右邊距，margin-bottom:40px; 下邊距
margin:10px 20px 30px 40px; 表示的順序是 上 10px，右20px， 下 30px，左40px.
margin:10px 20px; 表示的是上 下是10px，左 右是20px，
margin:數值 auto: 可以使元素左右居中.
margin 有時設定單個值時會出現無反應的情況，此時可以嘗試同時設定4個值.
2)padding. 元素與子級元素間的邊距關係.
padding-left:10px; 左邊距，padding-top:20px; 上邊距，padding-right:30px; 右邊距，padding-bottom:40px; 下邊距
padding:10px 20px 30px 40px; 表示的順序是 上 10px，右20px， 下 30px，左40px.
padding:10px 20px; 表示的是上 下是10px，左 右是20px，
padding 有時設定單個值時會出現無反應的情況，此時可以嘗試同時設定4個值.
3)margin. padding. 區別：
3、float
當元素設定float時，此時元素會浮動起來，不會佔據位置.
float:left; 左浮動， float:right; 右浮動，
兩個元素只有同時設定float時，這兩個元素才會排列在一排上，
若只有第乙個元素設定float，則第二個元素會在第乙個元素下面的位置，
若只有第二個元素設定float，則第乙個元素不浮動，不會並列在一排，
當有多個元素時，會使下面的元素出現浮動的現象，此時便需要清除浮動，
clear:left; 清除左浮動， clear:right; 清除右浮動，
clear:both; 清除所有浮動 最常用
4、box-sizing.
在規劃頁面時，常會因為邊框要計算寬度和高度.
box-sizing:border-box; 這樣設定可以使邊框不計入長度與寬度的計算，
以便我們更好的進行頁面的規劃 .
注釋：1、2、3為css中布局的知識，4是css3中布局的知識.
top,left,right,bottom 設定值時，值為0時 後面不需要寫px，值為其它值時，必須要寫上px才有效.
傳統的table布局與css布局 原創
傳統table布局方式利用了html的table元素所有的0邊框特性。由於table元素可以在顯示時，使得單元格邊框和間距被設定為0，即不顯示邊框，所以可將網頁中的各個元素按照版式劃分後，分別放入 的各個單元格中，從而實現了複雜的排版組合效果。文字顯示 css布局，採用div，div可以理解為圖層或...
第 27 章 CSS 傳統布局 上
學習要點 1.布局模型 2.布局 3.浮動布局 主講教師 李炎恢 本章主要 html5 中 css 早期所使用的傳統布局，很多情況下，這些布局方式還是非常有用的。一 布局模型 在早期沒有平板和智慧型手機等移動裝置大行其道的時期，web 頁面的設計主要是面向 pc 端電腦解析度展開的。這種解析度比例比...
前端布局之傳統布局
每個元素都有乙個預設的display屬性，但我們可以隨時重寫他。元素分為塊級元素和內聯 內聯級 元素，1 塊級元素的display預設為block,樣式為新開一行並盡量撐滿容器，能夠設定尺寸如寬度和高度 2 內聯元素的display 預設為 inline,樣式為嵌入在行內，不換行也不能設定尺寸 3 ...