首页 > 很简单的一个前端重构问题,关于background-color,overflow,margin,padding

很简单的一个前端重构问题,关于background-color,overflow,margin,padding

下面两个网址里面,ul的上面是有背景色的

http://jsfiddle.net/p2227/DxxEL/

http://jsfiddle.net/p2227/DxxEL/1/

但是如果这样写css,ul的上下就没有背景色了(就是在margin-top,margin-bottom那一部分的背景色),是什么原因?
http://jsfiddle.net/p2227/DxxEL/2/


overflow触发了.prod-middle的BFC。BFC阻止了用例1中的margin的折叠。这是一个常见的BFC的特性:创建了BFC的元素不会与它们的子元素发生外边距折叠。
对比用例1和用例3可以发现,用例3中.prod-attr-list中的margin与.prod-middle折叠了,而用例1则没有。

BFC介绍详见:http://www.smallni.com/haslayout-block-formatting-contexts/

(用例1和用例2是两种常见的表达留白的方案。)


以下皆为这里部分内容的引用,其实是W3C的相应规则的翻译。

margin折叠的产生有几个条件:

垂直方向上毗邻的box不会发生折叠的情况:

折叠边距的计算

当两个margin都是正值的时候,取两者的最大值;当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从 0 位置,负向位移;当有正有负的时候,先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。但必须注意,所有毗邻的margin要一起参与运算,不能分步进行。


我试了,显示背景色啊,只要你的ul没有float,按道理说ul外层的div都是包裹住ul的

【热门文章】
【热门文章】