介绍
小编给大家分享一下html盒模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
1.1。盒的内容区的尺寸-内容的宽度和高度取决于几个因素:
——生成该盒的元素是否设置了& # 39;宽度# 39;或& # 39;高度# 39;属性。
——该盒是否包含文本以及其它盒。
——该盒是不是表格等等。
1.2。盒的背景色
——内边距和边框区域的背景样式由生成(该盒的)元素的& # 39;背景# 39;属性来指定。外边距背景总是透明的
2。外边距属性:& # 39;margin-top& # 39; & # 39; margin-right& # 39; & # 39; margin-bottom& # 39;, & # 39; margin-left& # 39;和& # 39;边缘# 39;
2.1。外边距属性指定了盒的外边距区的宽度
——& # 39;边缘# 39;简写属性一次性设置四周的外边距,而其它外边距属性只设置它们各侧的。这些属性适用于所有元素,但非替换的行内元素上的垂直保证金将不会产生任何效果 2.2。& lt; margin-width>值类型,可以取下列值之一:
——& lt; length>
指定一个固定宽度
- & lt; percentage>
百分比根据生成盒的包含块的宽度来计算。注意,这一点对于& # 39;margin-top& # 39;和& # 39;margin-bottom& # 39;也适用。如果包含块的宽度取决于该元素,那么产生的布局在CSS 2.1是未定义的
——汽车
——优势属性允许负值,但可能存在具体实现限制 2.3。& # 39;margin-top& # 39; & # 39; margin-bottom& # 39;
& # 39;margin-top& # 39;,, & # 39; margin-bottom& # 39;
值:,,,,,,& lt; margin-width> |,继承
初始:,,,,0
Applies :除显示类型为系表列中除了表标题,表和inline-table以外的所有元素(译注:也就是说,表系列显示值中,利润率——只适用于表标题,,,,inline-table,其余的都不适用,但利润率——对非表系列都适用)
继承:,,,,,,没有
百分比:,,,,参照包含块的宽度
媒体:,,,,,视觉
Computed 价值:,,,,,指定的百分比或者绝对长度 这两个属性对非替换的行内元素无效
2.4。& # 39;margin-right& # 39; & # 39; margin-left& # 39;
& # 39;margin-right& # 39;,, & # 39; margin-left& # 39;
值:,,,,,,& lt; margin-width> |,继承
初始:,,,,0
Applies :,,,,,除显示类型为系表列中除了表标题,表和inline-table以外的所有元素(译注:也就是说,表系列显示值中,利润率——只适用于表标题,,,,inline-table,其余的都不适用,但利润率——对非表系列都适用)
继承:,,,,,,没有
百分比:,,,,参照包含块的宽度
媒体:,,,,,视觉
Computed 价值:,,,,,指定的百分比或者绝对长度 2.5。& # 39;边缘# 39;
& # 39;边缘# 39;
值:,,,,,,& lt; margin-width>{1,4}, |继承
初始:,,,,见单独的各个属性
Applies :,,,,,除显示类型为系表列中除了表标题,表和inline-table以外的所有元素(译注:也就是说,表系列显示值中,利润率——只适用于表标题,,,,inline-table,其余的都不适用,但利润率——对非表系列都适用)
继承:,,,,,,没有
百分比:,,,,参照包含块的宽度
媒体:,,,,,视觉
Computed 价值:,,,,,见单独的各个属性 3。合并外边距
相邻的垂直外边距会合并,除了:
——根元素盒的边缘不合并
- - - - -如果一个带有间隙(间隙译注:是指明确属性导致元素位置移动形成的间隙)的元素的上外边距与下外边距相邻,它的外边距会和紧挨着的兄弟(元素)的相邻外边距合并,但合并后不会再和父级块的下外边距合并
以上是“html盒模型的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
