css之佈局那些事

實現佈局的三個最基本的原子技術

浮動 float

負邊距 negative margin

相對定位 relative position

這是實現佈局的三個最基本的原子技術。只要巧妙組合，並加以靈活運用，就能「拼」出各類佈局的實現方案。

實現雙飛翼佈局：

嘗試之路考慮如下DOM結構：

1 2 3 4 5 6 7 8

< div  id = "page" >            < div  id = "hd" ></ div >               < div  id = "bd" >                        < div  class = "main" ></ div >                        < div  class = "sub" ></ div >                        < div  class = "extra" ></ div >               </ div >           < div  id = "ft" ></ div ></ div >

利用浮動元素的負邊距來定位：

1 2 3 4 5 6 7 8 9 10 11

.main {                     float :  left ;                    width :  100% ;      }  . sub  {                    float :  left ;                     width :  190px ;                     margin-left :  -100% ;    }   .extra {                       float :  left ;                       width :  190px ;                       margin-left :  -190px ;      }

這樣咱們獲得了第一個嘗試頁面 點擊這裏查看效果
能夠看出，經過簡單的負邊距，已經讓sub和extra定位到正確的位置。剩下的問題是如何讓main也定位到正確的位置。
一個天然的想法是，給main的容器#bd添加padding:

1 2 3

#bd {                    padding :  0  230px  0  190px ;      }

點擊這裏查看效果
這樣能讓main定位到正確的位置，但sub和extra的位置不對了。這是一個思考的關卡。既然sub和extra的位置不對，那就想辦法調整到正確的位置。相對定位隆重登場：

1 2 3 4 5 6 7 8 9 10 11 12

. sub  {                     float :  left ;                     width :  190px ;                     margin-left :  -100% ;                     position :  relative ;                     left :  -190px ;    }      .extra {                       float :  left ;                       width :  230px ;                       margin-left :  -230px ;                       position :  relative ;                       right :  -230px ;    }

點擊這裏查看完成頁面 

這意味着HTML結構和CSS佈局在必定程度上解耦了，咱們開發HTML代碼時，從內容出發便可，無需過多的考慮佈局。這正是漸進加強在前端工做流程上的體現。
若是把三欄佈局比做一隻大鳥，能夠把main當作是鳥的身體，sub和extra則是鳥的翅膀。這個佈局的實現思路是，先把最重要的身體部分放好，而後再將翅膀移動到適當的地方。所以請允許我給這個佈局實現取名爲雙飛翼佈局（Flying Swing Layout）.
就如上圖中的鳥有各類姿式同樣，利用雙飛翼佈局，咱們也能夠實現各類佈局。這裏有個嘗試頁面，利用雙飛翼，實現了一套柵格化佈局系統。

優勢

實現了內容與佈局的分離，即Eric提到的Any-Order Columns.

main部分是自適應寬度的，很容易在定寬佈局和流體佈局中切換。

任何一欄均可以是最高欄，不會出問題。

須要的hack很是少（就一個針對ie6的清除浮動hack:_zoom: 1;）

在瀏覽器上的兼容性很是好，IE5.5以上都支持。

不足

main須要添加一個額外的包裹層。

等待你的發現與反饋。

雙飛翼的佈局很是靈活，只要調整css代碼就能夠搞定一切。最近在一個論壇項目中準備嘗試使用這個佈局。但願你們有更好的佈局方法必定要多多分享。

 

css中的正內補丁和負外補丁（要結合隱藏溢出來用）

這是爲了解決多列布局中沒有設置高度的時候讓多列等高的（通常設值比較大），固然也是能夠用多列布局column來實現

padding-bottom: 1253px;

margin-bottom: -1253px;

position

定位標籤：position

包含屬性：relative（相對）

                   absolute（絕對）

1.position:relative; 若是對一個元素進行相對定位，首先它將出如今它所在的位置上。而後經過設置垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。（再一點，相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其餘框）

相對定位：relative 沒有脫離正常的文檔流，被設置元素相對於其原始位置而進行定位，其原始佔位信息仍存在

2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文檔流，所以不佔據空間。普通文檔流中元素的佈局就像絕對定位的元素不存在時同樣。（由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其餘元素並能夠經過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）

絕對定位：ablution 脫離了文檔流與浮動模型，獨立於其餘對象而存在，沒有佔位。

3.父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置再也不相對於瀏覽器左上角，而是相對於父窗口左上角

溢出：overflow

display：none,block,inline-blck,不顯示佔位

visibility:hidden顯示佔位

盒子模型的理解：

內容（CONTENT）就是盒子裏裝的東西；

而填充(PADDING)就是怕盒子裏裝的東西（貴重的）損壞而添加的泡沫或者其它抗震的輔料；

邊框(BORDER)就是盒子自己了；至於邊界(MARGIN)則說明盒子擺放的時候的不能所有堆在一塊兒，要留必定空隙保持通風，同時也爲了方便取出。在網頁設計上，內容常指文字、圖片等元素，可是也能夠是小盒子（DIV嵌套），與現實生活中盒子不一樣的是，現實生活中的東西通常不能大於盒子，不然盒子會被撐壞的，而CSS盒子具備彈性，裏面的東西大過盒子自己最多把它撐大，但它不會損壞的。

填充只有寬度屬性，能夠理解爲生活中盒子每一個HTML標記均可看做一個盒子；

 所以，常出現的外邊距是盒子外面的，而內邊距的盒子包含的，會影響盒子的寬高