深入理解和应用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代码：

#div01{

                display: none;

                width: 200px;

                background: red;

            }

            #div02{

                visibility: hidden;

                width: 100px;

            }

            #div03{

                width: 100px;

            }

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

            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>

二、Block

设置元素为块级元素，可应用盒子模型相关属性。默认Width会100%，Height自适应。Margin、padding都有效。如果没有占宽或高的子元素存在，则高度为零。

代码如下：

<html>

    <head>

        <style>

            #div01{

                background: red;

            }

            #div02{

                height: 100px;

                background: gray;

            }

            #div03{

                background: green;

            }

        </style>

    </head>

    <body>

        <div id="div01" ></div>

        <div id="div02" ></div>

        <div id="div03" >div03</div>

    </body>

</html>

效果截图：

三、inline

行内元素或者通过display:inline修饰为行内元素的都具有行内元素的行为。

1) 多个inline元素会排成一行，并列的多个inline元素之间会存在8个像素左右的间隔，8像素间隔解决办法：

a). Html文本有意识的都排成一行，如下代码所示：
<a>a01</a><a>a02</a>

b). 利用margin-left:-8px，也就是marginq负值实现，也可以在外层使用letter-spaceing和word-spaceing为负值的方式实现（此种试子元素需要重置被设置属性）
.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). 包裹inline元素的外层元素加上font-size:0px和-webkit-text-size-adjust:none实现

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

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

4) Inline元素包裹inline元素，外层元素的width和height会被内部的撑开

.overWidth{

                display: inline;

                border: 1px solid gray;

            }

<div class="overWidth" >

            <a>a01</a>

            <a>a000000002</a>

        </div>

5) Block/inline-block元素包裹inline元素，默认超width自动换行，height撑开。

a) 强制不换行可以通过white-space:nowrap来实现，此时超width的就会浮出来，可以通过overflow:hidden和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>