盒模型:外边距叠加和外边距为负值

8/31/2015来源:CSS教程人气:807

盒模型:外边距叠加和外边距为负值

盒模型乍一看很简单,无非就是内容、内边距、边框和外边距。但是写起代码来你会发现并不简单,很多地方都很模糊,特别是外边距为负值的时候。

这篇文档主要说明两个问题:

1.外边距叠加

2.外边距为负值

首先说明两个基本的要点:

1.如果给元素添加背景,背景会应用于内容和内边距组成的区域。

2.width和height是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,只会增加元素框的总尺寸。

特别说明,如果将元素的box-sizing属性设置为"border-box",则width和height表示的是内容、内边距和边框组成区域的高度和宽度。所以增加外边距对内容区域的尺寸没有影响,而增加内边距和边框会导致内容区域的尺寸减小。

现在开始讨论第一个问题:外边距叠加

外边距叠加是指当两个或更多垂直外边距相遇时,外边距的高度等于这几个外边距的高度中的较大者。这就是外边距叠加的情况,并且外边距叠加只发生在垂直外边距上。

外间距叠加有三种情况:

l元素自身叠加

l相邻元素叠加

l包含元素叠加

元素自身叠加

如果有一个空元素,只有外边距而没有边框或内边距,顶外边距和底外边距就碰到一起发生叠加。

相邻元素叠加

当一个元素出现在另一个元素上面是,上面那个元素的底外边距与下面那个元素的顶外边距就会发生叠加。

包含元素叠加

当一个元素包含在另一个元素中时,如果没有内边距或边框将外边距隔开,它们的顶/底外边距也会发生叠加。

外边距叠加有什么用呢?一个最简单的例子就是段落。如果没有外边距叠加,那么从第二个段落开始,段落间距就会是第一个段落上面的空间的两倍。

最后的说明:只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外间距不会叠加。

接下来讨论外边距为负值的情况:

举个具体的例子说明,假如margin-right:-150px;

分两步理解:

1.假设margin-right:0;,内容区域不变

2.此时加上margin-right:-150px;布局变成

所以margin-right取负值就是右边的区域变成外边距,以容纳其他元素(假设是元素B)。需要注意的是如果不正确设置该元素中的子元素的外间距,就会与B元素发生重叠。

外间距设置为负值主要是可以用于生成边栏。

额外说明:只有外边距才可以是负值,内边距不允许为负值。