1、優(yōu)就業(yè)Web教程-負(fù)值之美：負(fù)margin在頁面布局中的應(yīng)用負(fù)數(shù)給人總是一種消極、否定、拒絕之感，不過有時利用負(fù)margin可以達(dá)到奇妙的效果，今天就表一表負(fù)值在頁面布局中的應(yīng)用。這里說的負(fù)值主要指的是負(fù)margin。關(guān)于負(fù)margin的原理建議大家看看這篇文章：本文不講原理，主要展示幾個應(yīng)用。一、左右列固定，中間列自適應(yīng)布局此例適用于左右欄寬度固定，中間欄寬度自適應(yīng)的布局。由于網(wǎng)頁的主體部分一般在中間，很多網(wǎng)頁都需要中間列優(yōu)先加載，而這種布局剛好滿足此需求。 HTML： <div class="main"> <div class="m

2、ain_body">Maindiv> div> <div class="left">Leftdiv> <div class="right">Rightdiv>CSS： body margin:0; padding:0; min-width:600px; .main float:left; width:100%; .main_body margin:0 210px; background:#888; height:200px; .left,.right float:left; width:20

3、0px; height:200px; background:#F60; .left margin-left:-100%; .right margin-left:-200px; 效果：二、去除列表右邊框 項(xiàng)目中經(jīng)常會使用浮動列表展示信息，為了美觀通常為每個列表之間設(shè)置一定的間距(margin-right),當(dāng)父元素的寬度固定式，每一行的最右端的li元素的右邊距就多余了，去除的方法通常是為最右端的li添加class，設(shè)置margin-right:0; 這種方法需要動態(tài)判斷為哪些li元素添加class，麻煩!利用負(fù)margin就可以實(shí)現(xiàn)下面這種效果： HTML： <div

4、id="test"> <ul> <li>子元素1li> <li>子元素2li> <li>子元素3li> <li>子元素4li> <li>子元素5li> <li>子元素6li> ul> div>CSS： body,ul,li padding:0; margin:0; ul,li list-style:none; #test width:320px; height:210px; background:#CCC; #test ul margin

5、-right:-10px; zoom:1; #test ul li width:100px; height:100px; background:#F60; margin-right:10px; margin-bottom:10px; float:left; 效果：三、負(fù)邊距+定位：水平垂直居中 使用絕對定位將div定位到body的中心，然后使用負(fù)margin(content寬高的一半)，將div的中心拉回到body的中心，已到達(dá)水平垂直居中的效果。 HTML：<div id="test">div>CSS： bodymargin:0;pa

6、dding:0; #test width:200px; height:200px; background:#F60; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; 效果：四、去除列表最后一個li元素的border-bottom 列表中我們經(jīng)常會添加border-bottom值，最后一個li的border-bottom往往會與外邊框重合，視覺上不雅觀，往往要移除。 HTML： <ul id="test"> <li>Testli

7、> <li>Testli> <li>Testli> <li>Testli> <li>Testli> ul>CSS： body,ul,limargin:0;padding:0; ul,lilist-style:none; #test margin:20px; width:390px; background:#F4F8FC; border-radius:3px; border:2px solid #D7E2EC; #test li height:25px; line-height:25px; padding:5px

8、; border-bottom:1px dotted #D5D5D5; margin-bottom:-1px; 效果：五、多列等高 此例關(guān)鍵是給每個框設(shè)置大的底部內(nèi)邊距，然后用數(shù)值相似的負(fù)外邊距消除這個高度。這會導(dǎo)致每一列溢出容器元素，如果把外包容器的overflow屬性設(shè)為hidden，列就在最高點(diǎn)被裁切。 HTML： <div id="wrap"> <div id="left"> <p style="height:50px">style="height:50px&q

9、uot;p> div> <div id="center"> <p style="height:100px">style="height:100px"p> div> <div id="right"> <p style="height:200px">style="height:200px"p> div> div>CSS： body,p margin:0; padding:0; #wrap overflow:hidden; width:580px; margin:0 auto; #left,#center,#right margin-bottom:-200px; padding-bottom:200px; #left float:left; width:140px; b