一、简介
display用于设置元素的外部或者内部显示类型，外部定义了在流式布局中如何展示，内部显示类型定义了元素内子元素的布局方式。
display属性按照取值不同分为了6大类，以及全局值。
| 序号 | 互联网分类 | MDN | 属性值 |
|---|---|---|---|
| 1 | 外部值 | <display-outside> |
display: block; display: inline; display: run-in;
|
| 2 | 内部值 | <display-inside> |
display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby;
|
| 3 | 列表值 | <display-listitem> | ...... |
| 4 | 属性值 | <display-internal> | ...... |
| 5 | 显示值 | <display-box> | ...... |
| 6 | 混合值 | <display-legacy> |
display: inline-block; display: inline-table; display: inline-flex; display: inline-grid
|
| 7 | 全局值 | Global |
display: inherit; display: initial; display: unset;
|
具体的讲解可参照：
<1>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Display
<2>https://segmentfault.com/a/1190000012833458
二、常见display属性值
行内元素 inline
<默认值>
特点：
- 和其他元素都在一行上，只有一行排不下才换行
- 设置宽高无效，宽度只与内容有关
- 设置内外边距只对左右起作用，对上下无效
- 行内元素只能容纳文本或者其他行内元素
最常见行内元素是span，同类的还有除了p以外的所有文本级标签
块元素 block
特点：
- 总是从新行开始且独占一行，默认宽度自动填满其父元素宽度
- 可以设置宽高及内外边距
- 可以容纳内联元素及其他块元素
常见的块级元素div、p，及所有的容器级标签
行内块元素 inline-block
特点：
- 和其他行内元素在同一行，
- 默认宽度为内容宽度
- 可以设置宽高及内外边距
三、块级元素和内联元素
块级元素
| 标签 | 说明 |
|---|---|
| address | 地址 |
| blockquote | 块引用 |
| center | 举中对齐块 |
| dir | 目录列表 |
| div | 常用块级容易，也是css layout的主要标签 |
| dl | 定义列表 |
| fieldset | form控制组 |
| form | 交互表单 （只能用来容纳其它块元素） |
| h1 | 大标题 |
| h2 | 副标题 |
| h3 | 3级标题 |
| h4 | 4级标题 |
| h5 | 5级标题 |
| h6 | 6级标题 |
| hr | 水平分隔线 |
| isindex | input prompt |
| menu | 菜单列表 |
| noframes | frames可选内容，（对于不支持frame的浏览器显示此区块内容 |
| noscript | 可选脚本内容（对于不支持script的浏览器显示此内容） |
| ol | 排序表单 |
| p | 段落 |
| pre | 格式化文本 |
| table | 表格 |
| ul | 非排序列表 |
行内元素
| 标签 | 说明 |
|---|---|
| a | 锚点 |
| abbr | 缩写 |
| acronym | 首字 |
| b | 粗体(不推荐) |
| bdo | bidi override |
| big | 大字体 |
| br | 换行 |
| cite | 引用 |
| code | 计算机代码(在引用源码的时候需要) |
| dfn | 定义字段 |
| em | 强调 |
| font | 字体设定(不推荐) |
| i | 斜体 |
| img | 图片 |
| input | 输入框 |
| kbd | 定义键盘文本 |
| label | 表格标签 |
| q | 短引用 |
| s | 中划线(不推荐) |
| samp | 定义范例计算机代码 |
| select | 项目选择 |
| small | 小字体文本 |
| span | 常用内联容器，定义文本内区块 |
| strike | 中划线 |
| strong | 粗体强调 |
| sub | 下标 |
| sup | 上标 |
| textarea | 多行文本输入框 |
| tt | 电传文本 |
| u | 下划线 |
| var | 定义变量 |
网友评论