Detailed explanation of CSS display property

1. Overview

The CSS display attribute is used to set the display type of an element, or set the layout type of its child elements. displayThe applicability of the attribute value depends on the type of element and the context. Some attribute values ​​are only applicable to specific types of elements, so pay attention to compatibility and semantics when using them.

There are a total of 18 types of attribute values, which can be divided into the following six categories according to categories:

• External appearance (display-outside): block, inline.
• Internal representation (display-inside): flex, grid, table, flow, flow-root, ruby.
• Element class (display-listitem):list-item.
• Internal structure (display-internal): table-row, table-cell, table-column, table-caption, table-row-group, table-header-group, table-footer-group, table-column-group, ruby-base, ruby-text, ruby-base-container, ruby-text-container.
• Elements list (display-box): none, contents.
• combination group (display-legacy): inline-block, inline-table, inline-flex, inline-grid.

2. External manifestations

The effect of this type of attribute value is to specify the external display type of the element, that is, the element type in the page layout: block-level element or inline element.

1、block

​ This attribute value is used to set the explicit type of the element to a block-level element. In the page layout, it occupies a whole line of space and wraps lines before and after the element. Elements of this type can set attributes such as width, height, padding, and margin.

<style>
.d {
      
      
  display: block;
  width: 200px;
  height: 100px;
  background: pink;
}
</style>

<p>这是一段文本</p>
<div class="d">这是一个块级元素</div>
<p>这是第二段文本</p>

Page performance:

2、inline

​ This attribute value is used to set the explicit type of the element to an inline element. In the page layout, it can be located on the same line as other inline elements. The width, height, and vertical margin (top, bottom) attributes of this type of element are invalid. Set the horizontal direction. padding, margin (left, right) are valid, and when setting the vertical direction padding (top, bottom), is effective in element space, but does not affect alignment with inline elements on the same line.

<style>
.d1 {
      
      
  display: inline;
  width: 200px;
  height: 100px;
  margin: 10px 20px;
  padding: 20px 10px;
  background: pink;
}
</style>

<p>这是一段块级元素文本</p>
<span>这是一段行内元素文本</span>
<div class="d1">这是一个行内元素</div>
<span>这是第二段行内元素文本</span>

Page performance:

3. Internal performance category

The effect of this type of attribute value is to specify the internal display type of the element, that is, to define the layout of the sub-elements within the element.

1、flex

​ This attribute value is used to set the internal display type of the element to flexible layout and its external type to block-level elements. Elements of this type can control the layout and space of sub-elements on the standard axis through a series of related attributes. For more information, see:flex layout.

The main application scenarios of this attribute value are: horizontal center alignment of multiple block-level elements, etc.

<style>
  .d1 {
      
      
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
  }
  .d1>div {
      
      
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background: pink;
  }
</style>

<div class="d1">
  <div class="d1-1">第一个块级元素</div>
  <div class="d1-2">第二个块级元素</div>
  <div class="d1-3">第三个块级元素</div>
</div>

Page performance:

2、grid

​ This attribute value is used to set the internal display type of the element to grid layout, and its external type to block-level elements. Elements of this type divide the interior into rows and columns, into cells, and control the layout and size of the cells through a series of related attributes. For more information, see: grid layout.

The main application scenario of this attribute value is: horizontally and vertically aligning elements in multiple rows and columns.

<style>
.d2 {
      
      
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置行间距和列间距为20px */
  gap: 20px;
}
.d2>div {
      
      
  background: pink;
  text-align: center;
}
.d2>div:nth-child(2n){
      
      
background: yellow;
}
</style>

<div class="d2">
  <div class="d2-1">1</div>
  <div class="d2-2">2</div>
  <div class="d2-3">3</div>
  <div class="d2-4">4</div>
  <div class="d2-5">5</div>
  <div class="d2-6">6</div>
  <div class="d2-7">7</div>
  <div class="d2-8">8</div>
  <div class="d2-9">9</div>
</div>

Page performance:

3、table

​ This attribute value is used to set the element to a block-level element, and the internal display type is a table layout. The specific behavior is similar to the <table> element in HTML. It can be used to implement complex table structures and provide precise control over table styles and behaviors. For more information, see: table layout.

demo example:

<style>
.table {
      
      
	display: table;
	background: pink;
  border-collapse: collapse;
}
.row {
      
      
	display: table-row;
}
.cell {
      
      
	display: table-cell;
	border: 1px solid #cccccc;
}
</style>

<div class="table">
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">李四</div>
      <div class="cell">王五</div>
    </div>
    <div class="row">
      <div class="cell">张三三</div>
      <div class="cell">李四四</div>
      <div class="cell">王五五</div>
    </div>
    <div class="row">
      <div class="cell">张三三三</div>
      <div class="cell">李四四四</div>
      <div class="cell">王五五五</div>
    </div>
</div>

Page effect:

4、flow-root

​ This attribute value is used to set the element to a block-level element, and the internal display type is to establish a new block-level formatting context (BFC), which has related features such as including internal floats, excluding external floats, and preventing margin collapse.

demo example:

<style>
.d1 {
      
      
  /* 设置该属性 包含子元素的浮动 使其占据普通文档流位置 */
	display: flow-root;
	background: #ccc;
}
.d1-1 {
      
      
	float: left;
	width: 30px;
	height: 30px;
	background: red;
}
.d1-2 {
      
      
	float: right;
	width: 40px;
	height: 40px;
	background: yellow;
}
</style>

<div class="d1">
	<div class="d1-1">
		1111
	</div>
	<div class="d1-2">
		2222
	</div>
</div>
<div class="d2">
	这是第二个盒子
</div>

Page effect:

5. flow (experimental attribute)

​ This attribute value is used to set the display type inside the element to fluid layout, so that the layout of the element is no longer restricted by block-level elements and inline elements, and can automatically adjust the size and position according to the available space to adapt to different screen sizes. and layout requirements.

​ will be generated if the element has an explicit type of inline or run-in and participates in a block-level or inline formatting context. An inline box; otherwise a block-level box will be generated.

​ This attribute value attribute needs to be used together with other related layout attributes, such as flow-orientation, flow-from and flow-into etc. to achieve more specific layout effects.

​ However, this attribute value is currently in the experimental stage and is not fully supported by all browsers, so its use is not recommended.

6. ruby ​​(experimental properties)

​ This attribute value is used to set the ruby ​​annotation layout inside the element. Its behavior is equivalent to the <ruby> element in HTML. Ruby annotations are a special way of laying out text for displaying pronunciations, annotations, or translations in East Asian languages.

​ Use the display: ruby; attribute to lay out basic text and phonetic text and ensure they display correctly on the page.

​ However, the attribute is currently in the experimental stage and is not fully supported by all browsers. Currently, only Firefox and IE browsers support this attribute, so its use is not recommended. However, the <ruby> element is supported by almost all browsers, so it is more recommended to use the ruby ​​element.

​ There are other properties related to Ruby annotation, such as ruby-position (for controlling the position of phonetic text) and ruby-align (for Control the alignment of phonetic text), etc.

demo example:

<p style="display: ruby;">
		<span style="display: ruby-base;">漢</span>
    <span style="display: ruby-text;">かん</span>
		<span style="display: ruby-base;">字</span>
    <span style="display: ruby-text;">じ</span>
</p>
<br><br>
<ruby>
	汉 
	<rp>(</rp><rt>han</rt><rp>)</rp> 
	字 
	<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

Page effect:

4. List element class

​Attribute values ​​of this type are used to implement partial and style effects on list elements.

1、list-item

​ This attribute value is used to set the element type to a list element. The explicit type is a block-level element, similar to the <ul> internal <li> in HTML. element. After the element sets the attribute value, a ::marker pseudo-element will appear inside. As the icon tag of the list, we can combine list-style related attributes ( list-style-position, list-style-type, list-style-image) operate on this tag, these attributes can also be operated on <ul>, , icon tags of list elements such as a><ol>.

​ list-style-position is used to set the position of the icon tag in the element. The attribute values ​​are outside(默认) and inside.

​ list-style-type is used to set the style of the icon tag. Common attribute values ​​​​are disc(默认), square, decimalAnd so on.

​ list-style-image is used to set the icon tag to an image, and the attribute value is url(...).

demo example:

  <style>
    .div1-1 {
      
      
      display: list-item;
      list-style-position: outside;
      /* list-style-type 默认为disc */
      list-style-type: disc;
    }

    .div1-3 {
      
      
      display: list-item;
      list-style-position: inside;
      /* 设置列表icon为实心方块 */
      list-style-type: square;
    }

    .div1-4 {
      
      
      display: list-item;
      list-style-position: inside;
      list-style-image: url(./images/list-icon.png);
    }
  </style>

  <div class="div1">
    <div class="div1-1">
      这是第一个模拟列表元素的div
    </div>
    <div class="div1-2">
      这是一个正常的div元素
    </div>
    <div class="div1-3">
      这是第二个模拟列表元素的div
    </div>
    <div class="div1-4">
      这是第三个模拟列表元素的div
    </div>
  </div>

Page effect:

5. Internal structure class

​ This type of attribute value is used to set the structure and style of various layout internal elements.

1、table-row-group

​ This attribute value is used to set the element to the main content of the table, similar to HTML's <tbody>. For details, please see: table layout.

2、table-header-group

​ This attribute value is used to set the element to the header row of the table, similar to HTML's <thead>. For details, please see: table layout.

3、table-footer-group

​ This attribute value is used to set the element to the footer row of the table, similar to HTML's <tfoot>. For details, please see: table layout.

4、table-row

​ This attribute value is used to set the element to a table row, similar to HTML's <tr>. For details, please see: table layout.

5、table-cell

​ This attribute value is used to set the element to a table cell, similar to HTML's <td>, <th>. For details, please see: table layout.

6、table-column-group

​ This attribute value is used to set the element to a table column group, similar to HTML's <colgroup>. For details, please see: table layout.

7、table-column

​ This attribute value is used to set the element to a table column, similar to HTML's <col>. For details, please see: table layout.

8、table-caption

​ This attribute value is used to set the element to the title of the table, similar to HTML's <caption>. For details, please see: table layout.

9. ruby-base (experimental attribute)

​ This attribute value is used to set the element to the basic text of ruby ​​layout, similar to HTML's <rb> element.

​ This attribute value is currently in the experimental stage and is not fully supported by all browsers. Currently, only Firefox and IE browsers support this attribute, so its use is not recommended.

10. ruby-text (experimental attribute)

​ This attribute value is used to set the element to ruby ​​layout phonetic text, similar to HTML's <rt> element.

​ This attribute value is currently in the experimental stage and is not fully supported by all browsers. Currently, only Firefox and IE browsers support this attribute, so its use is not recommended.

11. ruby-base-container (experimental attribute)

​ This attribute value is currently in the experimental stage and is not fully supported by all browsers. Currently, only Firefox and IE browsers support this attribute, so its use is not recommended.

12. ruby-text-container (experimental attribute)

​ This attribute value is similar to HTML's <rtc> element.

​ This attribute value is currently in the experimental stage and is not fully supported by all browsers. Currently, only Firefox and IE browsers support this attribute, so its use is not recommended.

6. Element display class

​ This type of attribute value is used to set the display problem of the element and its descendant elements on the page.

1、none

​ This attribute value is used to set the element and its descendant elements not to be displayed on the page, and do not occupy page space, but the dom structure of the element exists, but is not displayed. The v-show syntactic sugar in Vue is implemented based on this attribute.

​ If you want the element to occupy space but not be displayed, you should use the visibility or opacity attribute.

demo example:

  <div class="div1" style="display: none;">
    这是第一个div
  </div>
  <div class="div2">
    这是第二个div
  </div>

Page effect:

2、contents

​ This attribute value is used to set the element itself not to be displayed, but its internal text, pseudo-elements and descendant elements to be displayed normally. However, this attribute is not recommended and does not comply with the specifications of most browsers.

demo example:

<div class="div2" style="display: contents;background: yellow;">
    这是第二个div
    <div style="background: #ccc;">
      这是第二个div的子元素
    </div>
</div>

Page effect:

7. Pre-combination category

​ This type of attribute value is used to set the effect of an element having two attribute values ​​at the same time. The effect is similar to a combination of the two.

1、inline-block

​ This attribute value is used to set the element type to an inline block element. It can be placed on the same line as other inline elements like inline, or it can be like blockSet attributes such as width, height, margins, etc. in the same way as elements.

2、inline-table

​ This attribute value is used to set the element type to an inline table element. It can not only set the inside of the element to a table layout, but also place the inline element on the same line as other inline elements.

​ has the same attributes as the table attribute except that it is placed on the same line as other inline elements.

3、inline-flex

​ This attribute value is used to set the element type to an inline flex element. It can not only set the internal layout of the element to flex, but also like the inline element and Other inline elements are placed on the same line.

​ has the same attributes as the flex attribute except that it is placed on the same line as other inline elements.

4、inline-grid

​ This attribute value is used to set the element type to an inline grid element. It can either set the inside of the element to a grid grid layout, or it can be like inlineElements are placed on the same line as other inline elements.

​ has the same attributes as the grid attribute except that it is placed on the same line as other inline elements.

demo example:

<style>
    .div1 {
      
      
      display: inline-block;
      width: 150px;
      height: 50px;
      background: red;
    }
    .div2 {
      
      
      display: inline-table;
      width: 150px;
      height: 50px;
      background: yellow;
    }
    .row {
      
      
      display: table-row;
    }
    .cell {
      
      
      display: table-cell;
    }
    .div3 {
      
      
      display: inline-flex;
      width: 150px;
      height: 50px;
      background: pink;
    }
    .div4 {
      
      
      display: inline-grid;
      width: 150px;
      height: 50px;
      background: green;
    }
</style>

  <div>
    <div class="div1">
      这是设置inline-blick的div
    </div>
    <div class="div2">
      <div class="row">
        <div class="cell">这是设置inline-table的div</div>
      </div>
    </div>
    <div class="div3">
      这是设置inline-flex的div
    </div>
    <div class="div4">
      这是设置inline-grid的div
    </div>
  </div>

Page effect:

8. Double value syntax

​ dispaly attribute also supports some double-value syntax, but it is not commonly used at present. The effect is the same as the pre-combined class. It is more recommended to use the predetermined class. For more information, see: display’s double-valued syntax.

1、inline flex

​ Equivalent inline-flex.

2、inline table

​ Equivalent inline-table.

3、inline grid

​ Equivalent inline-grid.

other. . .