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

[网页设计]CSS marging浅析


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

View Code

 

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

 

三、垂直方向上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都是负数,取绝对值大的。