CSS 元素显示模式（重点）

1、典型的块元素

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

特点：

• 独占一行
• 高度、宽度、内外边框可控制
• 宽度默认 100%
• 是一个容器盒子，里面可以放行内元素或者块级元素

注意：文字元素内不可放块元素，如<p>中不可以放<div>

2、行内元素

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

特点：

• 一行可放多个
• 高度、宽度设置无效 ※
• 默认宽度为自身内容宽度
• 行内元素只能容纳文本或其他行内元素
• 上下内外边距设置无效

注意：链接里不可再放连接，但可以放块级元素。

3、行内块元素

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

特点：

• 一行可以放多个（行元素特点）
• 默认宽度就是自身内容的宽度（行元素特点）
• 高度、宽度、内外边距可控（块元素）

4、元素模块转化 ※

1）行转块：display:block;
2）块转行：display:inline;
3）转为行内块：diaplay:inline-block;