块级元素（block）
典型代表：
<div>、<p>、<h1>~<h6>、<ul>、<li>、<section>...
特点：
- 独占一行
- 宽度默认占满父类容器宽度
- 可以设置width、height、margin、padding
- 子元素可以是任何类型
例子：
<div style="background: red;">A</div>
<div style="background: blue;">B</div>
行内元素（inline）
典型代表：
<span>、<a>、<strong>、<em>、<i>、<img>*（例外情况）、<label>
特点：
- 不会独占一行（跟文字一样一行内排列）
- 不能设置width/height（宽高取决于内容）
- margin上下无效，左右有效
- padding上下虽然有效，但不改变元素所占“文本行高度”
- 通常用于包裹少量文本
行内块元素（inline-block）
典型代表：
<img>、<input>、<button>、<select>
或者通过css改变：
display: inline-block;
特点：
- 像行内块元素一样一行可以并排
- 但像块级元素一样可以设置宽高
- margin和padding都完全生效
变更显示模式
几乎所有元素都可以通过css改变成其他类型的显示模式，html标签的默认类型只是“默认值”
块级元素 -> 行内元素/行内块元素
例如：
- 改成inline（行内元素）
div {
display: inline;
}
效果：多个div一行排列，就像span一样
- 改成 inline-block（行内块）
div {
display: inline-block;
}
效果：可以一行排列，也可以设置宽高
行内元素 -> 块级/行内块
- 改成block（变成大盒子独占一行）
span {
display: block;
}
- 改成 inline-block（最常用）
span {
display: inline-block;
}
这样span就能设置宽高，padding，margin
行内块元素
- block
img {
display: block;
}
图片就可以换行，像div一样表现
- 改成inline
img {
display: inline;
}
图片就会被当做文本来排列
