CSS的margin屬性的取值可為負(fù)值

CSS中的邊界margin的取值也可以為負(fù)值，有時(shí)候我們不敢相信，這是一個(gè)有趣的話題，負(fù)值邊界會(huì)給我們帶來(lái)更多新奇的創(chuàng)意，讓我們的工作更具刺激和挑戰(zhàn)。

來(lái)看看一個(gè)實(shí)例吧，首先看一下CSS代碼：

<style type="text/css">
#box1,#box2{
 
 float:left;
 width:200px;
 height:300px;
 color:#ffffff;
 font-size:36px;
 text-align:center;
 line-height:300px;
}
#box1{
 border:solid 5px #ff0099;
 background-image:url('bg2.jpg');
}
#box2{
 border:solid 5px #ffff00;
 background-image:url('bg3.jpg');
}

</style>
XHTML結(jié)構(gòu)如下：

<div id="box1">
 左欄
</div>
<div id="box2">
 右欄</div>

運(yùn)行結(jié)果：

現(xiàn)在，我們想把左右兩欄位置互換一下，只需把
<div id="box1">
 左欄&nbsp;&nbsp;&nbsp;
</div>
<div id="box2">
 右欄</div>

換成：
<div id="box2">
 右欄</div>
<div id="box1">
 左欄&nbsp;&nbsp;&nbsp;
</div>
即可。
但是，當(dāng)頁(yè)面很復(fù)雜時(shí)，各種標(biāo)簽相互嵌套，代碼成百上千行，這個(gè)看似簡(jiǎn)單的位置調(diào)換，可能需要花上很長(zhǎng)的時(shí)間，也并一定能達(dá)到需要的效果，現(xiàn)在，我們換一種思路來(lái)實(shí)現(xiàn)：
#box1{
 border:solid 5px #ff0099;
 background-image:url('bg2.jpg');
 margin-left:105px;
 
}
#box2{
 border:solid 5px #ffff00;
 background-image:url('bg3.jpg');
 margin-left:-420px;

運(yùn)行后：

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)