display 是 CSS 中最基础的属性之一——它控制元素如何生成盒子以及其子元素如何布局。
css
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display 实际上设置了两件事:盒子在外部如何表现(block/inline),以及其内部如何布局子元素(flow/flex/grid)。display: flex 的意思是"这个盒子是块级的,并且它的子元素是 flex 项目"。
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
一个关键区别:display: none 会折叠布局(并对屏幕阅读器隐藏);visibility: hidden 则会在元素原来的位置留下一个空隙。需要真正移除元素时用 display: none,需要隐藏但保留布局时用 visibility: hidden。
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
现代布局几乎完全建立在 flex(一维——行或列)和 grid(二维——行和列同时)之上。
display 决定了一个元素的整个布局行为。
了解 block、inline 与 inline-block 的区别能解释默认的文档流;flex/grid 是现代布局的核心;而 none 与 visibility 的区别则是一个常被考察、且在实践中很重要的细节。