display

一、简介

display用于设置元素的外部或者内部显示类型，外部定义了在流式布局中如何展示，内部显示类型定义了元素内子元素的布局方式。
display属性按照取值不同分为了6大类，以及全局值。

序号	互联网分类	MDN	属性值
1	外部值		display: block; display: inline; display: run-in;
2	内部值		display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby;
3	列表值		......
4	属性值		......
5	显示值		......
6	混合值		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

<默认值>
特点：

1. 和其他元素都在一行上，只有一行排不下才换行
2. 设置宽高无效，宽度只与内容有关
3. 设置内外边距只对左右起作用，对上下无效
4. 行内元素只能容纳文本或者其他行内元素

最常见行内元素是span，同类的还有除了p以外的所有文本级标签

块元素 block

特点：

1. 总是从新行开始且独占一行，默认宽度自动填满其父元素宽度
2. 可以设置宽高及内外边距
3. 可以容纳内联元素及其他块元素
   常见的块级元素div、p，及所有的容器级标签

行内块元素 inline-block

特点：

1. 和其他行内元素在同一行，
2. 默认宽度为内容宽度
3. 可以设置宽高及内外边距

---

三、块级元素和内联元素

块级元素

标签	说明
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	定义变量