html的盒模型详解-百分百源码网

html的盒模型详解

发布时间：09/01 来源：未知浏览：关键词：

这次给大家带来html的盒模型详解，使用html盒模型的留意事项是什么，下面就是实战案例，一起来看一下。

1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素：

--生成该盒的元素可否设定了'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'也适用。假如包括块的宽度取决于该元素，那么发生的规划在CSS 2.1是不决义的
--auto
--margin属性同意负值，但大概存在详细实现限制

2.3. 'margin-top', 'margin-bottom'

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table之外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包括块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

这两个属性对非更换的行内元素无效

2.4. 'margin-right', 'margin-left'

'margin-right', 'margin-left'
Value:      <margin-width> | inherit
Initial:    0
Applies to:     除display类型为table系列中除了table-caption，table和inline-table之外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包括块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

2.5. 'margin'

'margin'
Value:      <margin-width>{1,4} | inherit
Initial:    见独自的各个属性
Applies to:     除display类型为table系列中除了table-caption，table和inline-table之外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包括块的宽度
Media:      visual
Computed value:     见独自的各个属性

3. 合并外边距

相邻的垂直外边距汇合并，除了：

----根元素盒的margin不合并
----假如一个带有间隙（clearance 译注：是指clear属性致使元素位置移动构成的间隙）的元素的上外边距与下外边距相邻，它的外边距会和紧受着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并

信赖看了本案牍例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！