html盒模型的示例分析

发布时间:2021-06-04 12:04:12 作者:小新
来源:亿速云 阅读:150

小编给大家分享一下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属性导致元素位置移动形成的间隙)的元素的上外边距与下外边距相邻,它的外边距会和紧挨着的兄弟(元素)的相邻外边距合并,但合并后不会再和父级块的下外边距合并

以上是“html盒模型的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 盒模型与BFC的示例分析
  2. css弹性盒模型中容器属性的示例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html 详解 模型

上一篇:JS中图片处理与合成的示例分析

下一篇:mysql报错This function has none of DETERMINISTIC怎么办

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》