@panhonhang
2020-02-17T16:22:56.000000Z
字数 1997
阅读 1059
css
从大的分类来说display的可以分为六个大类，分别是：
1.外部值
2.内部值
3.列表值
4.属性值
5.盒子值
6.全局值
外部值
display: block
设置了display: block的元素将显示为块级元素，此元素前后会带有换行符。我们常见的div、form 、h3、h4 、h3 、h4 、p 、table 、ul都是默认具有这个属性。
display: inline
设置了display: inline的元素将显示为行内元素。此元素会被显示为内联元素，元素前后没有换行符。常见的默认具有这个属性的元素有：button, input, big, i, small, tt, abbr, acronym, cite, code
display: run-in
元素会根据上下文作为块级元素或内联元素显示。不过这个值通常没人用它，并且只有IE和Opera支持它。
内部值
display: flow-root
元素生成块容器框，并使用流布局将其内容列出来。它总是为其内容建立新的块格式化上下文。使用这个属性之后，该元素会生成一个块级容器框，使用的是流布局。为里面内容创建新的块级格式化上下文。
display: table
这些元素的行为类似于<table>元素。它定义了一个块级框。
display: flex
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
关于弹性布局请看flex布局教程
display: grid
元素的行为类似于块元素，并根据网格模型布置其内容。将容器元素定义为一个 grid(网格) 布局。
关于请看grid布局：
display: ruby
该元素的行为类似于内联元素，并根据ruby格式化模型布置其内容。它的行为类似于相应的<ruby>HTML元素。
display: subgrid
如果父元素具有display:grid，则根据网格模型布置元素本身及其内容。
列表值
display: list-item;
为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。如果未<display-inside>指定任何值，则主框的内部显示类型默认为flow。如果未<display-outside>指定任何值，则主框的外部显示类型默认为block。
了解更多：display: list-item用法
属性值
display: table-row-group
此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
display: table-header-group
此元素会作为一个或多个行的分组来显示（类似 <thead>）。
display: table-footer-group
此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
display: table-row
此元素会作为一个表格行显示（类似 <tr>）。
display: table-cell
此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
display: table-column-group
此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
display: table-column
此元素会作为一个单元格列显示（类似 <col>）
display: table-caption
此元素会作为一个表格标题显示（类似 <caption>）
display: ruby-base
这些元素的行为与<rb>元素相似。
display: ruby-text
这些元素的行为与<rt>元素相似。
display: ruby-base-container
这些元素的行为类似于<rbc>匿名框生成的元素。
display: ruby-text-container
这些元素的行为与<rtc>元素相似。
盒子值
display: inline-block
类似于行内块元素，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
display: inline-table
此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
display: inline-flex
将对象作为内联块级弹性伸缩盒显示
display: inline-grid
栅格模型，类似inline-block；通过设置display的属性为inline-grid来创建网格容器；
全局值
display: inherit
规定应该从父元素继承 display 属性的值。
display: initial
inherit是继承的意思，也就是父元素下面所有的相邻子元素的CSS都继承了父元素的CSS。
display: unset
当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color, 则使用继承值；如果是没有继承特性的CSS属性，如background-color, 则使用初始值。