CSS中的邊界margin的取值為負(fù)值說明
我要評論首先看一下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>
運行結(jié)果：
現(xiàn)在，我們想把左右兩欄位置互換一下，只需把
<div id="box1">
左欄
</div>
<div id="box2">
右欄</div>
換成：
<div id="box2">
右欄</div>
<div id="box1">
左欄
</div>
即可。
但是，當(dāng)頁面很復(fù)雜時，各種標(biāo)簽相互嵌套，代碼成百上千行，這個看似簡單的位置調(diào)換，可能需要花上很長的時間，也并一定能達(dá)到需要的效果，現(xiàn)在，我們換一種思路來實現(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;
運行后：
相關(guān)文章
CSS中使用負(fù)margin值來調(diào)整居中位置
這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15
關(guān)于css中margin的值和垂直外邊距重疊問題
這篇文章主要介紹了關(guān)于css中margin的值和垂直外邊距重疊問題,本文給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-27
