html的盒模型详解


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来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. 外边距属性指定了盒的外边距区的宽度

1

--'margin'简写属性一次性设置四周的外边距,而其它外边距属性只设置它们各侧的。这些属性适用于所有元素,但非替换的行内元素上的垂直margin将不会产生任何效果

2.2. <margin-width>值类型,可以取下列值之一:

1

2

3

4

5

6

--<length>

指定一个固定宽度

--<percentage>

百分比根据生成盒的包含块的width来计算。注意,这一点对于'margin-top''margin-bottom'也适用。如果包含块的宽度取决于该元素,那么产生的布局在CSS 2.1是未定义的

--auto

--margin属性允许负值,但可能存在具体实现限制

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

1

2

3

4

5

6

7

8

'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'

1

2

3

4

5

6

7

8

'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'

1

2

3

4

5

6

7

8

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

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

相关阅读:

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

css里有哪些长度单位

CSS( Cascading Style Sheets )集合

以上就是html的盒模型详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html隐藏控件方法

Html中<p>是什么

Html的文档需要描述时怎么做?

Html超链接怎么去掉下划线

Html标记分为哪两种

Html <br>与<p>标签区别

Html怎么设置button大小及颜色

Html如何让input隐藏

Html中如何实现图片排版

Html中的空格符号有哪些

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...