[CSS]元素显示模式、及转换显示模式的方法

元素按照显示模式可分为：块元素、行内元素、行内块元素。

 

块元素

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

独占一行。

宽、高、内边距、外边距可控制，宽度默认为100%。

是一个容器及盒子，除文字类元素（<h1>~<h6>、<p>）外，里面可以放任意块元素。

ps：文字类元素内放块级元素，实际展示到页面时，块级元素会被自动移出文字类元素，且文字类元素会被拆成两个，造成展示异常。

 

行内元素（内联元素）

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

相邻行内元素可显示在同一行，一行可显示多个。

直接设置宽、高无效。（不显示效果）

默认宽度是起内容的宽度。

行内元素只能容纳文本或其他行内元素。

链接标签中不能放链接。

<a>标签内可以放块级元素，但先将<a>转换成块级模式更安全。

 

行内块元素

<img> <input> <td>

同时具有块元素和行内元素的特点。

和相邻元素（行内块）在同一行时，它们之间会有空白缝隙。

默认宽度是它本身内容的宽度。（行内元素特点）

宽、高、内边距、外边距可以控制（块级元素特点）

 

元素显示模式转换

特殊情况下，需要让某元素具备另一种模式的特性。（比如：要增加<a>的触发范围）

display: block;                /* 转换为块级元素 较常用 */
display: inline;               /* 转换为行内元素 */
display: inline-block;         /* 转换为行内块元素 较常用 */