一、負邊距與浮動佈局 1.1、負邊距 所謂的負邊距就是margin取負值的情況，如margin:-100px，margin:-100%。當一個元素與另一個元素margin取負值時將拉近距離。常見的功能如下： 1.1.1、向上移動 當多個元素同時從標準流中脫離開來時，如果前一個元素的寬度為100%寬度 ...
一、負邊距與浮動佈局
1.1、負邊距
所謂的負邊距就是margin取負值的情況，如margin:-100px，margin:-100%。當一個元素與另一個元素margin取負值時將拉近距離。常見的功能如下：
1.1.1、向上移動
當多個元素同時從標準流中脫離開來時，如果前一個元素的寬度為100%寬度，後面的元素通過負邊距可以實現上移。當負的邊距超過自身的寬度將上移，只要沒有超過自身寬度就不會上移，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>負邊距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { height: 100px; background: lightblue; width: 100%; float: left; } #div2 { height: 100px; background: lightgreen; width: 30%; float: left; margin-left: -100%; } </style> </head> <body> <div id="div1">div1 </div> <div id="div2">div2 </div> </body> </html>
margin-left:-29%時運行效果：
margin-left:-30%時運行效果：
margin-left:-100%時運行效果：
1.1.2、去除列表右邊框
開發中常需要在頁面中展示一些列表，如商品展示列表等，如果我們要實現如下佈局：
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>負邊距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 800px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; } </style> </head> <body> <div id="div1"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> </body> </html>
運行後的結果：
但是上面的效果中右邊多出了20px的距離，底下多出20px空白，解決方法如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>負邊距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 780px; height: 380px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; } #div2{ margin-right: -20px; } </style> </head> <body> <div id="div1"> <div id="div2"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> </div> </body> </html>
方法是使用了邊距摺疊，可以在前面的文章中查看到細節，基本原理如下圖所示：
1.1.3、負邊距+定位，實現水平垂直居中
具體請參考《CSS3與頁面佈局學習總結（三）——BFC、定位、浮動、7種垂直居中方法》
1.1.4、去除列表最後一個li元素的border-bottom
方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>負邊距</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #news { width: 200px; border: 2px solid lightblue; margin: 20px 0 0 20px; } #news li{ height: 26px; line-height: 26px; border-bottom: 1px dashed lightblue; } .lastLi{ margin-bottom:-1px ; } </style> </head> <body> <div id="news"> <ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> <li>Item D</li> <li class="lastLi">Item E</li> </ul> </div> </body> </html>View Code
方法二：
使用CSS3中的新增加選擇器，選擇最後一個li，不使用類樣式，好處是當li的個數不確定時更加方便。
如果li的border-bottom顏色與ul的border顏色是一樣的時候，在視覺上是被隱藏了。如果其顏色不一致的時候還是有問題，給ul寫個overflow：hidden；就可以解決這個問題。
練習：
1.2、雙飛翼佈局
經典三列佈局，也叫做聖杯佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：
1、三列佈局，中間寬度自適應，兩邊定寬；
2、中間欄要在瀏覽器中優先展示渲染；
3、允許任意列的高度最高；
4、要求只用一個額外的DIV標簽；
5、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標簽的情況下，聖杯佈局已經非常完美，聖杯佈局使用了相對定位，以後佈局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對佈局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼佈局，實現的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>雙飛翼</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; } #container { width: 90%; margin: 0 auto; height: 100%; } #header, #footer { height: 12.5%; background: deepskyblue; } #main { height: 75%; } #center, #left, #right { height: 100%; float: left; } #center { width: 100%; background: lightgreen; } #right { background: lightblue; width: 20%; margin-left: -20%; } #left { background: lightcoral; width: 20%; margin-left: -100%; } #main-inner { padding-left: 20%; } </style> </head> <body> <div id="container"> <div id="header"> header </div> <div id="main"> <div id="center"> <div id="main-inner"> center </div> </div> <div id="left"> left </div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </div> </body> </html>
運行效果：
示例中增加一個main-inner的目的是因為當left上移時與center重疊了，left覆蓋了center，通過main-inner的padding將left占用的位置空出。
1.3、多欄佈局
1.3.1、柵格系統
欄柵格系統就是利用浮動實現的多欄佈局，在bootstrap中用的非常多，這裡以一個980像素的寬實現4列的柵格系統，示例代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>柵格系統</title> <style type="text/css"> * { padding: 0; margin: 0; } html, body { height: 100%; } #container { width: 980px; margin: 0 auto; height: 10%; } #container div { height: 100%; } .col25 { width: 25%; background: lightgreen; float: left; } .col50 { width: 50%; background: lightblue; float: left; } .col75 { width: 75%; background: lightcoral; float: left; } </style> </head> <body> <div id="container"> <div class="col50"> A </div> <div class="col50"> B </div> <div class="col25"> C </div> </div> </body> </html>
運行結果：
同樣的原理可以輕易擴展到8列，10列，16列的柵格系統。
1.3.2、多列佈局
柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列佈局模塊，如果需要實現多列佈局模塊先看看這幾個CSS3屬性：
column-count：<integer> | auto
功能：設置或檢索對象的列數
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<integer>： 用整數值來定義列數。不允許負值
auto： 根據 <' column-width '> 自定分配寬度
column-gap：<length> | normal
功能：設置或檢索對象的列與列之間的間隙
適用於：定義了多列的元素
計算值：絕對長度值或者normal
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：設置或檢索對象的列與列之間的邊框。與border屬性類似。
適用於：定義了多列的元素
columns：<' column-width '> || <' column-count '>
功能：設置或檢索對象的列數和每列的寬度
適用於：除table外的非替換塊級元素, table cells, inline-block元素
<' column-width '>： 設置或檢索對象每列的寬度
<' column-count '>： 設置或檢索對象的列數
示例代碼：
<!DOCTYPE html> <html> <
