负margin

Posted on   |  

负margin展示图

Alt

Static元素是没有设定成浮动的元素，下图说明了负margin对static元素的作用

当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。例如：

/* 元素向上移10px*/
#mydiv1 {margin-top:-10px;}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

/* 
* #mydiv1后续元素向上移10px, #mydiv1 本身不移动
*/
#mydiv1 {margin-bottom:-10px;}

浮动元素上的负margin

考虑下以下这种情况

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。

/* 应用在与浮动相反方向的负margin */
#mydiv1 {float:left; margin-right:-100px;}

若两个元素都为浮动，且#mydiv1的元素设定margin-right为20px。这样#mydiv2会认为#mydiv1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，#mydiv1的内容不受影响，保持原有的宽度。

如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。

简单2列布局

负margin也是一种创建简单2列自适应布局的好方法。2列自适应布局是一种拥有一个自适应宽度（liquid width）为100%的内容列和一个固定宽度侧边栏的布局。

<div id="content"> <p>Main content in here</p> </div> 
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

#content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}

这样你就拥有了一个简单的两列布局，即使在IE6下也能无错的运行。现在，为了避免#sidebar被#content中的文字覆盖，加上

/* 防止文本被重叠 */
#content p {margin-right:210px;}
/* 它是 200px + 10px, 10px是他们的间距*/

三栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
	body{
		margin: 0;
		padding: 0;
	}
	.left , .right{
		height: 300px;
		width: 200px;
		float: left;
	}
	.right{
		/**/
		margin-left: -200px;
    	background-color: red;
	}
	.left{
		/*移动到最左端*/
		margin-left: -100%;
		background-color: #080808;
	}
	.middle{
		height: 300px;
		width: 100%;
		float: left;
		background-color: blue;
	}
	.middle .m{
  		margin-left:200px;
	}
</style>
<!--放第一行-->
<div class="middle">
	<div class="m">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

参考