您现在的位置是：网站首页> 编程资料编程资料
CSS中的边界margin的取值为负值说明_CSS教程_CSS_网页制作_
2021-09-08
782人已围观
简介 CSS中的边界margin的取值也可以为负值，有时候我们不敢相信，这是一个有趣的话题，负值边界会给我们带来更多新奇的创意，让我们的工作更具刺激和挑战。
来看看一个实例吧
首先看一下CSS代码：
左栏
右栏
左栏
右栏
换成：
右栏
左栏
即可。
但是，当页面很复杂时，各种标签相互嵌套，代码成百上千行，这个看似简单的位置调换，可能需要花上很长的时间，也并一定能达到需要的效果，现在，我们换一种思路来实现：
#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;
运行后：
首先看一下CSS代码：
XHTML结构如下：
左栏
右栏
运行结果：
现在，我们想把左右两栏位置互换一下，只需把
左栏
右栏
换成：
右栏
左栏
即可。
但是，当页面很复杂时，各种标签相互嵌套，代码成百上千行，这个看似简单的位置调换，可能需要花上很长的时间，也并一定能达到需要的效果，现在，我们换一种思路来实现：
#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;
运行后：
相关内容
- 27款经典的CSS框架小结 网页制作必备_Div+CSS教程_CSS_网页制作_
- 用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法_CSS教程_CSS_网页制作_
- IE6,IE7下按钮(BUTTON)变宽的解决方法_CSS教程_CSS_网页制作_
- div+css打造可变高宽的圆角框 _CSS教程_CSS_网页制作_
- 30个你不可不知的CSS选择器小结_CSS教程_CSS_网页制作_
- 什么是CSS Sprites（图片合并）技术 图文介绍_CSS教程_CSS_网页制作_
- 利用label标签和CSS美化文件上传表单(不兼容IE6)_CSS教程_CSS_网页制作_
- 去掉checkbox边框的方法(css)_CSS教程_CSS_网页制作_
- div+css是网页排版技巧分享_Div+CSS教程_CSS_网页制作_
- CSS 网站性能优化笔记_CSS教程_CSS_网页制作_
