1.块级元素 (display:block)
特点：
- 占据其父元素（容器）的整个空间；
- 会新起一行
- 可以包含行内元素和其他块级元素
常见块级元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
<header>、<footer>、<aside>、<nav>、<section>、<artical>
2.行内元素 (display:inline)
特点：
- 只占据它对应标签的边框所包含的空间
- 会在水平方向排列
- 不能包含块级元素
- 元素间默认有间距
- 设置width、height、margin(上下)、padding(上下)无效 (替换元素除外)
常见的行内元素：
<a>、<span>、<textarea>、< input >、<button>、<label>、
<em>、<i>、<b>、<small>、<strong>、<select>、<img>
3.行内块元素 (display:inline-block)
使元素同时具有块级元素和行内元素的特性
既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排
4.元素分类
元素可以有不同的分类
- HTML元素可以分为行内元素（inline）、块级元素(block)、行内块元素(inline-block)
- 也可以分为替换元素和非替换元素
替换元素：
浏览器根据元素的标签和属性，来决定元素的具体显示内容
替换元素本身没有内容是“空元素”
非替换元素：
HTML大多数元素都是非替换元素，直接将内容展示给浏览器
例如<div>、<span>、<a>、<p>、<li>、<header>等大多数都是
5.行内替换元素
特点：
- 浏览器根据元素的标签和属性来决定具体显示内容
- 替换元素本身没有内容是“空元素”
- 设置width、height、margin（四个方向）、padding（四个方向）属性均有效
例：
- <input> 浏览器会根据<input>标签的type属性来决定是显示输入框、还是单选按钮等
- <img> 根据属性src的值来读取图片信息并显示出来
常见的行内替换元素：
<img>、<input>、<textarea>、<select>、<object>、<embed>、<video>、<audio>、<canvas>、<iframe>
6.行内非替换元素
特点：
- 内容直接表现给用户端
- 真正高度由内容的lline-height控制,与垂直方向的padding、margin、border均无关
- padding、margin左右起作用，上下不会影响行高
常见的行内非替换元素：<a>、<span>、<label>、<strong>
