1.块元素
常见块元素<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>
块元素特点：
- 比较霸道，自己独占一行
- 高度，宽度，外边距以及内边距都可控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器盒子，里面可以放行内元素或块级元素
！！！注意：
- 文字类的元素内不能使用块级元素
-
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div> - 同理，
<h1> — <h6>等都是文字类块级标签，里面也不能放块级元素
2.行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>...
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
！！！注意：
- 超链接里面不能再放超链接
- 特殊情况超链接
<a>里可以放块级元素，但是<a>先转换一下块级模式最安全
3.行内块状元素
在行内元素中有几个特殊的标签— < img /> 、 <input /> 、 <td> ，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
行内块状元素的特点：
- 和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙一行可以显示多个（行内元素特点）。
- 默认元素宽度就是它本身内容的宽度（行内元素特点）。
- 高度、行高，外边距以及内边距都可控制（块级元素特点）。
显示模式的转换：
- 转换成块元素：
display: block - 转换成行内元素：
display: inline - 转换成行内块状元素：
display: inline-block
元素显示模式总结：
| 元素模式 | 元素的排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可设宽、高 | 容器的100% | 容器级标签、任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可直接设宽、高 | 它本身内容的宽 | 容纳文本或行内元素 |
| 行内块元素 | 一行可放多个行内块元素 | 可设宽、高 | 它本身内容的宽 | / / / |
