Detailed four property value usages common in CSS Display properties (code instance)

Source: Internet
Author: User
We are in the front-end development of the Web page, in order to make the site visually more beautiful, the effect is more rich, the powerful nature of CSS is essential. So here's a reference to a property that we often use when developing a Web page, CSS Display properties. Display properties are supported by all major browsers. Second, we all know that the display property specifies the type of box the element should generate. In the CSS display properties are often used, but also the most common property values: None, block, inline, inline-blockt.

Next, we will use the specific code example to one by one details the most common property value usage in the CSS display property.

One: Display:none, setting element does not display

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title>css display:none</title> <style>* {padding:0;margin:0;list-style:none;}. demo{width:200px;height:200px;margin:50px Auto;} UL li {float:left;} span {width:30px;height:30px;color: #fff; background:red;margin:5px;text-align:center;line-height:30px;}. A1{display:none;} </style></head><body><div class= "Demo" ><p> number 2 will not show up </p><ul><li> <span>1</span></li><li><span class= "A1" >2</span></li><li>< span>3</span></li><li><span>4</span></li><li><span>5</ Span></li></ul></div></body></html>

The above code is as follows:

Display:none, the set element is not displayed, and the space of the element's reality is not preserved. But there is another visibility:hidden, which is the space for preserving elements. Learn more, read CSS visibility properties.

Two: Display:block, displaying elements as block-level elements

Displays the element as a block-level element with a newline character before and after the element. When set to block, the element can be set to width and height. The element is exclusive to one row.

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title>css display:block</title> <style>* {padding:0;margin:0;list-style:none;}. demo{width:500px;height:200px;margin:50px Auto;} UL li {float:left;} span {display:block; Width:30px;height:30px;color: #fff; Background:red;margin:5px;text-align:center;line-height: 30px;} </style></head><body><div class= "Demo" ><p>span element defines width and height, width and height are displayed as 30px</p>< Ul><li><span>1</span></li><li><span>2</span></li><li> <span>3</span></li><li><span>4</span></li><li><span>5 </span></li></ul></div></body></html>

The above code is as follows:

The span label has a width height of 30px. When we remove the Display:block in the code, the following is displayed:


Obviously, when we remove the Display:block, the height and width of the span cannot be set.

The span tag is an inline element and cannot be set to the height, width, and left and right of the inside and outside margins of padding and margin, but when you set display:block for the span label, you can convert the inline element to a block element so that you can set the element height, The width and the upper and lower left and right margin padding and margin.

Three: Display:inline, displaying elements as inline elements

The default properties for display. Displays elements as inline elements with no line breaks before or after the elements. We know that inline elements cannot be set wide, so once the display property of an element is set to inline, setting the property height and width is not a good idea. The height at which this affects it is generally the height of the inner element (font-size) and the padding.

<! DOCTYPE html><html><head><meta charset= "Utf-8" ><title>css display:block</title> <style>* {padding:0;margin:0;list-style:none;}. demo{width:1000px;height:200px;margin:50px Auto;}. Demo p{display:inline; color: #0081EF;}. Demo div{display:inline; color: #70DBDB;} </style></head><body><div class= "Demo" ><p>p tags and div tags are the same block elements that should not be displayed on the same line;</p> <div> This is all inline elements, not wrapped, displayed on the same line. </div></div></body></html>

The above code is as follows:

Four: Inline-block, displaying elements as inline block elements

Inline block element. This attribute value incorporates the properties of inline and block, and can be combined with inline and block to understand Inline-block, which is that it is both inline and can be displayed on the same line, and width and height can be set.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: