CSS-深度掌握 display、visibility 与 overflow 属性

前言

在前端布局中，如何控制元素的显示、隐藏以及内容溢出，是每个开发者必须掌握的基本功。本文将梳理这三大属性的核心用法，并带你通过对比搞清楚它们的底层区别。

一、 display 属性：改变元素的“性格”

display 属性决定了元素生成的盒子类型，是控制布局最直接的方式。

属性值	含义	特点
inline (默认)	行内元素	不独占一行，不能设置宽高。
block	块状元素	独占一行，可以设置宽高、内外边距。
inline-block	行内块元素	既能与其他元素并排，又能设置宽高。
none	隐藏元素	元素从 DOM 树中“消失”，不占据原有空间。
inherit	继承	继承父元素的 display 属性。

---

二、 visibility 属性：隐藏的艺术

visibility 属性用于设置元素的可见性，但它与 display: none 有本质区别。

属性值	含义	特点
visible (默认)	可见	正常显示。
hidden	不可见	元素不可见，但依然占据原有的布局空间。
collapse	折叠	专门用于表格 (row/column)，折叠后不影响布局；用于其他元素等同于 hidden。

💡 核心面试题：display: none vs visibility: hidden

1. 空间占用：none 不占位，hidden 占位。
2. 回流/重绘：none 会引起回流（Reflow），hidden 只引起重绘（Repaint），性能开销较小。
3. 继承性：父元素 hidden，子元素设置 visible 仍可显示；父元素 none，子元素无论如何都不会显示。

---

三、 overflow 属性：处理溢出的智慧

当子元素的大小超过父容器时，overflow 决定了多出的部分该如何安置。你可以通过 overflow-x 或 overflow-y 进行单向控制。

属性值	含义
visible (默认)	溢出可见，内容会超出容器边界。
hidden	溢出隐藏，超出部分被直接剪裁。
scroll	滚动显示，无论内容是否溢出，都会显示滚动条占位。
auto	自动处理，只有当内容真正溢出时，才会出现滚动条（最常用）。

---

四、 实战技巧：文字溢出省略号

这是 overflow 最经典的实战场景——单行文本超出显示省略号：

.text-ellipsis {
  width: 200px;
  white-space: nowrap;      /* 强制不换行 */
  overflow: hidden;         /* 溢出隐藏 */
  text-overflow: ellipsis;  /* 显示省略号 */
}