In-depth understanding and application of the display attribute (1), in-depth understanding of the display

In-depth understanding and application of the display attribute (1), in-depth understanding of the display

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

I. None

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

1) when the element is none, js can get this element, but cannot get/set the value of the visual attribute of this element (but can set the value of custom attribute ), css attribute values such as Width, Height, and background indicate that when the element is none, the element is not rendered by the browser.

2) When the visibility value of an element is hidden, the element is invisible, but any value of the element can be obtained/set, including Css-related attributes. This indicates that the element is rendered by the browser (it occupies a position in the Document Stream) and is only invisible.

3) The sample code is as follows:

Css code:

#div01{                 display: none;                width: 200px;                background: red;            }            #div02{                visibility: hidden;                width: 100px;            }            #div03{                 width: 100px;            }

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">            window.onload = function(){                var div01 = document.getElementById('div01');                var div02 = document.getElementById('div02');                 var div03 = document.getElementById('div03');                 //output: div01:0 background:  name:div01                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));                //output: div02:100 name:div02                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));                //output: div03:100                console.log( 'div03:' + div03.offsetWidth);                                div01.style.width = 1000;                div01.setAttribute("data-name","div0101");                div02.style.width  = "800px";                div02.setAttribute("data-name","div0202");                div03.style.width  = 800;                //output: div01:0 background:  name:div0101                console.log( 'div01:' + div01.offsetWidth + " background: " + div01.style.background + " name:" + div01.getAttribute("data-name"));                //output: div02:800 name:div0202                console.log( 'div02:' + div02.offsetWidth + " name:" + div02.getAttribute("data-name"));                //output: div03:800                console.log( 'div03:' + div03.offsetWidth);            }        </script>

Ii. Block

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

The Code is as follows:

Effect:
Iii. inline
Any element in a row that is modified to an element in a row through display: inline has the behavior of an element in the row.
1) Multiple inline elements are arranged in a row, and multiple inline elements in parallel have an interval of about 8 pixels. The solution of the 8-pixel interval is as follows:
A) The. Html text is consciously lined up, as shown in the following code:
<a>a01</a><a>a02</a>
B ). use margin-left:-8px, that is, the negative value of marginq, you can also use letter-spaceing and word-spaceing as negative values in the outer layer (this sub-element needs to be reset to the set attribute)
.inline{                display: inline;                background: red;                margin: 0px;                padding: 10px;                margin-left: -8px;            }
<div class="inline">inline01</div>        <div class="inline">inline02</div>        <div class="inline">inline03</div>        <div class="inline">inline04</div>
C) add the font-size: 0px and-webkit-text-size-adjust: none to the outer element of the inline element.
a{                background: red;                  font-size: 14px;            }               .overWidth{                white-space: nowrap;                border: 1px solid gray;                font-size: 0px;                -webkit-text-size-adjust: none;            }
<div class="overWidth" >            <a>a01</a>            <a>a000000002</a>        </div>
2) the width and height of the Inline element are invalid.
3) padding of the Inline ElementAll valid, But margin is valid,Up/down invalid.
4) The Inline element wraps the inline element, and the width and height of the outer element are opened internally.
.overWidth{                display: inline;                border: 1px solid gray;            }
<div class="overWidth" >            <a>a01</a>            <a>a000000002</a>        </div>
5) The Block/inline-block element wraps the inline element. By default, the line feed is exceeded by ultra-width, and the height is supported.
A) the white-space: nowrap method can be used to enforce non-line breaks. If the width is exceeded, the display can be omitted through overflow: hidden and text-overflow: ellipsis.
.overWidth{                white-space: nowrap;                width: 100px;                border: 1px solid gray;                overflow: hidden;                text-overflow: ellipsis;            }
<div class="overWidth" >            <a>a01</a>            <a>a000000002</a>        </div>