In-depth understanding and application of display attributes (1)

          Display is officially defined as: Specifies the type of box that the element should generate. This article only focuses on the six commonly used values: none, block, inline, inline-block, inherit, and flex. Other tables, list-items, etc. are no longer recommended.

一、None

This element will not be displayed. It is mainly distinguished from when the visibility attribute is hidden.

1) When the element is none, js can get this element, but it cannot get/set the value of the visual attribute of this element (but it can set the value of custom attribute), such as the value of CSS attributes such as Width, Height, background, etc. This also means that when the element is none, the element is not rendered by the browser.

2) When the visibility value of an element is hidden, although the element is invisible, you can get/set any value of the element, including CSS-related attributes. This also indicates that the element at this time is rendered by the browser (it occupies a position in the document flow), but is in an invisible state.

3) The sample code is as follows:

Css code:

<span style="color: #800000;">#div01</span>{<span style="color: #ff0000;"> 
                display</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;
            }<span style="color: #800000;">
            #div02</span>{<span style="color: #ff0000;">
                visibility</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;
            }<span style="color: #800000;">
            #div03</span>{<span style="color: #ff0000;"> 
                width</span>:<span style="color: #0000ff;"> 100px</span>;
            }

Js/html code:

<div id="div01" data-name="div01" > div01</div>
        <div id="div02" data-name="div02" > div01</div>
        <div id="div03" > div03</div>
        <script type="text/javascript"><span style="color: #000000;">
            window.onload </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(){
                </span><span style="color: #0000ff;">var</span> div01 = document.getElementById('div01'<span style="color: #000000;">);
                </span><span style="color: #0000ff;">var</span> div02 = document.getElementById('div02'<span style="color: #000000;">); 
                </span><span style="color: #0000ff;">var</span> div03 = document.getElementById('div03'<span style="color: #000000;">); 

                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div01:0 background:  name:div01</span>
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"<span style="color: #000000;">));
                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div02:100 name:div02</span>
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"<span style="color: #000000;">));
                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div03:100</span>
                console.log( 'div03:' +<span style="color: #000000;"> div03.offsetWidth);
                
                div01.style.width </span>= 1000<span style="color: #000000;">;
                div01.setAttribute(</span>"data-name","div0101"<span style="color: #000000;">);
                div02.style.width  </span>= "800px"<span style="color: #000000;">;
                div02.setAttribute(</span>"data-name","div0202"<span style="color: #000000;">);
                div03.style.width  </span>= 800<span style="color: #000000;">;

                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div01:0 background:  name:div0101</span>
                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"<span style="color: #000000;">));
                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div02:800 name:div0202</span>
                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"<span style="color: #000000;">));
                </span><span style="color: #008000;">//</span><span style="color: #008000;">output: div03:800</span>
                console.log( 'div03:' +<span style="color: #000000;"> div03.offsetWidth);
            }
        </span></script>

2. Block

Set the element as a block-level element and apply box model related attributes. The default Width will be 100%, and the Height will be adaptive. Margin and padding are both valid. If no child elements occupying the width or height exist, the height is zero.

The code is as follows:

<span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="color: #800000; background-color: #f5f5f5;">
            #div01</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> red</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;">
            #div02</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                height</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> 100px</span><span style="color: #000000; background-color: #f5f5f5;">;</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> gray</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span><span style="color: #800000; background-color: #f5f5f5;">
            #div03</span><span style="color: #000000; background-color: #f5f5f5;">{</span><span style="color: #ff0000; background-color: #f5f5f5;">
                background</span><span style="color: #000000; background-color: #f5f5f5;">:</span><span style="color: #0000ff; background-color: #f5f5f5;"> green</span><span style="color: #000000; background-color: #f5f5f5;">;</span>
            <span style="color: #000000; background-color: #f5f5f5;">}</span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div01"</span> <span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div02"</span> <span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="div03"</span> <span style="color: #0000ff;">></span>div03<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

Screenshot of effect:

Three, inline

Inline elements or those modified as inline elements through display:inline have the behavior of inline elements.

1) Multiple inline elements will line up in a row, and there will be a gap of about 8 pixels between multiple inline elements. The solution to the 8 pixel gap is:

a). The Html text is consciously arranged in one line, as shown in the following code:

<span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a02<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>

b). Use margin-left:-8px, which is a negative value for marginq. You can also use negative values ​​for letter-spaceing and word-spaceing in the outer layer (such test elements need to reset the set attributes)

<span style="color: #800000;">.inline</span>{<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
                padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
                margin-left</span>:<span style="color: #0000ff;"> -8px</span>;
            }

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline01<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline02<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline03<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="inline"</span><span style="color: #0000ff;">></span>inline04<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

c). Add font-size:0px and -webkit-text-size-adjust:none to the outer element that wraps the inline element to achieve

<span style="color: #800000;">a</span>{<span style="color: #ff0000;">
                background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">  
                font-size</span>:<span style="color: #0000ff;"> 14px</span>;
            }<span style="color: #800000;">   
            .overWidth</span>{<span style="color: #ff0000;">
                white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;<span style="color: #ff0000;">
                font-size</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
                -webkit-text-size-adjust</span>:<span style="color: #0000ff;"> none</span>;
            }

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

2) The width and height of the Inline element are invalid

3) The padding of the Inline element is all valid, but the left and right margins are valid, and the up and down are invalid.

4) Inline elements wrap inline elements, and the width and height of the outer elements will be stretched by the inner ones

<span style="color: #800000;">.overWidth</span>{<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> inline</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;
            }

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

5) Block/inline-block elements wrap inline elements. By default, they automatically wrap when the width exceeds the width and the height expands.

a) Forcing no line breaks can be achieved through white-space:nowrap. At this time, the over-width will appear, and the display can be omitted through the combination of overflow:hidden and text-overflow:ellipsis.

<span style="color: #800000;">.overWidth</span>{<span style="color: #ff0000;">
                white-space</span>:<span style="color: #0000ff;"> nowrap</span>;<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
                border</span>:<span style="color: #0000ff;"> 1px solid gray</span>;<span style="color: #ff0000;">
                overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">
                text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;
            }

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="overWidth"</span> <span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a01<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>a000000002<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>