一、margin可以为负值
在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。
关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴一个经典应用，margin-left负值结合浮动实现不改变DOM结构的流体布局。
不改变DOM结构的流体布局
不改变DOM位置的流体布局
假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？
通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。
立即学习“前端免费学习笔记（深入）”；
但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？
下面就介绍一种新的思路来完成布局。
- 将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。
- 将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。
- 但是有一个问题，图像盖住了文本内容，这可怎么办？
- 重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！
二、margin的百分比数值
当margin属性的值为百分数时，其总是以父元素的width为基数进行计算。
请看下面这个demo，当初折磨了我N久的。。。只怪我知道得太晚了，说多了都是泪啊。。。
margin的百分数值
父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。
OK，居中啦！！！
既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。
额，这什么鬼？说好的居中呢？
三、垂直方向上margin的合并
这个问题经常造成一些困惑，不过只需要记住一句话即可，垂直方向上的margin只要亲密接触就会合并，也只有亲密接触才会合并。
垂直方向上margin的合并，如果发生在相邻元素，其实是很好理解的；但是如果发生在父元素与子元素之间，就有些怪异了。
来看例子：
WebShop网上商店系统专注中小企业、个人的网上购物电子商务解决方案，淘宝商城系统用户/个人首选开店的购物系统！综合5500多用户的意见或建议，从功能上，界面美观上，安全性，易用性上等对网店系统进行了深度的优化，功能更加强大，界面模板可直接后台选择。WebShop网上商店系统特点：1 对于中小企业、个体、个人、店主和淘宝易趣等卖家，可利用WebShop快速建立购物网。2 源代码开放，利用WebS
垂直方向上的margin合并
父元素的margin-top为50px，子元素的margin-top为25px；
咦，子元素的margin-top呢？为什么都顶到父元素上边界了？
额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。
可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。
很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。
或者给父元素设置padding也是可以的喔。
消除垂直方向上margin合并的方法：给父元素加border或者加padding，打破父元素与子元素margin之间的亲密接触即可。
margin合并的规则：
margin合并规则
box1
box2
box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。
box3
box4
box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。
box5
box6
box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。
1. 两个margin都是正数，取绝对值大的；
2. 一个margin是正数，另一个margin是负数，相加；
3. 两个margin都是负数，取绝对值大的。
以上这篇CSS margin全面了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多CSS margin全面了解相关文章请关注PHP中文网！
