Shulou(Shulou.com)06/01 Report--

This article mainly introduces what the display attribute of css means, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

First, let's look at the definition of the css display attribute.

The definition of the css display attribute is that you can hide or show the page element, or you can force the element to be block-level or inline. The display attribute is often used in page layout and JavaScript effects.

The four most commonly used property values in the css display attribute are block, inline-block, inline, and none.

Let's parse these four display attribute values in detail.

1. Block attribute value (display:block) of display

Set the element as a block element. If you do not specify the width and height, the width of the parent element will be inherited by default, and there will be a single line, even if the width is left. The height is generally based on the height of the child element. Of course, you can also set your own width and height.

Let's look at an example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

A {

Background: lightblue

Width: 300px

Display: block

}

Php Chinese website

Php Chinese website

Php Chinese website

The setting effect of the block attribute value of display is as follows:

2. Inline attribute value (display:inline) of display

Content spread width, will not occupy a single line, width and height is not supported, code wrapping will be parsed into spaces.

Example of the value of the inline attribute:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

Div {

Background: lightblue

}

Li {

Display: inline

}

Php Chinese website

Php Chinese website

Php Chinese website

The setting effect of the inline attribute value of display is as follows:

3. Inline-block attribute value (display:inline-block) of display

When the width is not set, the content spreads the width; it does not occupy a single line, supports width and height, and the code wrap is parsed into spaces. In short, the object is rendered as inline, but the content of the object is rendered as block, making it have both the width and height characteristics of block and the peer characteristics of inline.

4. None attribute value (display:none) of display

When an element is set to none, it neither takes up space nor can be displayed, which means that the element does not exist; this attribute can be used to improve rearrangement and redrawing.

Thank you for reading this article carefully. I hope the article "what is the display attribute of css" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.