CSS 属性 display

Docs

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，display 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 display: flex 时会发生的细节。

css display
/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

block：这个值会生成一个块级元素盒子，同时在该元素之前和之后打断（换行）。简单来说就是，这个值会将该元素变成块级元素。
inline：该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。
inline-block：元素会产生一个块元素盒子，并且像内联盒子一样（表现得更像一个被替换的元素），可以融入到周围内容中。等同于 inline flow-root。
none：使元素不再显示，其对布局不会有影响（文档渲染得好像这个元素并不存在）。所有的后代元素也不会再显示。为了使元素占据一个它通常占据的空间，但实际上没有渲染任何东西，应该使用 visibility 属性。

无障碍问题

在一个元素中使用 display 的值为 none 将会从无障碍树中移除它。这将导致该元素及其所有后代元素不再通过屏幕阅读器技术展示。

如果你想要从视觉上隐藏元素，一个更好的替代方案是使用属性的组合将其直观地从屏幕删除，但是通过屏幕阅读器等辅助技术依然可以解析。

CSS 中有个 display 属性，能修改元素的显示类型，有 4 个常用值
- block：让元素显示为块级元素
- inline：让元素显示为行内级元素
- inline-block：让元素同时具备行内级、块级元素的特征
- none：隐藏元素
事实上 display 还有其他的值，比如 flex, 后续会专门学习;
行内替换元素（inline-replaced)：img 是行内替换元素不是行内块级元素。
- 和其他的行内级元素在同一行显示
- 可以设置宽度和高度
display 值的特性
- block：
  - 独占父元素的一行
  - 可以随意设置宽高
  - 高度默认由内容决定
- inline-block：
  - 跟其他行内级元素在同一行显示
  - 可以随意设置宽高
  - 可以这样理解
    - 对外来说，它是一个行内级元素
    - 对内来说，它是一个块级元素
- inline:
  - 跟其他行内级元素在同一行显示;
  - 不可以随意设置宽高;
  - 宽高都由内容决定;

编写 HTML 时的注意事项

块级元素、inline-block 元素
- 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
- 特殊情况，p 元素不能包含其他块级元素
行内级元素（比如 a、span、strong 等）
- 一般情况下，只能包含行内级元素

HTML
CSS

<div class="css-properties-display-demo">
  <div class="block-div">这是一个块级 div 元素</div>
  <div class="inline-div">这是一个行内 div 元素</div>
  <span class="inline-span">这是一个行内 span 元素</span>
  <span class="block-span">这是一个块级 span 元素</span>
  <img class="album" src="//gitcode.net/weixin_44007374/note_temp_img/-/raw/master/diqiu.jpg" alt="地球 Earth" />
  <input type="text" placeholder="这是一个 input 元素" />
  <img class="album" src="//gitcode.net/weixin_44007374/note_temp_img/-/raw/master/diqiua.jpg" alt="地球 Earth" />
</div>

.css-properties-display-demo {
  padding: 10px;
  background-color: #d7e9b9;
  color: #007;
  font-size: 16px;
  font-weight: bold;
}

.css-properties-display-demo > div,
.css-properties-display-demo > span,
.css-properties-display-demo > img,
.css-properties-display-demo > input {
  width: 200px;
  height: 100px;
  border: 2px dotted #000;
  border-radius: 6px;
}

.css-properties-display-demo > div.block-div {
  background-color: #fbc252;
}

/* 行内元素设置 width/heigh 无效，其宽高由内容撑开 */
.css-properties-display-demo > div.inline-div {
  background-color: #b08bbb;
  display: inline;
}

/* 行内元素设置 width/heigh 无效，其宽高由内容撑开 */
.css-properties-display-demo > span.inline-span {
  background-color: #0081c9;
  display: inline;
}

.css-properties-display-demo > span.block-span {
  background-color: #86e5ff;
  display: block;
}

.css-properties-display-demo > img:hover {
  background-color: #58287f;
  transform: scale(1.2);
  transition: all 0.5s;
}

http://localhost:3000/css-properties-display.html

这是一个块级 div 元素

这是一个行内 div 元素

这是一个行内 span 元素这是一个块级 span 元素地球 Earth