Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what is the concept of attribute value of display attribute in html". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Each element on a web page is a rectangle. The display attribute specifies the type of box that the element should generate. The display attribute is one that we often use in front-end development.

Introduction to common attribute values:

The default value for block block objects. Add a new row after using this value as the object

None hides objects. Unlike the hidden value of the visibility property, it does not reserve its physical space for hidden objects

The default value for inline inline objects. Use this value to delete rows from the object

Inline-block inline block element. This attribute value combines the features of inline and block, that is, it is both an inline element and can be set to width and height.

1. Display:block

1. Block: the element will be displayed as a block-level element, with a newline character before and after the element, which is usually used when converting inline elements to block-level elements. So what are block-level elements? What are the in-line elements?

2. Block level elements:

It is always shown in the form of a block, occupying a whole line. Several sibling block elements are arranged from top to bottom (except for the use of the float attribute).

You can set height, width, external patches in all directions (margin), and internal patches in all directions (padding).

When the element width (width) is not set, its width is 100% of its container, unless we set it a fixed width.

Other block-level or inline elements can be nested within block-level elements.

The display attribute value of a block-level element defaults to block.

3. In-line elements

It does not occupy an entire line, but only occupies its own width and height of the space, that is, the width and height of the element is supported by its text content. Several sibling inline elements are arranged from left to right (that is, one inline element can be in one line with other inline elements), arranged from top to bottom.

Inline elements cannot set height or width, their height is generally determined by the size of their font, and their width is controlled by the length of the content.

Inline elements can only set the left and right margin value and the left and right padding value, but not the upper and lower margin value and the upper and lower padding value. So we can change the width of the elements in the line by setting the padding value around.

In general, inline elements cannot contain block-level elements.

The display attribute value of a block-level element defaults to inline.

II. Display:none

The value of display:none indicates that the element is not displayed. When you want an element to be hidden, you can set this attribute to an element, and it will disappear from the page, but the element is not deleted in the document, but is hidden in the structure of the page and not displayed in the page. But if you want the element to be displayed, you can set display:block for the element so that the element can be displayed on the web page.

III. Display:inline

The role of display:inline can convert a block-level element to an inline element, so the block-level element will no longer be able to set width and height, as well as up and down margin and padding. The actual width and height of this block-level element is auto, not the value we set.

IV. Display:inline-block

According to the name, we can see that it combines inline and block and retains their features. So the element with the inline-block attribute set not only has the property that the block element can set the width and height attributes, but also maintains the property that the inline element does not wrap.

This is the end of the content of "what is the concept of attribute value of display attribute in html". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.