負margin在頁面佈局中的應用

 

關於負margin的原理建議你們看看這篇文章：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

1、

左右列固定，中間列自適應佈局

此例適用於左右欄寬度固定，中間欄寬度自適應的佈局。因爲網頁的主體部分通常在中間，不少網頁都須要中間列優先加載，而這種佈局恰好知足此需求。

HTML :

CSS:

效果：

2、

 

去除列表右邊框

爲了美觀一般爲每一個列表之間設置必定的間距（margin-right）,當父元素的寬度固定式，每一行的最右端的li元素的右邊距就多餘了，去除的方法一般是爲最右端的li添加class，設置margin-right:0; 這種方法須要動態判斷爲哪些li元素添加class，麻煩！！！利用負margin就能夠實現下面這種效果：

HTML:

CSS:

 

效果：

3、

負邊距+定位：水平垂直居中

 使用絕對定位將div定位到body的中心，而後使用負margin（content寬高的一半），將div的中心拉回到body的中心，已到達水平垂直居中的效果

 

4、

去除列表最後一個li元素的border-bottom

 

列表中咱們常常會添加border-bottom值，最後一個li的border-bottom每每會與外邊框重合，視覺上不雅觀，每每要移除。

HTML:

CSS:

預覽效果：

5、

多列等高

HTML:

 

CSS:

 

 

效果：