HTML5 标签显示模式

标签的显示模式

• 标签有三种显示模式
• 三种模式能互相转化

块级元素（block-level）

常见块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> ...

特点

1. 比较霸道，独占一行
2. 高度、宽度、外边距、以及内边距都是可以控制的。
3. 宽度默认 100%。
4. 是一个容器及盒子，里面可以放行内元素或者块级元素。

注意

一些文字类标签里不能放块级元素，比如：<p>、<h1>~<h6>、<dt>

行内元素（inline-level）

常见行内元素，有些地方称 行内元素 为 内联元素。

<span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u> ...

其中 <sapn> 标签是最典型的 行内元素。

特点

1. 相邻元素在一行上，一行可以显示多个元素。
2. 高、宽是无效的。
3. 默认宽度是它本身内容的宽度。
4. 行内元素只能容纳文本或者其他行内元素。

行内块元素 (inline-block)

它是行内元素中特殊的一类，能改变宽高。

<img/>、<input/>、<td>

特点

1. 显示在一行上，一行可以显示多个。
2. 默认宽高是容器里内容的宽高。
3. 高度、行高、外边距 以及 内边距 都可以控制。

转换 display

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