元素类型
|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
| 块元素（block） | * 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。 * 块元素内部可以容纳其他块元素和行内元素。 * 可以定义 width，也可以定义 height。 * 可以定义 4 个方向的 margin。 |
| 行内元素（inline） | * 可以与其他行内元素位于同一行。 * 行内元素内部可以容纳其他行内元素，但不可以容纳块元素。 * 无法定义 height，也无法定义 width。 * 可以定义 margin-left 和 margin-right，无法定义 margin-top 和 margin-bottom。 |
| 行内块元素（ inline-block） | * 可以定义 width 和 height。 * 可以与其他行内元素位于同一行。 |
| 表格（table） | * 以表格形式显示，类似于 table 元素 |
| 表格行（table-row） | * 以表格行形式显示，类似于 tr 元素 |
| 表格单元格（table-cell） | * 以表格单元格形式显示，类似于 td 元素 |
元素类型转换
在 CSS 中，我们可以使用 display 属性来改变元素的类型。
语法
元素{dispiay:取值；}|--------------|----------------------|
| 属性值 | 说明 |
| inline | 转换为行内元素 |
| block | 转换为块元素 |
| inline-block | 转换为行内块元素 |
| table | 以表格形式显示，类似于 table 元素 |
| table-row | 以表格行形式显示，类似于 tr 元素 |
| table-cell | 以表格单元格形式显示，类似于 td 元素 |
| none | 隐藏元素 |
拓展：display:none 简介
- 在 CSS 中，我们可以使用 display:none 来隐藏一个元素，并且被隐藏的元素不再占据原来位置的空间。
- display:none 一般用来配合 JavaScript 动态隐藏元素，被隐藏的元素不占据原来位置的空间。
- display:none 不推荐用来隐藏一些对 SEO（Search Engine Optimization，搜索引擎优化）关键的部分。因为对于搜索引擎来说，它会直接忽略 display:none 隐藏的内容，不会把display:none 隐藏的内容加入权重考虑。
display:none 和 visibility:hidden 的区别
在 CSS 中，如果想要隐藏某一个元素，可以使用 display:none 或者 visibility:hidden 来实现。虽然两种方式都可以隐藏元素，但是它们之间有着本质的区别。
|-------------------|--------------------------------------------|
| display:none | 元素被隐藏之后，不占据原来的位置，也就是说元素"彻底地消失了，看不见也摸不着。" |
| visibility:hidden | 元素被隐藏之后，依然占据原来的位置，也就是说元素"并没有彻底消失，看不见但摸得着"。 |
拓展：display:table-cell功能用途
图片垂直居中于元素
配合使用 display:table-cell 和 vertical-align:middle 来实现大小不固定的图片的垂直居中效果。
语法
父元素
{
display:table-cell;
vertical-align:middle;
}
子元素{vertical-align:middle;}
等高布局
语法
盒子1{display:table-cell;}
盒子2{display:table-cell;}两个盒子都不定义高度时，大小而是由盒子的内容撑开。分别给两个元素都转换成"table-cell"，这时两个盒子高度相等，并且高度由两者高度的最大值决定。这就是 "自适应等高布局。"
|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
| 
| 
|
自动平均划分元素
当有多个元素横向排列时，可以为每一个元素定义 display:table-cell，它会自动平均划分元素，并且使得它们在同一行显示。
语法
父元素{display:table;}
子元素1{display:table-cell;}
······
子元素n{display:table-cell;}- 如果为父元素定义 display:table，为子元素定义 display:table-cell，然后为父元素定义一定的宽度，那么此时子元素的宽度就会根据子元素的个数自动平均划分。
拓展： 去除 inline-block 元素间距
- inline-block 元素之间会有一定的间距，这种间距有时会对布局产生影响。大多数时候为了不影响布局，需要去除 inline-block 元素的间距。
- 在 CSS 中，可以为父元素定义一个"font-size:0;"来去除 inline-block 元素的间距。
语法
父元素{font-size:0;}
子元素{display:inline-block}|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
| 
| 
|