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>The number 2 will not be displayed</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>


Display :none, the setting element will not be displayed, and the actual space of the element will not be preserved. But there is another visibility: hidden, which is the space for the element. Learn more, read the css visibility property.

Two: display: block, display the element as a block-level element

The element is displayed as a block-level element with a line break before and after the element. When set to block, the element can be set to width and height. The element is on its own line.


<!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 elements define 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 width and height of the span tag are displayed as 30px.


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

The span tag is an inline element. You can't set the height and width of the element, and the padding and margin of the top and bottom margins. However, when you set the display:block for the span tag, you can convert the inline element to a block element, so you can set it. Element height, width, and top and bottom padding and margin.

Three: display: inline, display the element as an inline element

The default property of display. Shows an element as an inline element with no line breaks before and after the element. We know that inline elements cannot be set in width and height, so once the element's display property is set to inline, setting the properties height and width is useless. The height that affects it at this time is generally the font-size and padding of the internal elements.

<!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>The p-tag and the div tag are both block elements and should not be displayed on the same line;</p>

             <div> is all inline elements at this time, no line breaks, and is displayed on the same line. </div>

         </div>

     </body>

 

</html>



Four: inline-block, display the element as an inline block element

Inline block elements. This attribute value combines the characteristics of inline and block. It can be combined with inline and block to understand inline-block, that is, it is an inline element, can be displayed on the same line, and can set width and height.

The above is a detailed introduction to the usage of common attribute values in the css display attribute, including specific examples of use of none, block, inline, and inline-block. Have a certain reference value, I hope to help friends in need!




Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.