CSS中的界限margin的赋值为负值表明

2021-03-12 11:52 jianzhan
看来看1个案例吧
     最先看1下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>

运作結果:



如今,大家想把上下两栏部位交换1下,只需把
<div id="box1">
 左栏&nbsp;&nbsp;&nbsp;
</div>
<div id="box2">
 右栏</div>

换为:
<div id="box2">
 右栏</div>
<div id="box1">
 左栏&nbsp;&nbsp;&nbsp;
</div>
便可。
可是,当网页页面很繁杂时,各种各样标识互相嵌套循环,编码不计其数行,这个看似简易的部位替换,将会必须花上很长的時间,也并1定能做到必须的实际效果,如今,大家换1种思路来完成:
#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:⑷20px;

运作后: