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

This article mainly shows you "what is the attribute value of the display attribute in HTML", the content is simple and clear, and I hope it can help you solve your doubts, so let me lead you to study and learn "what is the attribute value of display attribute in HTML" this article.

Display here I'll talk about the four most commonly used attribute values, inline, block, inlin-block, and none.

First let's talk about inline (n inline elements):

The property value is the default value. This element is displayed as an inline element without a newline character before and after the element. This property value is not generally set. Personal understanding, in fact, it is no different from the normal in-line elements, and more block and inline-block are used.

Then there is the attribute value of block (block-level element):

This attribute value is more interesting, set to block-level elements to occupy a row, the effect of line wrapping is the same as the p tag, but after this attribute value is set, as a block-level element, it has the width, height, and other block-level element spacing margin attribute settings, as well as spacing settings padding, but can not set row height (line-height).

There is also the value of the property inline-block (inline block):

This attribute value is relatively powerful, I just started to learn when basically see the need to set as long as the line is not wrapped will set this attribute value, on the one hand, he can be used as a block-level element, can have the characteristics of block, on the other hand, because I am beginner, for the center of the setting is more troublesome, all the use of this attribute value can be set line high, so that the text center, easy to use.

For the implementation of this navigation bar, these attributes are easy to use, mainly using the two attribute values of block and inline-block, inline-block as the implementation of several elements of the same line, and block as the implementation of line wrapping between elements. You can try.

For the last none attribute value:

Personally, I think it is more convenient to hide elements. When the mouse floats, change the attribute value of display to achieve the effect of showing and hiding elements.

What are the common values of display in HTML? let's take a look.

The main values of display in HTML that are easy to use in general project development are:

None (elements will not be displayed)

Block (the element will be displayed as a block-level element with a newline character before and after it)

Inline (the element will be displayed as an inline element without a newline character before and after it)

Inline-block (inline block element. New value for CSS2.1)

Table (elements are displayed as block-level tables, similar, with line breaks before and after the table)

Table-row (the element is displayed as a table row, similar)

Table-cell (the element is displayed as a table cell, similar to and).

The horizontal vertical center achieved by display!

Use position and margin to center elements horizontally and vertically; you must be familiar with them and often use them. But have you ever used display:table and table-cell to center elements horizontally and vertically?

Here are two ways to center elements horizontally and vertically using display:table-cell:

1. Using display:table and table-cell to center elements horizontally and vertically

Structure:

Dreamy snow ice

Style:

.wrap {

/ * Let the element render in tabular form * /

Display:table

Height:400px

Width:400px

Background:#fcf

}

.box {

/ * Let the element render in the form of table cells * /

Display:table-cell

/ * use vertical alignment of elements * /

Vertical-align:middle

}

.con {

Width:200px

Height:200px

Margin:0auto

Background:#999

}

Advantages:

This method will not have the same height restrictions as the previous two methods, this method can dynamically change the height according to the content of the element, so there is no space restriction, and the content of the element will not be cut off or have an ugly scroll bar because there is not enough space.

Disadvantages:

What are the shortcomings? This method is only suitable for modern browsers and does not work properly under IE6-7.

two。 Using display:table-cell to center elements horizontally and vertically

Structure:

Dreamy snow ice

Style:

.wrap {

Display:table-cell

Width:400px

Height:400px

Background:#fcf

Vertical-align:middle

}

.box {

Width:200px

Height:200px

Margin:0auto

Background:#999

}

Advantages:

The advantages of this method are the same as those of method 3, and there will be no high restrictions.

Disadvantages:

IE6 and IE7 do not support

The above is all the content of the article "what is the value of the display attribute in HTML". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.