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

This article mainly shows you the "what is the meaning of the display attribute in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what is the meaning of the display attribute in css" this article.

First of all, let me give you a few values commonly used in cssdisplay: none, block, inline, inline-block.

Next, we use specific code examples to explain the usage of cssdisplay properties in detail.

I. introduction of specific examples of cssdisplayblock attributes

Cssdisplay:block attribute instance

* {padding:0;margin:0;list-style:none;}

Ulli {float:left;}

A {

Display:block

Width:30px;height:30px

Color:#fff

Background:green;margin:5px

Text-decoration:none

Text-align:center

Line-height:30px

}

one

two

three

four

five

The above code is accessed through a browser, as shown in figure 1:

Eb43f3f17448da89e19b35d8d70e4b7.png

We comment out the display:block; attribute in the a tag, and the effect is shown in figure 2:

1b897a81fdb8a9e72c12eec7d6c0f42.png

So through the comparison between figure 1 and figure 2, you can find that because the display:block attribute is set in figure 1, the element block in a can display the width, height and inner and outer margin settings. In figure 2, just removing the displayblock attribute causes all element blocks to be unable to set width and height.

That is, the displayblock attribute sets the inline element to a block-level element, and then sets its width and height and the left and right inner and outer margins padding and margin. We can achieve the desired effect through this attribute.

2. Specific examples of cssdisplaynone attributes

Cssdisplay:none attribute instance

* {padding:0;margin:0;list-style:none;}

Ulli {float:left;}

A {

Display:none;width:30px;height:30px;color:#fff;background:green;margin:5px;text-decoration:none;text-align:center;line-height:30px;}

The an element will not be displayed

one

two

three

four

five

The effect is as follows:

Ad0cb1f3cb1e3fd0fe8a8d9550f354a.png

You can see from figure 3 that after we set the display:none; attribute for a, all its elements are hidden and will not be displayed. So it is obvious that the property value that display hides is the none property. Displaynone is usually used in the design of the first and second levels of the navigation bar.

III. Introduction of cssdisplayinline attributes

Cssdisplay:inline attribute instance

P {display:inline}

The p tag is a block-level element.

It appears as an inline element with no line wrapping.

The above is all the content of the article "what does the display attribute in css mean?" 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.