一、margin可以为负值
在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。
关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM结构的流体布局。
此demo与CSS float浅析篇中的是同一个。
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>不改变DOM结构的流体布局</title> <style> .container{ width:600px; margin-left:auto; margin-right:auto; background-color:orange; font-size:16px; line-height:1.5; } .box1{ width:100%; float:left; } .box2{ margin-right:220px; padding-left:20px; } img{ width:200px; float:left; margin-left:-200px; } .clearfix:after{ content:""; display:table; clear:both; } .clearfix{ *zoom:1; } </style> </head> <body> <divclass="containerclearfix"> <divclass="box1"> <divclass="box2"> <h3>不改变DOM位置的流体布局</h3> <p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p> <p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p> <p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p> <p>下面就介绍一种新的思路来完成布局。</p> <ul> <li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li> <li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。</li> <li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li> <li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li> </ul> </div><> </div><> <imgsrc="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"alt="apicture"style="width:200px;height:300px"/> </div><> </body> </html>
二、margin的百分比数值
当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。
请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>margin的百分数值</title> <style> .container{ width:500px; height:300px; margin:50pxauto; background-color:orange; border:1pxsolidblack; } .box{ width:250px; height:150px; margin-left:auto; margin-right:auto; background-color:cyan; } .box1{ margin-top:75px; margin-bottom:75px; padding:5px; } .box2{ margin-top:25%; margin-bottom:25%; padding:5px; } </style> </head> <body> <divclass="container"> <divclass="boxbox1"> <p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p> <p>OK，居中啦！！！</p> </div> </div> <divclass="container"> <divclass="boxbox2"> <p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p> <p>额，这什么鬼？说好的居中呢？</p> </div> </div> </body> </html>
三、垂直方向上margin的合并
这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。
垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。
来看例子：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>垂直方向上的margin合并</title> <style> .container{ width:500px; height:300px; margin:50pxauto; background-color:orange; } .box{ width:300px; height:200px; margin-left:auto; margin-right:auto; background-color:cyan; margin-top:25px; padding:5px; } .border{ border:1pxsolidblack; /*padding:1px;*/ } </style> </head> <body> <divclass="container"> <divclass="box"> <p>父元素的margin-top为50px，子元素的margin-top为25px；</p> <p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？</p> <p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。</p> </div> </div> <divclass="containerborder"> <divclass="box"> <p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p> <p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p> <p>或者给父元素设置padding也是可以的喔。</p> </div> </div> </body> </html>
消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。
margin合并的规则：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>margin合并规则</title> <style> .container{ width:300px; height:500px; margin:50px; background-color:orange; float:left; border:1pxsolidblack; } .box1,.box2,.box3, .box4,.box5,.box6{ width:200px; height:150px; margin:30pxauto; background-color:cyan; text-align:center; line-height:150px; } .box1{ margin-bottom:30px; } .box2{ margin-top:20px; } .box3{ margin-bottom:30px; } .box4{ margin-top:-30px; } .box5{ margin-bottom:-30px; } .box6{ margin-top:-50px; background-color:green; } p{ width:220px; margin:10pxauto; font-size:16px; line-height:1.5; } </style> </head> <body> <divclass="container"> <divclass="box1">box1</div> <divclass="box2">box2</div> <p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p> </div> <divclass="container"> <divclass="box3">box3</div> <divclass="box4">box4</div> <p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p> </div> <divclass="container"> <divclass="box5">box5</div> <divclass="box6">box6</div> <p>box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。</p> </div> </body> </html>
1. 两个margin都是正数，取绝对值大的；
2. 一个margin是正数，另一个margin是负数，相加；
3. 两个margin都是负数，取绝对值大的。
以上这篇CSS margin全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。
原文地址：http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html
【CSS margin全面了解】相关文章：
★ CSS样式:background-position的理解
★ CSS 3基础
★ CSS语法解析
★ CSS层叠顺序
★ CSS3制作ajax loader icon实现思路及代码
★ CSS分页符代码