CSS的margin属性的取值可为负值

概述CSS中的边界margin的取值也可以为负值，有时候我们不敢相信，这是一个有趣的话题，负值边界会给我们带来更多新奇的创意，让我们的工作更具刺激和挑战。来看看一个实例吧，首先看一下CSS代码：<style type="text/css">#box1,#box2{float:left;width:200px;h…

CSS中的边界margin的取值也可以为负值，有时候我们不敢相信，这是一个有趣的话题，负值边界会给我们带来更多新奇的创意，让我们的工作更具刺激和挑战。@H_403_1@

来看看一个实例吧，首先看一下CSS代码：@H_403_1@

<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');
}@H_403_1@

</style>
xhtml结构如下：@H_403_1@

<div ID="Box1">
 左栏
</div>
<div ID="Box2">
 右栏</div>@H_403_1@

运行结果：

@H_403_1@
现在，我们想把左右两栏位置互换一下，只需把
<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;

运行后：

@H_403_1@@H_403_1@ 总结

以上是内存溢出为你收集整理的CSS的margin属性的取值可为负值全部内容，希望文章能够帮你解决CSS的margin属性的取值可为负值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。