上次寫到三列布局,其中提到浮動元素margin為負值時的應用,今天就來總結一下,它的用處何在.
首先,先來探究一下,當一個元素的margin為負值時,都會有哪些影響.
其一,對自身的影響.
當元素不存在width屬性或則width:auto的時候,負值margin會增加元素的寬度.(注意:這僅僅是在元素不存在width屬性或則width屬性默認的時候,如果有寬度設置,margin-left和margin-right為負值時,會發生位移.)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>驗證</title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{background-color: #f00;width: 800px;margin: 100px auto 0; height: 300px;font-size: 30px;} .box{background-color: #007AFF;margin-left: -100px;height: 200px;} </style> </head> <body> <div class="wrap"> 最外層的寬度為800px <div class="box">里層的元素設置了margin-left:-100px</div> </div> </body> </html>
代碼效果如圖,里層元素的寬度增加了100px,margin-left和margin-right為負值的時候都可以增加元素的寬度.
而margin-top為負值的時候,不會增加寬度,而是會讓元素上移.
margin-bottom為負值的時候不會位移,而是會減少自身供css讀取的高度.
那么問題來了,什么是減少自身供css讀取的高度呢?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>驗證</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{background-color: #007AFF;margin-bottom: -100px;height: 200px;} .t{background-color: #f00;height: 20px;width: 200px;} </style> </head> <body> <div class="box">高度為200px</div> <div class="t">高度為20px</div> </body> </html>
可以看出,類名為box的元素的高度依舊是200px,瀏覽器依舊將整個元素渲染出來了,如果用console.log($(".box").height());打印box的高度,其高度依舊是200px,但是,其在瀏覽器中實際讀取的高度減少到了100px,類名為t的元素的位置為證.
其二,對文檔流的影響
元素如果用了margin-left:-100px;其會向左位移100px,但是和相對定位不同的是,在其后面的元素會進行補位,也就是后面的行內元素會緊貼在此元素之后.即,如果不脫離文檔流不浮動的話,margin為負值的元素不會破壞頁面的文檔流.
當然,如果你用負margin上移一個元素,接下的元素都會跟着上移.
其三,對浮動元素的影響
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三欄布局的實現方案</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ margin: 100px auto 0; border: 1px solid #000; width: 300px; } .clearfix::after{ display: block; content: ""; height: 0; font-size: 0; clear: both; } .clearfix{ zoom: 1; } .flb{ float: left; width: 100px; height: 100px; /*margin-left: -25px;*/ } .flbox1{background-color: rgba(33, 114, 214, 0.8);} .flbox2{background-color: rgba(255, 82, 0, 0.8);} .flbox3{background-color: rgba(90, 243, 151, 0.8);} </style> </head> <body> <div class="container clearfix"> <div class="flb flbox1">box1</div> <div class="flb flbox2">box2</div> <div class="flb flbox3">box3</div> </div> </body> <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> </script> </html>
其效果為:
當給他們都設置margin-left:-25px;后,其效果為:
這是由於,每個box元素都發生了左位移,而其后的元素緊跟着之后,也發生了一次位移,這就形成了上面的結果.
即,負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。聖杯布局、雙飛翼布局啊什么的，都是利用這個原理實現的。
其四,對絕對定位的影響
我經常用之來進行已知寬高元素的上下左右居中.
<div class="absolute"></div> .absolute{ position: absolute; top:50%; left:50%; height: 200px; width: 200px; background-color: #ccc; margin-top: -100px; margin-left: -100px; }
代碼如上,對於絕對定位的元素,設置了margin負值之后,會根據它定位的位置進行再位移.
說完margin為負值的影響,再來說說其應用.
一、適用於左右固定,中間自適應的三列布局(類聖杯布局,雙飛翼布局),前面的內容和以前的博文有介紹,不再詳解.
二、去除列表右邊框.
我們經常會遇到這種情況,要求兩邊對齊,中間元素平均分布的布局,類似於下圖:
做成這種布局,比較笨的方法就是都浮動之后,再對最后第一個進行特殊處理,不過這需要后端的配合,而另外一種就是使用彈性布局,但由於其兼容性,現今並不太推薦.
而利用margin-left為負值,能增加元素寬度的特性,我們可以輕松實現上面的布局.
代碼如下:
<div class="container"> <ul class="list"> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> <li>我是一個列表</li> </ul> </div> .container{ margin:0 auto; width: 500px; border: 1px #ccc solid; margin-bottom: 20px; } .list{ overflow: hidden; margin-right: -10px; } .list li{ width:92px; height: 92px; background-color: #ccc; margin-bottom: 20px; float: left; margin-right: 10px; }
效果如圖:
由於其外層list使用了margin-left為負值,增加了其寬度,其中的元素排列顯示出來就呈現出如上效果,簡單高效.
其計算公式：
假設一橫列展示的數量為x，元素見的間距為y，父距寬度z
則元素的寬度＝（z－y（x－1））/x
本例中li的寬度為（500－10（5-1））/5=92
三、margin負值+定位:實現元素水平垂直居中.
上面已有提到,不多贅述.
四、去除列表最后一個li元素的border-bottom
很多情況下，我們會用li標簽來模擬表格，再給li標簽添加下邊距的時候，最后一個li標簽表格會和父元素的邊框靠在一起，會顯得整個“table”的底部邊框會比其他的邊粗一些！
<style> ul.table{ border:1px #ccc solid; margin-top:100px; } ul.table li{ border-bottom: 1px #ccc solid; list-style: none; } </style> <ul class="table"> <li>I am li</li> <li>I am li</li> <li>I am li</li> <li>I am li</li> <li>I am li</li> </ul>
這時,如果給li添加一個margin-bottom:-1px;就會正常.
五、多列等高(這種方案應用也比較多,建議詳細看下)
<style> .container{ margin:0 auto; width: 100%; overflow: hidden; } .left{ height: 50px; width: 33.33%; margin-bottom: -5000px; padding-bottom: 5000px; float: left; background-color: rgba(33, 114, 214, 0.8); } .main{ height:100px; margin-bottom: -5000px; width: 33.33%; float: left; padding-bottom: 5000px; background-color: rgba(255, 82, 0, 0.8); } .right{ width: 33.33%; float: left; margin-bottom: -5000px; padding-bottom: 5000px; background-color: rgba(90, 243, 151, 0.8) } </style> <div class="container"> <div class="left"> height:50px</div> <div class="main">height:100px</div> <div class="right">height:30px</div> </div>
雖然設置了5000px的內邊距,但是又用margin為負值來進行了抵消,它還是原來的高度,但顯示出來的效果卻是5000px+本來高度,這時候,再通過父元素的overflow:hidden;以最高元素的高度進行一刀切,所以看起來就是三個登高的div了.
暫時就這么多,如果有發現,會繼續補充.......