visibility在css中的用法

作者：卍…`傷` 发布日期:2026-02-11 浏览:35

/* 示例代码 */

/* visibility 属性用于控制元素的可见性 */
/* 当设置为 hidden 时，元素不可见，但仍然占据页面上的空间 */
.hidden {
    visibility: hidden;
}

/* 当设置为 visible 时，元素可见 */
.visible {
    visibility: visible;
}

/* 当设置为 collapse 时，主要用于表格行、单元格等，使它们不占据空间 */
.collapse {
    visibility: collapse;
}

解释说明：

visibility: hidden;：元素将被隐藏，但仍会占用页面上的空间。其他内容不会移动到它的位置。
visibility: visible;：元素将正常显示，默认值。
visibility: collapse;：通常用于表格元素（如 <tr>），表示该行或列将被折叠，不会占用空间。对于非表格元素，效果与 hidden 类似。

上一篇：css 定位居中

下一篇：css 加载动画