Display

web页面中的任何元素都是一个长方形的盒子，display属性决定了这个盒子的行为。有一些常用的值如下，更多的属性值可参考https://developer.mozilla.org/en-US/docs/Web/CSS/display：

div {
  display: none;   
  display: inline;
  display: block;
  display: inline-block;
  display: flex;
  display: grid;
  display: run-in;
}

None

从页面上移除这个元素。DOM中存在，但是视觉上看不到。

Inline

元素的默认值。可以设置margin和padding，水平方向生效，垂直方向不生效。忽略width和height。

Block

一些元素被浏览器user agent stylesheet设置成 block。
_

Inline Block

和inline很像，但是可以设置width和height，垂直方向上的margin生效。

Flex

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Grid

https://css-tricks.com/snippets/css/complete-guide-grid/

Run-in

浏览器支持度不友好。

Table Values

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

让非table元素表现的像table元素。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://css-tricks.com/almanac/properties/d/display/