CSS 可见性属性

可见性属性（visibility）是CSS中用于控制元素可见性的属性，它决定了元素是否可见，但不会改变页面的布局结构。

基本语法

css 
元素选择器 {
  visibility: <值>;
}

常用值

1. visible（默认值）

visible是visibility属性的默认值，表示元素可见：

css 
.element {
  visibility: visible; /* 元素可见 */
}

2. hidden（隐藏元素）

hidden值表示元素不可见，但元素仍然占据页面布局空间：

css 
.element {
  visibility: hidden; /* 元素不可见但仍占据空间 */
}

3. collapse（表格元素专用）

collapse值主要用于表格元素，表示隐藏表格行或列，并且不占据空间：

css 
.table-row {
  visibility: collapse; /* 隐藏表格行且不占据空间 */
}

对于非表格元素，collapse值的效果与hidden相同。

与 display: none 的区别

visibility: hidden 和 display: none 都可以隐藏元素，但它们有重要区别：

特性 visibility: hidden display: none
可见性 不可见 不可见
布局空间 仍然占据空间 不占据空间
子元素继承 子元素默认继承hidden，但可以通过设置visible显示 子元素也被隐藏，无法通过设置display显示
事件响应 不会响应任何事件 不会响应任何事件
性能影响 重绘（repaint） 重排（reflow）和重绘

应用场景

1. 保持布局的隐藏元素

当需要隐藏元素但保持页面布局不变时，可以使用visibility: hidden：

html 
<div class="container">
  <div class="element">可见元素</div>
  <div class="element hidden">隐藏元素（仍占据空间）</div>
  <div class="element">可见元素</div>
</div>

<style>
.hidden {
  visibility: hidden;
}
</style>

2. 表格行/列的动态隐藏

对于表格，可以使用visibility: collapse来隐藏行或列，同时不影响表格的整体布局：

html 
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th class="hidden-column">工资</th> <!-- 隐藏列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td class="hidden-column">5000</td>
    </tr>
    <tr class="hidden-row"> <!-- 隐藏行 -->
      <td>李四</td>
      <td>30</td>
      <td>6000</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>7000</td>
    </tr>
  </tbody>
</table>

<style>
.hidden-row {
  visibility: collapse;
}

.hidden-column {
  visibility: collapse;
}
</style>

3. 子元素覆盖隐藏

当父元素设置visibility: hidden时，子元素可以通过设置visibility: visible来覆盖父元素的隐藏效果：

html 
<div class="parent">
  父元素内容（隐藏）
  <div class="child">子元素内容（可见）</div>
</div>

<style>
.parent {
  visibility: hidden;
}

.child {
  visibility: visible;
}
</style>

4. 悬停显示隐藏内容

可以使用visibility属性实现悬停时显示隐藏内容的效果：

html 
<div class="tooltip-container">
  悬停我
  <div class="tooltip">这是一个提示信息</div>
</div>

<style>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
}
</style>

注意事项

  1. 布局影响：visibility: hidden不会改变页面布局，元素仍然占据空间。

  2. 继承性：visibility属性具有继承性，子元素会继承父元素的visibility值。

  3. 事件响应：隐藏的元素（visibility: hidden）不会响应任何鼠标或键盘事件。

  4. 性能考虑：使用visibility: hidden只会触发重绘（repaint），而不会触发重排（reflow），性能影响较小。

  5. 与其他属性的关系：visibility属性与opacity属性不同，opacity: 0表示元素完全透明但仍然可见并响应事件，而visibility: hidden表示元素完全不可见且不响应事件。

浏览器兼容性

visibility值 Chrome Firefox Safari Edge IE
visible 完全支持 完全支持 完全支持 完全支持 IE6+
hidden 完全支持 完全支持 完全支持 完全支持 IE6+
collapse 完全支持 完全支持 完全支持 完全支持 IE8+

相关资源

继续探索CSS布局技术，掌握更多高级布局技巧！

最后更新：2026-02-08