1.1.盒的内容区的尺寸—contentwidth和contentheight—取决于几个因素:
--生成该盒的元素是否设置了'width'或'height'属性。
--该盒是否包含文本以及其它盒。
--该盒是不是表格等等。
1.2.盒的背景色
--内边距和边框区域的背景样式由生成(该盒的)元素的'background'属性来指定。外边距背景总是透明的
2.外边距属性:'margin-top','margin-right','margin-bottom','margin-left'和'margin'
2.1.外边距属性指定了盒的外边距区的宽度
--'margin'简写属性一次性设置四周的外边距,而其它外边距属性只设置它们各侧的。这些属性适用于所有元素,但非替换的行内元素上的垂直margin将不会产生任何效果
2.2.<margin-width>值类型,可以取下列值之一:
--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意,这一点对于'margin-top'和'margin-bottom'也适用。如果包含块的宽度取决于该元素,那么产生的布局在CSS2.1是未定义的
--auto
--margin属性允许负值,但可能存在具体实现限制
2.3.'margin-top','margin-bottom'
'margin-top','margin-bottom'
Value:<margin-width>|inherit
Initial:0
Appliesto:除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption,table,inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited:no
Percentages:参照包含块的宽度
Media:visual
Computedvalue:指定的百分比或者绝对长度
这两个属性对非替换的行内元素无效
2.4.'margin-right','margin-left'
'margin-right','margin-left'
Value:<margin-width>|inherit
Initial:0
Appliesto:除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption,table,inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited:no
Percentages:参照包含块的宽度
Media:visual
Computedvalue:指定的百分比或者绝对长度
2.5.'margin'
'margin'
Value:<margin-width>{1,4}|inherit
Initial:见单独的各个属性
Appliesto:除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption,table,inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited:no
Percentages:参照包含块的宽度
Media:visual
Computedvalue:见单独的各个属性
3.合并外边距
相邻的垂直外边距会合并,除了:
----根元素盒的margin不合并
----如果一个带有间隙(clearance译注:是指clear属性导致元素位置移动形成的间隙)的元素的上外边距与下外边距相邻,它的外边距会和紧挨着的兄弟(元素)的相邻外边距合并,但合并后不会再和父级块的下外边距合并
本文转载自中文网 |