在此页

• 句法
• 可访问性关注
• 插值
• 注意事项
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table> .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

To both hide an element and remove it from the document layout , set the display property to none instead of using visibility .

句法

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;
					

visibility property is specified as one of the keyword values listed below.

值

visible

The element box is visible.

hidden

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility 设为 visible . The element cannot receive focus (such as when navigating through tab indexes ).

collapse

• For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display : none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
• Collapsed flex items are hidden, and the space they would have occupied is removed.
• For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.
• For other elements, collapse is treated the same as hidden .

可访问性关注

Using a visibility value of hidden on an element will remove it from the accessibility tree . This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

插值

Visibility values are interpolable between visible and not-visible . One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.

注意事项

• 支持 visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
• visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.

形式定义

初始值	visible
适用于	所有元素
继承	yes
计算值	如指定
动画类型	a visibility

形式句法

visible | hidden | collapse
					

范例

基本范例

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>
					

CSS

.visible {
  visibility: visible;
}
.not-visible {
  visibility: hidden;
}
					

Table example

HTML

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
					

CSS

.collapse {
  visibility: collapse;
}
table {
  border: 1px solid red;
}
td {
  border: 1px solid gray;
}
					

规范

规范	状态	注释
CSS Flexible Box Layout Module The definition of 'visibility' in that specification.	候选推荐	Defines the collapse value as it applies to flex items.
CSS Level 2 (Revision 1) The definition of 'visibility' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
visibility	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Internet Explorer doesn't support visibility: initial . 注意事项 Up to Internet Explorer 7, descendants of hidden elements will still be invisible even if they have visibility 设为 visible .	Opera 完整支持 4	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
collapse	Chrome 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Chrome treats visibility: collapse like hidden , leaving a white gap. 注意事项 Chrome supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Edge 完整支持 12	Firefox 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse 有设置。	IE 完整支持 10	Opera 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Opera treats visibility: collapse like hidden , leaving a white gap. 注意事项 Opera supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Safari 完整支持 1.3 注意事项 完整支持 1.3 注意事项 注意事项 Safari treats visibility: collapse like hidden , leaving a white gap. 注意事项 Safari supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	WebView Android 完整支持 ≤37 注意事项 完整支持 ≤37 注意事项 注意事项 WebView treats visibility: collapse like hidden , leaving a white gap. 注意事项 WebView supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Chrome Android 完整支持 18 注意事项 完整支持 18 注意事项 注意事项 Chrome treats visibility: collapse like hidden , leaving a white gap. 注意事项 Chrome supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Firefox Android 完整支持 4 注意事项 完整支持 4 注意事项 注意事项 Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse 有设置。	Opera Android 完整支持 10.1 注意事项 完整支持 10.1 注意事项 注意事项 Opera treats visibility: collapse like hidden , leaving a white gap. 注意事项 Opera supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Safari iOS 完整支持 1 注意事项 完整支持 1 注意事项 注意事项 Safari treats visibility: collapse like hidden , leaving a white gap. 注意事项 Safari supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.	Samsung Internet Android 完整支持 1.0 注意事项 完整支持 1.0 注意事项 注意事项 Samsung Internet treats visibility: collapse like hidden , leaving a white gap. 注意事项 Samsung Internet supports the collapse value only on <tr> , <thead> , <tbody> ，和 <tfoot> , but not on <col> and <colgroup> elements.

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

• display

元数据

• 最后修改： Sep 23, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Box Model
4. 指南

   1. CSS 基本 Box 模型介绍
   2. Mastering margin collapsing
5. 特性

   1. height
   2. margin-bottom
   3. margin-left
   4. margin-right
   5. margin-top
   6. margin-trim
   7. max-height
   8. max-width
   9. min-height
   10. min-width
   11. overscroll-behavior
   12. overscroll-behavior-block
   13. overscroll-behavior-inline
   14. overscroll-behavior-x
   15. overscroll-behavior-y
   16. padding
   17. padding-bottom
   18. padding-left
   19. padding-right
   20. padding-top
   21. visibility
   22. width