看过一篇文章是关于我知道你不知道的负Margin，里面对margin做了总结：
当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生边距。当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线。
接下来就讲在实际开发中用到的几个比较常用的负margin实例：
1、bootstrap框架的栅格系统是一个亮点，它就用了负margin来完美的解决了container 和 row 之间的外边距问题，具体实现如下
其中，container设置了水平方向上的padding，使其内部内容不会接触到浏览器的边界，大小为15px，就是图片中粉红色的部分；特别注意里面嵌套的row有一个特殊的地方，就是左右各有-15px的margin，就是图片中的蓝色部分，这样就抵消了container的水平方向的15px的padding，千万记住要把row放到container的内部，这样才能保证正常。
2、多列等高布局——使用正padding和负margin对冲实现多列布局方法
这个方法就是，在所有列中使用正的上下padding，和负的上下margin，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <style type="text/css">
5 * {
6 margin:0;
7 padding:0;
8 border:0;
9 }
10
11 #container {
12 margin: 0 auto;
13 overflow: hidden;
14 width: 960px;
15 }
16
17 .column {
18 background: #ccc;
19 float: left;
20 width: 200px;
21 margin-right: 5px;
22 margin-bottom: -99999px;
23 padding-bottom: 99999px;
24 }
25
26 #content {
27 background: #eee;
28 }
29
30 #right {
31 float: right;
32 margin-right: 0;
33 }
34
35 </style>
36 </head>
37
38 <body>
39
40 <div id="container" >
41 <div id="left" class="column aside" >
42 <p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
43 </div>
44 <div id="content" class="column section" >
45 <p>Main content </p>
46 </div>
47 <div id="right" class="column aside" >
48 <p>Sidebar</p>
49 </div>
50 </div>
51
52 </body>
53 </html>
时间： 2024-10-15 06:24:44