刚刚开始学习css的时候，我采用了float为主来实现布局的方式，但是运用浮动很长一段时间之后，我发现这是一种被人牵着鼻子走的做法。至少，页面上不应过多的运用浮动，尤其是不要拿来确定整个布局。
很简单的道理，当你用了float:left,后面的div很可能需要跟着用float:left，而且当宽度不够的时候，本来该和上一个div一个水平线上的div跑到下面去了，如果某个div有margin属性，还会遇到ie6那个烦人的bug。而且浮动之后，你还必须在合适的地方使用清除浮动。
为了形象、易懂的解释负margin，我们将引入W3C上没有的参考线的说法。何谓参考线？参考线就是 margin移动的基准点，此基准点相对于box(自身)是静止的。而margin的数值，就是box相对于参考线的位移量。
一个完整的margin属性是这么写的margin: top right bottom left;(eg: margin:10px 20px 30px 40px)。在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。margin的位移方向是指margin数值为正值时候的情形，如果是负值则位移方向相反。
先看看一个完整的例子
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Margin参考线举例说明</title> <style type="text/css"> *{margin:0; padding:0;} .wrap{width:400px; border:5px solid #aaa;} .example{width:200px; height:200px; background:#CCCCFF;} .normal{width:200px; height:200px; background:#CCE8CF;} .example{margin:-10px 20px -30px 40px;} </style> </head> <body> <div class="wrap"> <div class="example">example元素：margin参考线举例说明文字，请查看此元素由于margin的变化所移动的位移量。</div> <div class="normal">一个普通的Box</div> </div> </body> </html> |
来分析这段代码，example元素下方有一相邻元素normal（注：这里分析的是添加和删除margin后的example元素，normal元素仅作为example元素前后效果的参照）。
根据上文的参考线原理margin:-10px(top) 20px(right) -30px(bottom) 40px(left); 上-10px和左40px将以外元素为参考，所谓外元素就是本元素的边界元素（再白话点的解释就是元素的紧邻元素，这里涉及到containing block知识，可自行网上搜索）。example元素上边和左边的边界元素即为wrap父元素，wrap父元素为基准点，example的margin-top为-10px，想象下如果这里margin-top为+10px会什么情况，没错如果为+10px，example元素相对于wrap父元素边缘为基准，那么example元素会同wrap父元素10px产生间隙边距，那么反过来，margin-tip:-10px;还是与wrap父元素边缘为基准，反过来向上推10px的距离位置。example元素的margin-left为40px，这里就按照正常逻辑相隔40px边距，同理如果为-40px，那么就是反方向向左推进40px的距离位置。
再来看example元素的margin-right和margin-bottom，由上文得知这俩个值是以元素本身为参考。什么叫以元素本身为参考呢，确切含义是指以自身为参考来影响周围元素的位置（实质即为影响下边和右边相邻元素的参考线）。这里的margin-bottom为-30px，对于其自身位置没有任何变化，但是对于其下方元素normal元素产生了极大的影响，因为normal元素的上边界元素即为example元素，根据example元素边界来判定自身位置，想象下如果example元素margin-bottom为+30px，那么example元素将隔开下方的normal元素，反之为-30px，下方normal元素由于example参考线内凹，导致了normal元素自个儿身不由己的被“提”了上去了。这就是以自身为参考影响周围元素位置的含义。
当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Margin参考线举例说明</title>
<style type="text/css">
*{margin:0; padding:0;}<em>/*_height是为了兼容IE6的*/</em>
.wrap{width:400px; border:5px solid #aaa;}
.example{width:200px; height:200px; background:#CCCCFF;}
.normal{width:200px; height:200px; background:#CCE8CF;}
.example{margin:10px 0px 0px 20px;}<strong>/*上左优先；下会影响下面的DIV是不是有重叠部分，下有负，
下面的DIV会重叠；外面的边框会不会跟着变矮取决于外面的DIV不设高度；设了高度的话，里面的两个DIV的高度大就会撑出外面DIV*/
/*上左以父元素为参考，下右以元素本身为参考*/</strong>
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin参考线举例说明文字，请查看此元素由于margin的变化所移动的位移量。</div>
<div class="normal">一个普通的Box</div>
</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Margin参考线举例说明</title>
<style type="text/css">
*{margin:0; padding:0;}
.wrap{width:400px; border:5px solid #aaa;}
.example{width:200px; height:200px; background:#CCCCFF;}
.normal{width:200px; height:200px; background:#CCE8CF;}
.example{margin:-10px -20px 20px 20px;}/*上左优先；下会影响下面的DIV是不是有重叠部分，下有负，
下面的DIV会重叠；外面的边框会不会跟着变矮取决于外面的DIV不设高度；设了高度的话，里面的两个DIV的高度大就会撑出外面DIV*/
</style>
</head>
<body>
<div class="wrap">
<div class="example">example元素：margin参考线举例说明文字，请查看此元素由于margin的变化所移动的位移量。</div>
<div class="normal">一个普通的Box</div>
</div>
</body>
</html>详细讲解负margin
[原创] 负边距(negative margin)实现自适应的div左右排版
也就是说我需要一个左边自适应，而右边固定的左右布局，或者说某一边固定，另一边占据剩余部分，该如何做呢？
我找到的最好的答案是使用 负margin （配合浮动），下面概括一下原理：
使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半部分，只要右边再内部使用一个div，外左边距为左边的宽度就实现了左右的排版。
1803
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
