你的位置:首页 > 网页设计

[网页设计]CSS marging负值及其它


一、margin可以为负值

在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。

margin负值的本质,在于它改变了元素在普通流中所占据的空间。

 

关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴三个经典应用。

1.    margin-left负值结合浮动实现不改变DOM结构的流体布局。

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="utf-8"> 5     <title>不改变DOM结构的流体布局</title> 6     <style> 7       .container { 8         width:700px; 9         margin: 50px auto;10         background-color: orange;11         font-size: 16px;12         line-height: 1.5;13       }14 15       .box1 {16         width:100%;17         float:left;18       }19 20       img {21         float: left;22         margin-left: -200px;23       }24 25       .box2 {26         margin-right: 230px;27       }28 29       .clearfix:after {30         content: "";31         display: table;32         clear: both;33       }34 35       .clearfix {36         *zoom: 1;37       }38 39       h3,p {40         padding-left: 10px;41       }42 43     </style>44   </head>45   <body>46     <div class="container clearfix">47       <div class="box1">48         <div class="box2">49         <h3>不改变DOM位置的流体布局</h3>50         <p>假如有一段文本和一幅图像,在DOM节点中,文本在前,图像在后,怎么能把图像定位到右边呢?</p>51         <p>通常的做法是,调换DOM节点中图像与文本的位置,让图像在前,文本在后,然后将图像浮动到右边即可。</p>52         <p>但这样改变DOM节点顺序始终不妥,还有什么更好的方法呢?</p>53         <p>下面就介绍一种新的思路来完成布局。</p>54         <ul>55           <li>将文本用div包起来,定义为box1;现在的结构是一个box1和一个img。</li>56           <li>将box1宽度设为100%,左浮动;将img设置一个宽度,也左浮动,然后margin-left设为负的宽度值;此时图像就定位到文本的右边啦。57           (或者,将box1的宽度设为100%,左浮动,并且margin-right为负的图像宽度;图像也会定位到文本右边。)</li>58           <li>但是有一个问题,图像盖住了文本内容,这可怎么办?</li>59           <li>重点来了,在box1中增加一个box2,box2把文本全部包起来,然后margin-right设为图像的宽度(+额外的间距),这样就解决问题啦!</li>60         </ul>61         </div><!--关闭box2-->62       </div><!--关闭box1-->63       <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />64     </div><!--关闭container-->65   </body>66 </html>

View Code  

 

2.    margin负值实现两列等高布局

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="utf-8"> 5     <title>margin负值实现等高布局</title> 6     <style> 7       div.container { 8         margin-left: 200px; 9         overflow: hidden;10       }11 12       div.box {13         width:300px;14         float: left;15         margin-right: 20px;16       }17 18       div.box1 {19         background-color: brown;20         margin-bottom: -9999px;21         padding-bottom: 9999px;22       }23 24       div.box2 {25         background-color: green;26         margin-bottom: -9999px;27         padding-bottom: 9999px;28       }29 30       p {31         margin-bottom: 50px;32       }33 34     </style>35   </head>36   <body>37     <div class="container">38       <div class="box box1">39         <p>box1</p>40         <p>box1</p>41       </div>42       <div class="box box2">43         <p>box2</p>44         <p>box2</p>45         <p>box2</p>46         <p>box2</p>47         <p>box2</p>48         <p>box2</p>49         <p>box2</p>50         <p>box2</p>51       </div>52     <div class="container">53   </body>54 </html>

View Code

其实现原理为margin负值与padding正值相互抵消。 

 

3.margin负值实现列表两端对齐

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="utf-8"> 5     <title>margin负值清除列表右边距</title> 6     <style> 7     * { 8       margin: 0; 9       padding: 0;10     }11 12     .box {13       width:540px;14       background-color: orange;15       margin:50px auto;16     }17 18     .box2 ul,.box3 ul {19       float: left;20       background-color: purple;21       margin-right: -10px;22     }23 24     li {25       float: left;26       list-style: none;27       margin-right: 10px;28     }29 30     p {31       font-size: 16px;32       line-height: 1.5;33       padding :5px 15px 5px 20px;34     }35 36     p.clear {37       clear: both;38     }39 40     .box3 {41       overflow: hidden;42     }43 44     .box3 ul {45       line-height: 0;46     }47     48     </style>49   </head>50 51   <body>52     <div class="box box1">53       <ul>54         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>55         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>56         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>57         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>58         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>59       </ul>60       <p class="clear">每个图像的宽度为100px,右外边距为10px,为了达到两端对齐的效果,容器的宽度需要540px。</p>61       <p>但是当我们看页面效果的时候,会发现最后一张图像到了第二行。</p>62       <p>究其原因,是因为第一行所剩余的宽度只剩下100px,而图像需要100px+10px的距离,所以被逼无奈只能到下一行。</p>63     </div>64     <div class="box box2">65       <ul>66         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>67         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>68         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>69         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>70         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>71       </ul>72       <p class="clear">第一种办法是,给最后一张图像增加一个class,将它的margin-right设为0。</p>73       <p>然而,margin才是本次的主角。</p>74       <p>稍微分析一下,是因为第一行的水平距离少了10px,所以图像才会到第二行的;那么,如果给第一行的宽度加10px,图像是不是就应该上去呢?</p>75       <p>那么,这个问题就变成了怎么给ul的宽度在右边加上10px,margin负值就可以实现这个效果。</p>76       <p>于是,我们给ul添加margin-right,其值为-10px,得到这个结果。</p>77       <p>为了看得清楚明白,给ul增加了背景色;很明显地看到,ul元素的右边增加了10px的宽度,图像算是两端对齐了,但是这个问题还没完。</p>78       <p>最右边那多出去的10px和图像下边缘那一丢丢的多出来的东西,实在是太影响美观了,必须得处理一下。</p>79       <p>后续。。。</p>80     </div>81     <div class="box box3">82       <ul>83         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>84         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>85         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>86         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>87         <li><img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="A picture" style="width:100px;height:150px" /></li>88       </ul>89       <p class="clear">接上回。。。</p>90       <p>对于右边冒出去的那10px,我们可以在ul元素的父元素div.box3增加一个overflow属性,其值为hidden,让多出去的部分隐藏。</p>91       <p>对于图像下边多出来的那一点点背景颜色,实际上是line-height与vertical-align:baseline在联合作怪,将line-height设为0即可。</p>92     </div>93   </body>94 </html>

View Code

此例中最后提到的清除图像下边缘背景颜色的方法,如有疑问,请点这里,CSS line-height与vertical-align:baseline。

关于margin负值实现列表两端对齐的原理,我在demo中已有相关陈述,个人理解如此,有错请拍砖。 

关于margin负值能够让元素宽度增加,是因为元素的盒子宽度必须等于父元素的width。

此例中,div元素的width为540px,ul元素是块级元素,默认100%继承div的width,也就是540px,如果margin-right设为为-10px,那么width就必须增加10px,因为 -10+550=540。也就是说,margin负多少,width就必须增加多少,以保证盒子宽度与父元素的width相等。

但是有一个前提,width不能为定值。

height同理。

 

补充:

1.    受《CSS权威指南》启发,突发奇想

 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: 400px;10         margin: 50px auto;11         background-color: orange;12         border: 3px solid #000;13       }14 15       .wraper {16         width: 400px;17         height: 300px;18         margin: 30px auto;19         background-color: cyan;20         border: 3px solid #000;21       }22 23       p {24         font-size: 16px;25         line-height: 1.5;26         padding: 5px 5px 5px 20px;27       }28 29       .para1 {30         margin: 20px -3px 20px 25%;31         background-color: orange;32         border: 3px solid #000;33         border-right: none;34       }35 36       .para2 {37         text-align: right;38         margin: 20px 25% 20px -3px;39         background-color: orange;40         border: 3px solid #000;41         border-left: none;42       }43 44     </style>45   </head>46 47   <body>48     <div class="container">49       <div class="wraper">50         <p>我是第一段。</p>51         <p class="para1">我是第二段。</p>52         <p>我是第三段。</p>53         <p class="para2">谢谢观赏!</p>54       </div>55     </div>56   </body>57 </html>

View Code

效果是这样的:

 

作为第一个自创布局,我要把它发扬光大,嗯嗯。。。

 

补充2.    margin负值实现单列表的多列排列

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="utf-8"> 5     <title>margin负值实现单列表多列显示</title> 6     <style> 7       * { 8         margin: 0; 9       }10 11       div.container {12         width: 500px;13         margin: 50px auto;14         background-color: orange;15       }16 17       li {18         font-size: 16px;19         line-height: 1.5em;20       }21 22       li.col2 {23         margin-left: 150px;24       }25 26       li.col3 {27         margin-left: 300px;28       }29 30       .top {31         margin-top: -3em;32       }33 34     </style>35   </head>36 37   <body>38     <div class="container">39       <ul>40         <li>第1项</li>41         <li>第2项</li>42         <li>第3项</li>43         <li>第4项</li>44         <li>第5项</li>45         <li>第6项</li>46       </ul>47     </div>48     <div class="container">49       <ul>50         <li>第1项</li>51         <li>第2项</li>52         <li class="col2">第3项</li>53         <li class="col2">第4项</li>54         <li class="col3 ">第5项</li>55         <li class="col3">第6项</li>56       </ul>57     </div>58     <div class="container">59       <ul>60         <li>第1项</li>61         <li>第2项</li>62         <li class="col2 top">第3项</li>63         <li class="col2">第4项</li>64         <li class="col3 ">第5项</li>65         <li class="col3">第6项</li>66       </ul>67     </div>68     <div class="container">69       <ul>70         <li>第1项</li>71         <li>第2项</li>72         <li class="col2 top">第3项</li>73         <li class="col2">第4项</li>74         <li class="col3 top ">第5项</li>75         <li class="col3">第6项</li>76       </ul>77     </div>78   </body>79 </html>

View Code

个人认为这个例子简直是margin负值的经典教程,非常简单的应用,但是直指margin负值的本质。

 

二、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> 

View Code

友情提示,padding属性的值为百分数时,也是以父元素的width为基数计算的。 

 

三、垂直方向上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> 

View Code

消除垂直方向上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> 

View Code

1.    两个margin都是正数,取绝对值大的;

2.    一个margin是正数,另一个margin是负数,相加;

3.    两个margin都是负数,取绝对值大的。