一、负margin介绍
通常人们很少使用负margin但随后你会了解到,它能做的其实有很多。以下是几条有关负margin需要注意的地方:
-
A、负margin是绝对标准的CSS
- 这不是开玩笑。W3C甚至标注过:对于margin属性来说,负值是被允许的。这是Nuff说的,查看这篇 文章会有更多详细内容。 B、负maring不是一种hack方法
- 千真万确,不能因为缺乏对负marign的理解,或者因为它长得像hack,就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。 C、不脱离文档流
- 不使用float的话,负margin元素是不会破坏页面的文档流。所以如果你使用 负margin上移一个元素,所有跟随的元素都会被上移。 D、完全兼容
- 所有现代浏览器都完全支持负margin(IE6在大多数情况下也支持)。 E、浮动会影响负margin的使用
- 负margin不是你每天都用的CSS属性,应用时应小心谨慎。
如果说正margin是与其他元素隔开,那么负margin就是吸引其他元素,并且覆盖,请看例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{width:100px;height:100px;border: 1px solid;}
.div1{background-color: red;}
.div2{margin-top: -50px;background-color: blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
蓝色div覆盖在了红色div之上,所以负margin可能会有层级问题,注意用z-index调节
二、2列右侧自适应布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.div1{width: 190px;margin-right: -190px;float: left;;}
.div1 div{background-color: red;height: 200px;}
.div2{width:100%;float: right;}
.div2 div{background-color: blue;margin-left: 200px;height: 200px;}
</style>
</head>
<body>
<div class="div1">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
</body>
</html>
感觉上有点儿像绝对定位的味道,好像红色div覆盖在了蓝色div之上。同理也可以实现三列布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.div1{width: 190px;margin-right: -190px;float: left;;}
.div1 div{background-color: red;height: 200px;}
.div2{width:100%;float: left;}
.div2 div{background-color: blue;margin-left: 200px;height: 200px;margin-right: 200px;}
.div3{width: 190px;margin-left: -190px;float: right;}
.div3 div{height: 200px;background-color: yellow;}
</style>
</head>
<body>
<div class="div1">
<div></div>
</div>
<div class="div3">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
</body>
</html>
要注意的是顺序问题,div3要写在div2的前面,不然2个右浮动会产生叠加效果
三、3列对齐布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
</style>
</head>
<body>
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham</li>
<li class="col2 top">Bread</li>
<li class="col2">Butter</li>
<li class="col3 top">Flour</li>
<li class="col3">Cream</li>
</ul>
</body>
</html>
非常轻松的就实现了3列的布局,并且没有用任何浮动,或者定位,
注意一点,负margin向上移动时,后面的元素也会向上移动,所以垂直方向,多个元素设置负margin,对于后面的元素来说,实际上效果是会叠加的。
四、div实现单线边框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{margin: 10px auto; width: 980px;}
ul{width:300px;*zoom:1;}
li{display:inline;float: left;width:50%;}
li div{border:1px solid;height: 50px;}
.odd{margin-left: -1px;margin-top: -1px;}
.even{margin-top: -1px;}
.hover div{border-color: #f40;position: relative;z-index: 10;zoom:1;}
.head{border: 1px solid;}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
<li><div>fdsf</div></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('li:odd div').addClass('odd');
$('li:even div').addClass('even');
$('li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
})
})
</script>
</body>
</html>
这个效果是看到淘宝的商品列表,突发奇想,div如何实现像table一样的border-collpase,单线边框。没错依旧是用负margin来实现
我用了jquery来辅助实现,jquery的选择器索引是从0开始,所以第一个元素是偶数,第二个是奇数,以此类推。偶数个li,margin-top:-1px;
奇数个li margin-top:-1px margin-left:-1px ; 非常简单是不是? 不过负margin会有覆盖的问题,当我鼠标hover的时候,我希望看到周边的border高亮,
所以使用z-index 来调节层级显示。至此大功告成。
五、浮动元素下负margin问题
文字和链接的问题
当浮动元素使用负margin时,在一些旧的浏览器中可能会出现问题,问题现象包括:
- 链接无法点击;
- 文字难以选中;
- 失去焦点后,tab任何链接都会消失;
解决方法:给元素添加position:relative,便能正常运行!
图片被截断
如果你不幸在办公室使用IE6的话,有时候会发现重叠和浮动的元素中内容会被突然截断。
解决方法:同样,给浮动元素加上position:relative,一切将会恢复正常。