Fe-interview: [css] 第86天 display有哪些值？分别说明他们的作用是什么？

[haizhilin2013]

第86天 display有哪些值？分别说明他们的作用是什么？

[dondonZh]

block
none
inline-block
initial
table
inline
flex
自己能打出来的只有这些

[xjt31012]

display:block/inline-block 给元素转块/转行内块
display:inline 把元素转成内联元素（我很少用到）
display:none让元素消失，不显示
display:flex弹性布局
我常用的就是这些

[pokerLife]

你们居然忘记 css grid 网格布局

 display:grid;

[haizhilin2013]

@pokerLife 这提示很是及时

[quitone]

block
inline-block
inline
table
table-cell
flex
inline-flex
grid
inline-grid

[xiangshuo1992]

MDN，真香
元素盒模型分为 外部显示模型 和 内部显示模型

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

[nowherebutup]

block
inline-block
inline
flex
table

none

table-cell
grid
inline-flex