html设置样式的标签（html标签中元素显示模式）

元素显示模式就是元素（标签）以什么方式进行显示，比如div标签自己占一行，一行可以放多个span标签。

HTML 元素分为块元素、行内元素、行内块元素，它们具体的用法和区别如下：

块元素是用于定义一个独立的区域，比如一个段落、一个标题、一个表格等。

常见的块元素有：h1-h6、div（最典型）、p、ol、ul、li等。

特点

• 块元素独占一行。
• 高度、宽度、外边距、内边距都可以控制。
• 宽度默认是容器（父级宽度）的100%。
• 是一个容器及盒子，里面可以放行内或者块级元素。
• 文字类的块元素内不能使用块级元素，如h1-h6 和 p 标签，里面不能放其他类型的块级元素。

行内元素是用于在同一行内显示文本，并不需要包含在其他元素内。

常用的行内元素有：a、strong、em、del、ins、b、i、u、span（最典型）等。

特点：

• 相邻行内元素在一行上，一行可以显示多个行内元素。
• 宽、高直接设置是无效的。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本和其他行内元素。

注意：

• 链接里面不能再放链接。
• 特殊情况下a标签中可以放块级元素，但给a标签转换一下块级模式最安全。

行内块元素是用于在同一行内显示文本，并不需要包含在其他元素内，但是可以包含图片或其他多个文本元素。

常用的行内块元素有：

• <blockquote>：用于引用其他文档中的文本，可以设置引用文本的样式。
• <figure>：用于在同一行内显示图片或其他多个文本元素，可以设置图片或其他多个文本元素的样式。

特点：

在行内元素中有几个特殊的标签，img、input、td，它们同时具有行内元素和块元素的特点。

1.块元素定义了一个独立的区域，不会和其他元素融合在一起，而行内元素和行内块元素都属于行内元素，它们都可以包含其他元素。

2.块元素可以设置高度和外边距，而行内元素和行内块元素都不能设置高度和外边距。

3.块元素只能包含文本或其他图片等元素，而行内元素和行内块元素都可以包含其他任意类型的元素。

4.块元素的外边距、填充、宽度等属性可以根据实际需求设置，而行内元素和行内块元素的样式则完全根据实际需求设置。

特殊情况下，我们需要元素模式的转换，比如要增加a标签链接的触发范围。

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display:inline-block;