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結(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>
即可。
但是，當頁面很復雜時，各種標簽相互嵌套，代碼成百上千行，這個看似簡單的位置調(diào)換，可能需要花上很長的時間，也并一定能達到需要的效果，現(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中使用負margin值來調(diào)整居中位置的方法,文中同時提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下2015-07-15
關(guān)于css中margin的值和垂直外邊距重疊問題
這篇文章主要介紹了關(guān)于css中margin的值和垂直外邊距重疊問題,本文給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-27
