1、块元素

常见的块元素：
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<div>是最常见的块元素

块级元素的特点：
自身独占一行

高度、宽度、内外边距都可以自定义
宽度默认是父元素的100%
块元素里可以放行内、行内块、块元素
注意：
段落元素（文字元素）内不能放块元素

例如，p标签里不能放div标签，h1中也不能放div

2、行内元素
常见的行内元素：
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

其中<span>是最常见的行内元素

行内元素的特点：
相邻行内元素在一行，一行可以显示多个。

高度、宽度的设置无效，只会被文字撑开。

默认宽度就是文本撑开的长度

行内元素只能容纳行内元素和文本

注意：
超链接里不能容纳超链接

超链接可以放块级元素，但是为了代码工整，最好把a标签转换为块元素

3、行内块元素
常见的行内块标签：
<img />、<input />、<td>

因为它们具有块元素的特点和行内元素的特点，故称为行内块元素。

行内块元素的特点：
和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙
一行可以显示多个（行内元素特点）
默认宽度就是内容的宽度（行内元素特点）
高度、宽度、内外边距都可以自定义（块元素特点）
三种元素之间互相转换
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
例如：

div {

display: inline-block;

}

这样div就转换为行内块元素，就不会独占一行了

三种元素的总结

块元素   

一行只能放一个块元素 高度、宽度、内外边距都可以自定义 父容器的100% 块元素可以包含任何标签。
行内元素   

一行可以放多个行内元素 高度、宽度、内外边距都不可以自定义 它本身内容的宽度 容纳文本或者其他行内元素。
行内块元素   

一行可以放多个行内&行内块元素 高度、宽度、内外边距都可以自定义 它本身内容的宽度。