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 | inheritInitial: 0Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）Inherited: noPercentages: 参照包含块的宽度Media: visualComputed value: 指定的百分比或者绝对长度

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

2.4. margin-right , margin-left

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

2.5. margin

 margin Value: margin-width {1,4} | inheritInitial: 见单独的各个属性Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）Inherited: noPercentages: 参照包含块的宽度Media: visualComputed value: 见单独的各个属性

3. 合并外边距

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

相关阅读：

sublime怎样快速的创建html头部代码

css里有哪些长度单位

CSS( Cascading Style Sheets )集合

以上就是html的盒模型详解的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。