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 的区别则是一个常被考察、且在实践中很重要的细节。