CSS Display(显示)

display 决定元素以"块级"还是"行内"等方式显示，直接控制元素是否换行、宽高能否生效；display:none 与 visibility 则控制元素的显示与隐藏。它是理解页面布局的最底层开关。

块级元素与行内元素

块级元素（div、p、h1 等）独占一行、可以设置宽高；行内元素（span、a 等）与文字排在同一行，宽高由内容决定、设置无效：

span { width: 200px; }    /* 无效：行内元素忽略宽高设置 */
div { width: 200px; }     /* 生效：块级元素可设宽高 */

切换 display：inline / block

任何元素都可以通过 display 改变"性格"：把 a、span 变成块级可以让整行都可点击；把 li 变成行内可以做成横向菜单：

a { display: block; }      /* 链接占满整行，整行都可点击 */
li { display: inline; }    /* 列表项横向排列，变成水平菜单 */

inline-block：两全其美

inline-block 元素像行内元素一样可以并排，又能像块级元素一样设置宽高与内外边距，是做按钮、卡片、导航的利器：

.item {
  display: inline-block;
  width: 120px;      /* 可以正常设置宽高 */
  margin: 5px;
}
/* 效果：多个 .item 横向排开，且间距一致 */

display:none 与 visibility:hidden

两者都能"藏"起元素，区别很关键：display:none 把元素从文档流中彻底移除、不占空间；visibility:hidden 只是看不见，位置依然被占着：

.hidden { display: none; }         /* 元素消失，下方内容上移补位 */
.invisible { visibility: hidden; } /* 元素透明但保留占位，留出空白 */

其它常用值

display 家族还有表格系列与布局系列：table 相关值可做多列等高布局；flex 与 grid 是现代布局的主力；list-item 则让元素像列表项一样带项目符号：

.wrap { display: flex; }                    /* 弹性布局，子项横向排列 */
.center { display: flex; justify-content: center; }  /* 快速水平居中 */

小结

display 是元素的"显示开关"：block 独占一行、inline 不换行、inline-block 两者兼得；none 是"让位消失"、visibility:hidden 是"占位隐身"；学会按需切换 display，布局的自由度立刻上升一个台阶。