display的那些属性到底是什么玩意？

    近来沦陷于布局不能自拔，每次审查元素时改display的属性，都可以看到有一溜的属性，但一直没有深究其中奥秘，这篇博文的主要内容就是阐释display属性的含义。

    display是什么？

    是一个指定用于元素的呈现框的类型，即不同的盒模型。

    括号内的数字代表css的generation。

    分类有以下六种：

    1.display-outside：block(1)，inline(1)，run-in（个人对display-outside的理解是区别于元素内内容的display-inside 的外在展现方式）

         run-in，如果display为run-in的盒模型包含一个块级盒子，那他就展现得像个块级元素；如果一个块级盒子跟着一个run-in盒子，那run-in盒子变成了块级盒子的第一个行内盒子；如果是一个行内盒子跟着，那run-in盒子就变成一个块级盒子。即受到上下文的影响（实验性质的属性，了解就好）

    2.display-inside：flow,flow-root,table,flex(3),grid(3),ruby,subgrid （如上所说，display-inside控制的就是元素内内容的呈现方式）

        flex，表现得像个块级元素，根据flexbox model呈现他的内容。

        grid，表现得像个块级元素，根据grid model呈现他的内容。（大部分浏览器还不支持这一属性）

        display-outside plus display-inside：block flow，inline table，flex run-in（之前都没有接触过这样的用法，也是现在在标准文档里看到，依字面意看是外在展现方式和内在展现方式的结合体，但有一点不解的是flex 和run-in的组合是不是反掉了。）

   3.display-listitem：list-item(1)，list-item block，list-item inline，list-item flow，list-item flow-root，list-item block flow，list-item block flow-root，flow list-item block;

        list-item属性值是生成一个容纳内容和单独的列表行内元素盒的块状盒

   4.display-internal：鉴于其中大部分属性和表格相关，显然表格已经落伍，在这里不详说。

   5.display-box：contents，none  

        contents，这样的元素他们自己并不会产生具体的盒子，他们会被他们自己的假盒子和子盒子代替。

   6.display-legacy：inline-block(2)，inline-table，inline-flex(3)，inline-grid

        inline-flex，表现得像个行内元素，根据flexbox model 来呈现他的内容；

        inline-grid，表现得像个行内元素，根据grid model来呈现他的内容；

        inline-block使得元素生成一个块状盒，该块状盒随着周围内容流动，如同他是一个单独的行内盒子，我理解为对外表现成行内元素，对内表现成块级元素。

     global：inherit，initial，unset

    上面所提到的属性组合关键词目前没有在浏览器得到很好地支持,所以仍然建议使用display。

    插一个眼，display：none和visibility：hidden在页面中的展示是有不同，具体体现为是否占用页面空间。

    浏览器兼容性：

    

图自MDN文档