跳到主要内容

display

2025年03月31日
柏拉文
越努力,越幸运

一、认识


二、语法


/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

三、问题


3.1 display:inline-block 什么时候不会显示间隙?

3.2 什么是幽灵空白节点? 如何消除“幽灵空白节点”的影响?

3.3 li 与 li 之间有看不见的空白间隔是什么原因引起的?如何解决?

3.4 两个 display: inline-block 元素放到一起会产生一段空白间隙,解决方法?