原创声明：本文所有图片和代码皆由本人制作和编写。
前言
在我无数次妄图设置块级元素的vertical-align、块级父元素的text-align以及行内元素的宽高并尝试无果之后，决定写下这个文章提醒健忘的我自己。
行内元素
性质
- 可允许多个行内元素在一行
- 超出一行就会占用下一行，从左向右排列
- 内容决定默认宽高
- 不可设置宽高
- 上下外边距的设置无效
典型元素
span,a
块级元素
性质
- 一个独占一行
- 内容决定高度
- 默认宽度继承自父元素
- 可设置宽高
- 元素前后会带换行符
典型元素
div，h系列，p，列表（ul,ol,li,dl,dt,dd），表格语义皮套（table,thead,tbody,thead），表单标签form
行内块元素
性质
- 视作不独占一行的块级元素
典型元素
img，单元格（td,th），表单控件（input,button,select...），iframe
常见遗忘情况
- 因为这些元素的默认高度都是由内容决定，所以没有内容就不会显示出来，即使设置了背景颜色。
- 因为div是块级元素，所以div嵌套div是没办法用text-align水平居中对齐的。
- 对块级元素ul也无法使用vertical-align居中于父容器，可使用行高。
- 因为span是行内元素，所以是无法设置宽高的。