前端技巧CSS外边距margin属性设置负值的用法

CSS外边距margin属性设置负值的用法

在CSS中,margin属性用于设置元素的外边距,可以设置为具体的数值,也可以使用百分比或者是auto,而这里外边距的数值其实是可以设置负值的,当外边距设置为负值时,网页会有什么样的表现呢,下面来举个例子试试看:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
.wrap {margin:30px;}
.x1,.x2,.x3 {width:300px;height:100px;margin:0;}
.x1 {background:#7b3;}
.x2 {background:#15c;}
.x3 {background:#f93;}
</style>
</head>
<body>
<div class="wrap">
 <div class="x1">
 </div>
 <div class="x2">
 </div>
 <div class="x3">
 </div>
</div>
</body>
</html>

这里创建了三个元素块分别为x1,x2和x3,为了方便查看效果,分别给它们设置了不同的颜色,在浏览器中的表现效果是这样的:

margin负值.png

下面我给中间的区块定义一个负值顶部外边距:

.x2 {margin-top:-50px;}

浏览后发现,中间这个区块向上移动了50px的距离,而第三个区块也跟随它向上移动了:

margin负值2.png

接下来试试底部的负值外边距:

.x2 {margin-bottom:-50px;}

浏览后发现,中间的这个区块没有移动,反而下方的区块向上移动了50px的距离。

margin负值3.png

以上的测试是关于margin负值表现中最简单的情况,如果元素没有设置浮动并且没有设置定位,则当left和top方向设置margin负值时,元素会按照设置的方向移动相应的距离,而当right和bottom方向设置margin负值时,元素本身并不会移动,反而后面的其他元素会向该元素的方向移动相应的距离,并且覆盖在该元素之上

上面的例子中,如果给中间区块设置了相对定位,即:

.x2 {position:relative;}

浏览后发现,下方的元素也会向上移动,但并不会覆盖在该元素之上,当然如果另外设置z-index属性则另当别论了。

margin负值4.png

如果给中间的区块设置了绝对定位,则由于它会脱离文档流,所以设置负边距的话对后面的元素不会有影响。负边距配合定位的一个经典的用法,可用于给元素水平和垂直居中,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
.wrap {
 position:relative;margin:20px;
 width:300px;height:300px;background:#fa5;
}
.a1 {
 position:absolute;width:200px;height:200px;
 top:50%;left:50%;background:#2c2;
 margin-top:-100px;margin-left:-100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="a1"></div>
</div>
</body>
</html>

以外层父元素为参照物,将子元素定位到父元素的中心点,再通过负边距的设置让子元素向左和向上移动一半的距离,则水平和垂直方向都实现了居中:

利用负边距实现居中.png

对于设置了浮动的元素,根据浮动方向和外边距的方向,则会有不同的表现效果,如果设置负值margin的方向与浮动的方向相同,则元素会往对应的方向移动,例如:

.x2 {float:left;margin-left:-20px;}
.x3 {float:left;}

浏览后发现,x2区块向左移动了20px的距离:

margin负值-浮动元素.png

而如果设置负值margin的方向与浮动的方向相反,则元素本身不会移动,反而元素之前或者之后的元素会向该元素的方向移动相应的距离,例如:

.x2 {float:left;margin-right:-20px;}
.x3 {float:left;}

浏览后发现,x3区块向左移动了20px的距离:

margin负值-浮动元素2.png

通过这样的示例很容易想到,利用负值外边距可以用来实现两列布局,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
body {margin:0px;}
.wrap {overflow:hidden;}
.left,.right {float:left;height:500px;}
.left {width:100%;background:#6b5;margin-right:-250px;}
.right {width:250px;background:#fa5;}
.left .content {margin-right:250px;}
</style>
</head>
<body>
<div class="wrap">
 <div class="left">
     <div class="content"></div>
 </div>
 <div class="right">
 </div>
</div>
</body>
</html>

这样便实现了一个右侧边栏固定宽度,左列自适应的两列布局:

margin负值-两列布局.png

同样的,利用负边距还可以实现经典的三列自适应布局,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
body {margin:0px;}
.wrap {overflow:hidden;}
.left,.right,.main {float:left;height:500px;}
.main {width:100%;}
.main .content {height:500px;margin:0 260px;background:#6b5;}
.left {width:250px;background:#36d;margin-left:-100%;}
.right {width:250px;background:#fa5;margin-left:-250px;}
</style>
</head>
<body>
<div class="wrap">
 <div class="main">
   <div class="content"></div>
 </div>
 <div class="left">
 </div>
 <div class="right">
 </div>
</div>
</body>
</html>

这里将中间区块放在最前面,而左右两个区块放在之后,这样便于让左右区块“覆盖”到中间区块之上:

margin负值-3列布局.png

无心插柳,这里让网页的主要的内容首先加载,也符合网站SEO相关的建议。

负边距还有一些很实用的用法,比如说一个横向的列表,为了美观,给每个列表项设置了右边距,这样的话最后一个列表项也会有右边距,遇到这种情况虽然可以单独给最后一个列表项设置右边距为0,但更简单的方法是给列表定义一个向左的负边距。同样的,有的站长为了美观,喜欢给一个文本列表的文本设置虚线下边框,但是设置了之后,最后一行文本也有下边框,如果想要去掉的话,也可以通过负边距来实现,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试页面</title>
<style type="text/css">
body,ul,li {margin:0;padding:0;}
body {line-height:2.8;}
.wrap {margin:20px;}
ul {list-style-type:none;list-style-position:outside;width:500px;border:1px solid #3cd;}
li {border-bottom:1px dashed #3cd;padding:0 12px;}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>不管失败多少次,都要面对生活,充满希望。</li>
<li>人若软弱就是自己最大的敌人,人若勇敢就是自己最好的朋友。</li>
<li>时间也是一种成本,对时间的珍惜就是对成本的节约。</li>
<li>无人理睬时,坚定执着。万人羡慕时,心如止水。</li>
<li>成功不是凭梦想和希望,而是凭努力和实践。</li>
</ul>
</div>
</body>
</html>

浏览这个网页,会发现最后一行文本的下边框和列表的下边框重叠了,很不美观:

margin负值-去掉最后一个列表边框.png

其实只要给列表项加上负边距即可完美解决:

li {margin-bottom:-1px;}

设置了负边距后便解决了这一点瑕疵,原本希望得到的效果应该是这样:

margin负值-去掉最后一个列表边框2.png

网页设计中经常遇到图片列表,下图这样的图片列表,一般的实现方法是,给列表项设置向左浮动,并通过margin设置图片之间的距离。

图片列表.jpg

但有时候如果需要图片列表的左边与其他内容对齐,则只能设置列表项的右边距margin-right,如果这样的话,最右边的图片也会有右边距,可能并不美观,如果遇到这样的问题,也可以通过设置列表的负边距来解决,原理和上面的例子是类似的。

关于外边距负值的使用就总结到这里,需要注意的是,外边距margin属性可以使用负值,而内边距padding属性无法使用负值

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.jzdi.com.cn/skill/95.html