(编辑:jimmy 日期: 2024/12/24 浏览:2)
一、margin可以为负值
在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。
关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM结构的流体布局。
此demo与CSS float浅析篇中的是同一个。
XML/HTML Code复制内容到剪贴板二、margin的百分比数值
当margin属性的值为百分数时,其总是以父元素的width为基数进行计算。
请看下面这个demo,当初折磨了我N久的。。。只怪我知道得太晚了,说多了都是泪啊。。。
XML/HTML Code复制内容到剪贴板三、垂直方向上margin的合并
这个问题经常造成一些困惑,不过只需要记住一句话即可,垂直方向上的margin只要亲密接触就会合并,也只有亲密接触才会合并。
垂直方向上margin的合并,如果发生在相邻元素,其实是很好理解的;但是如果发生在父元素与子元素之间,就有些怪异了。
来看例子:
XML/HTML Code复制内容到剪贴板消除垂直方向上margin合并的方法:给父元素加border或者加padding,打破父元素与子元素margin之间的亲密接触即可。
margin合并的规则:
XML/HTML Code复制内容到剪贴板1. 两个margin都是正数,取绝对值大的;
2. 一个margin是正数,另一个margin是负数,相加;
3. 两个margin都是负数,取绝对值大的。
以上这篇CSS margin全面了解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/cc156676/archive/2016/07/21/5690270.html