深入理解並應用display屬性（一）

      Display在官方定義：規定元素應該產生的框的類型。本文只重點分析常用的6個值：none、block、inline、inline-block、inherit、flex。其他table、list-item等都不再建議使用。

一、None

此元素不會被顯示。主要與visibility屬性為hidden時相區分。

1) 當元素的none時，js可以取得此元素，但不能取得/設定此元素的可視化屬性的值（但可以設定自訂屬性的值），如Width、Height、background等Css屬性的值，這也表示當元素為none時，元素是不被瀏覽器渲染的。

2) 當元素的visibility值為hidden時，元素雖然不可見，但可以取得/設定元素的任何值，包含Css相關屬性。這也顯示此時的元素是被瀏覽器渲染的（在文件流程中是佔有位置的），只是處於不可見的狀態。

3) 範例程式碼如下：

Css代碼：

<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代碼：

<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>

二、Block

設定元素為區塊級元素，可套用盒子模型相關屬性。預設Width會100%，Height自適應。 Margin、padding都有效。如果沒有佔寬或高的子元素存在，則高度為零。

程式碼如下：

<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>

效果截圖：

 

三、inline

行內元素或透過display:inline修飾為行內元素的都具有行內元素的行為。

1) 多個inline元素會排成一行，並列的多個inline元素之間會存在8個像素左右的間隔，8像素間隔解決方法：

a). Html文本有意識的都排成一行，如下代碼所示：

<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). 利用margin-left:-8px，也就是marginq負值實現，也可以在外層使用letter-spaceing和word-spaceing為負值的方式實現（此種試子元素需要重置被設定屬性）

<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). 包裹inline元素的外層元素加上font-size:0px和-webkit-text-size-adjust:none實作

<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) Inline元素的width和height無效

3) Inline元素的padding都有效，但margin左右有效，上下無效。

4) Inline元素包裹inline元素，外層元素的width和height會被內部的撐開

<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元素包裹inline元素，預設超width自動換行，height撐開。

a) 強制不換行可以透過white-space:nowrap來實現，此時超width的就會浮出來，可以透過overflow:hidden和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>