元素的显示模式

元素的显示模式就是元素(标签)以什么方式进行显示

元素的类型

HTML元素(HTML标签)一般分为块元素和行内元素

块元素

常见的块元素:标题标签h1-h6,p标签,div标签,ul标签,ol标签,li标签等

块元素的特点:

1.元素自己独占一行

2.高度,宽度和外边距以及内边距都可以设置

3.宽度默认是父级元素宽度的100%,不设置高度则是子级元素撑开

4.块级元素相当于是一个盒子,里面可以放行内或者块级元素

ps:1.文字类的元素内不能放块级元素,比如p标签主要用于存放文字,因此p标签里面不能放块级元素,特别是不能放div标签

2.同理,h1-h6标题标签内部也不能放其他块级元素

行内元素

行内元素也称内联元素,常见的行内元素:a标签,i标签,span标签等

行内元素的特点:

1.相邻行内元素在一行上,一行可以显示多个

2.高度和宽度直接设置是无效的,行内元素在水平方向上设置内外边距是有效的，在垂直方向上设置内外边距是无效的,在垂直方向上给行内元素设置内边距，在显示上是将元素范围扩大了，但实际上不会对周围元素有任何影响

3.默认宽度就是它本身内容的宽度

4.行内元素内部只能容纳文本或其他行内元素,不能放块级元素

ps:1.a标签内部不能放a标签,链接里面不能再放链接

2.a标签内部可以放块级元素,但是将a标签转换为块级元素最安全(display:block)

行内块元素

HTML元素中的特殊标签:img标签,input标签,td标签,它们同时具有块元素和行内元素的特点,通常称为行内块元素

行内块元素的特点

1.和相邻的行内元素以及行内块元素在一行上,但是它们之间会有空白缝隙(一行可以显示多个)

2.默认宽度就是它本身内容的宽度

3.宽度,高度,行高,以及内外边距都可以设置

元素显示模式的转换

转换为块级元素

display:block

转换为行内元素

display:inline

转换为行内块元素

display:inline-block