一、margin可以为负值
在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。
关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM结构的流体布局。
此demo与CSS float浅析篇中的是同一个。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>不改变DOM结构的流体布局</title>
6 <style>
7 .container {
8 width:600px;
9 margin-left: auto;
10 margin-right: auto;
11 background-color: orange;
12 font-size: 16px;
13 line-height: 1.5;
14 }
15
16 .box1 {
17 width:100%;
18 float:left;
19 }
20
21 .box2 {
22 margin-right: 220px;
23 padding-left: 20px;
24 }
25
26 img {
27 width:200px;
28 float:left;
29 margin-left:-200px;
30 }
31
32 .clearfix:after {
33 content: "";
34 display: table;
35 clear: both;
36 }
37
38 .clearfix {
39 *zoom: 1;
40 }
41
42 </style>
43 </head>
44 <body>
45 <div class="container clearfix">
46 <div class="box1">
47 <div class="box2">
48 <h3>不改变DOM位置的流体布局</h3>
49 <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p>
50 <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p>
51 <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p>
52 <p>下面就介绍一种新的思路来完成布局。</p>
53 <ul>
54 <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li>
55 <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。</li>
56 <li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li>
57 <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li>
58 </ul>
59 </div><!--关闭box2-->
60 </div><!--关闭box1-->
61 <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />
62 </div><!--关闭container-->
63 </body>
64 </html>
二、margin的百分比数值
当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。
请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>margin的百分数值</title>
6 <style>
7 .container {
8 width: 500px;
9 height: 300px;
10 margin: 50px auto;
11 background-color: orange;
12 border: 1px solid black;
13 }
14
15 .box {
16 width: 250px;
17 height: 150px;
18 margin-left: auto;
19 margin-right: auto;
20 background-color: cyan;
21 }
22
23 .box1 {
24 margin-top: 75px;
25 margin-bottom: 75px;
26 padding: 5px;
27 }
28
29 .box2 {
30 margin-top: 25%;
31 margin-bottom: 25%;
32 padding: 5px;
33 }
34 </style>
35 </head>
36
37 <body>
38 <div class="container">
39 <div class="box box1">
40 <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>
41 <p>OK，居中啦！！！</p>
42 </div>
43 </div>
44 <div class="container">
45 <div class="box box2">
46 <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p>
47 <p>额，这什么鬼？说好的居中呢？</p>
48 </div>
49 </div>
50 </body>
51 </html>
三、垂直方向上margin的合并
这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。
垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。
来看例子：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>垂直方向上的margin合并</title>
6 <style>
7 .container {
8 width: 500px;
9 height: 300px;
10 margin: 50px auto;
11 background-color: orange;
12 }
13
14 .box {
15 width: 300px;
16 height: 200px;
17 margin-left: auto;
18 margin-right: auto;
19 background-color: cyan;
20 margin-top: 25px;
21 padding: 5px;
22 }
23
24 .border {
25 border: 1px solid black;
26 /*padding: 1px;*/
27 }
28 </style>
29 </head>
30
31 <body>
32 <div class="container">
33 <div class="box">
34 <p>父元素的margin-top为50px，子元素的margin-top为25px；</p>
35 <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？</p>
36 <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。</p>
37 </div>
38 </div>
39 <div class="container border">
40 <div class="box">
41 <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p>
42 <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p>
43 <p>或者给父元素设置padding也是可以的喔。</p>
44 </div>
45 </div>
46 </body>
47 </html>
消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。
margin合并的规则：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>margin合并规则</title>
6 <style>
7 .container {
8 width: 300px;
9 height: 500px;
10 margin: 50px;
11 background-color: orange;
12 float: left;
13 border: 1px solid black;
14 }
15
16 .box1,.box2,.box3,
17 .box4,.box5,.box6 {
18 width: 200px;
19 height: 150px;
20 margin: 30px auto;
21 background-color: cyan;
22 text-align: center;
23 line-height: 150px;
24 }
25
26 .box1 {
27 margin-bottom: 30px;
28 }
29
30 .box2 {
31 margin-top: 20px;
32 }
33
34 .box3 {
35 margin-bottom: 30px;
36 }
37
38 .box4 {
39 margin-top: -30px;
40 }
41
42 .box5 {
43 margin-bottom: -30px;
44 }
45
46 .box6 {
47 margin-top: -50px;
48 background-color: green;
49 }
50
51 p {
52 width: 220px;
53 margin:10px auto;
54 font-size: 16px;
55 line-height: 1.5;
56 }
57
58 </style>
59 </head>
60
61 <body>
62 <div class="container">
63 <div class="box1">box1</div>
64 <div class="box2">box2</div>
65 <p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p>
66 </div>
67 <div class="container">
68 <div class="box3">box3</div>
69 <div class="box4">box4</div>
70 <p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p>
71 </div>
72 <div class="container">
73 <div class="box5">box5</div>
74 <div class="box6">box6</div>
75 <p>box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。</p>
76 </div>
77 </body>
78 </html>
1. 两个margin都是正数，取绝对值大的；
2. 一个margin是正数，另一个margin是负数，相加；
3. 两个margin都是负数，取绝对值大的。
时间： 2024-12-16 02:17:24