块级元素是单独占一行，有宽高可以修改。
行元素不会自动换行，并且元素没有宽和高。
行内块元素不会自动换行，但可以设置宽和高。
1. 先说下 display属性
功能：规定元素显示的类型。1
display: block;
display 的各种显示类型
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素，此元素前后带有换行符 |
| inline | 此元素将显示为内联元素，此元素前后没有换行符 |
| inline-block | 此元素会被显示为行内块元素 |
| list-item | 此元素会作为列表显示 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 table ），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 table），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 tbody）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 thead）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 tfoot）。 |
| table-row | 此元素会作为一个表格行显示（类似 tr）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 colgroup）。 |
| table-column | 此元素会作为一个单元格列显示（类似 col） |
| table-cell | 此元素会作为一个表格单元格显示（类似 td 和 th） |
| table-caption | 此元素会作为一个表格标题显示（类似 caption） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
通过display 属性改变标签展示类型，标签会拥有相应类型的标签特点。
2.根据标签默认 display 属性划分类别
2.1 块元素
块元素具备如下特性:
1.默认独占父级的一行，不能够与其他元素处于同一行；
2. 能够设置宽高(换言之:设置宽高无效)；3.外边距设置生效。
常见的块元素包括
- 网页、框架等基本结构块: html,body,iframe.
- 网页标题块: title.
- 表单结构块: form,fieldset,legend.
- 布局结构块: div
- 标题段落结构块: h1~h6,p
- 列表结构块: dl,dt,dd,ul,ol
- 结构装饰块: hr
2.2 行元素
行元素具备如下特性:
1. 默认由内容撑开高度，与其他行元素能够处于同一行；
2. 不能够设置宽高(换言之:设置宽高无效)；
3. 纵向外边距失效，横向外边距生效。
常见行元素包括:
- 行内包含框： span
- 超链接: a
- 图像: img
- 各类文本修饰类标签: abbr,acronym,b,bdo,big,cite,code,del,dfn,em,i,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,u,var等
- 表单对象包含框: select,button,label,textarea
- 可执行对象包含框: object
2.3 第三类元素
除了行元素和块元素之外，还存在不少种类的元素，在这里统称为第三类元素
- display:none; head,link,meta,style.script等
- display:list-item; li,
- display:table; table
- display: table-row; tr
- display: table-header-group; thead
- display: table-row-group; tbody
- display: table-footer-group; tfoot
- display: table-column; col
- display: table-column-group; colgroup
- display: table-cell; td,th
- display: table-caption; caption
- display: inline-block; input,option,optgroup
各类元素都可以使用display属性进行元素类型的转换,例如，行和块元素之间可以通过 display:block; 和 display:inline; 命令相互转换。
display:none; 和 visibility:hidden; 均能够实现元素的隐藏，所不同的是，设置display:none; 的元素并不会占据任何物理空间，而设置 visibility: hidden;的元素，虽然视觉上看不到，但依旧会占据物理空间。
