Detailed explanation of the usage of display in css

CSS is an essential part of web design, and the display attribute is one of the more important attributes. The main function of the display attribute is to control the display mode of elements in the web page, including block, inline, inline-block, flex, grid and other methods. In this article, we will introduce the usage of display attribute.

1. block

block is the default value of the display attribute. When an element is set to block, it will be displayed as a block-level element on the page, which will occupy an entire line and wrap automatically. Common block-level elements include p, h1~h6, div, etc. Block-level elements can set attributes such as width, height, margins, and padding, or hide the element through display:none.

Sample code:

<div>我是一个块级元素</div>

2. inline

Inline is another common display attribute. When an element is set to inline, it will appear on the page as an inline element, it will not wrap and will fit within a single line. Common inline elements include a, span, img, etc. The width and height of an inline element depend on the content of the element. Margins and padding cannot be set, and the element cannot be hidden through display:none.

Sample code:

<a href="#">我是一个内联元素</a>

3. inline-block

inline-block is a combination of block and inline. When an element is set to inline-block , it will be displayed as an inline block-level element on the page. It will not occupy an entire line, but it can have width, height, margins, and padding, and display:none can be set.

Sample code:

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

Flex is a newly added attribute in CSS3, which can make the layout of elements more flexible. When an element is set to flex, it becomes a container, and the sub-elements inside can flexibly adjust the width, height and layout by setting the flex attribute. You need to set display:flex to enable the flex attribute. You can set flex-direction, justify-content, align-items, align-content and other attributes to control the layout of child elements.

Sample code:

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid is another newly added property in CSS3, which can be used to create grid layout. Similar to flex, you need to set display:grid to enable the grid attribute. You can control the layout of the grid through attributes such as grid-template-rows, grid-template-columns, and grid-template-areas.

Sample code:

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

The above is the usage of the display attribute. You can choose the appropriate attribute according to your needs to control the layout of elements and achieve the effect of web design.

The above is the detailed content of Detailed explanation of the usage of display in css. For more information, please follow other related articles on the PHP Chinese website!