CSS display properties

 The CSS display property allows web designers to freely set the display type of web elements. The display type of the HTML element itself is preset, and each different element has its own default value. Common display types are "block "Element" and "inline element", the default display:block is "block element", and the default display:inline is an inline element. The difference between the two is the space and type occupied by the display. In the following descriptions and examples will be presented one by one, CSS allows web designers to freely modify these default display types of HTML elements through the CSS display property.

The syntax of the CSS display property

display: display parameters;

There are actually many display parameters allowed by the CSS display property, but the three most commonly used are none, block, and inline. Among them, none is the effect of adjusting the element to "no display", block is displayed as a block element, and inline is It is displayed as an inside element, and others include list-item, table, and flex which are rarely used.

About the difference between display:block and display:inline

• display:block; //The display type of the element is set as a block element.
• display:inline; //The display type of the element is set as an inline element.

Supplement: Although we set the element to "display: block;", we can still force the element to be displayed as a line through the float or position attribute.

CSS display property example 1 : display:none;

This text will be displayed +<span style="display:none;">This text will disappear</span>+ This text will be displayed

The effect of the example

This text will show ++This text will show

We used the effect of "display:none;" to make the text in the span tag disappear.

CSS display property example two, display:block;

This is general text+<span style="background-color:#dddddd;">This is general text</span>+This is general text
<br><br>
This is general text+<span style ="display:block;background-color:#dddddd;">This text is a block element</span>+This is normal text

The effect of the example

This is a general word + This is a general text + This is normal text

This is a general text +This text is a block element+This is normal text

In the second example, we prepared two groups of text with span tags specially labeled. The first paragraph does not set the CSS display property, so the default value is displayed as a whole line, but the second group is set to "display: block; "Means that the span tag is forcibly changed to a block element, which will occupy a whole line of space at a time, so it becomes the effect shown in the example.

CSS display property example three, display:inline;

Text outside the block+<div style="background-color:#dddddd;">This is the default value of the DIV block</div>+ text outside the block
<br><br>
Text outside the block +<div style="display:inline;background-color:#dddddd;">This DIV block is set as an inline element</div>+ text outside the block

The effect of the example

Text outside the block+

This is the default value of the DIV block

+ Text outside the block

outside a block of text +

This DIV block is set as an insider element

+Text outside the block

Example 3 uses a DIV block to show the effect of display:inline, because the default value of the DIV block itself is "block element", so it can be displayed as a block without additional setting of CSS display, occupying a whole line at a time As shown in the example, one line of text in the code becomes three lines, because the middle is the DIV block, and then we use the inline parameter value of the display to modify the attributes of the DIV block to inline elements, so the final The result will not wrap, which is the effect of CSS display:inline.