强大的负margin

最新推荐文章于 2020-10-10 14:00:18 发布

ljl157011

最新推荐文章于 2020-10-10 14:00:18 发布

阅读量970

点赞数

分类专栏： web前端布局文章标签：布局 div 负margin

本文链接：https://blog.csdn.net/ljl157011/article/details/24090809

版权

web前端布局专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、负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>