CSS的margin屬性的取值可為負值

CSS中的邊界margin的取值也可以為負值，有時候我們不敢相信，這是一個有趣的話題，負值邊界會給我們帶來更多新奇的創意，讓我們的工作更具刺激和挑戰。

來看看一個實例吧，首先看一下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結構如下：

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

運行結果：

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

換成：
<div id="box2">
 右欄</div>
<div id="box1">
 左欄&nbsp;&nbsp;&nbsp;
</div>
即可。
但是，當頁面很復雜時，各種標簽相互嵌套，代碼成百上千行，這個看似簡單的位置調換，可能需要花上很長的時間，也并一定能達到需要的效果，現在，我們換一種思路來實現：
#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;

運行后：

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈