CSS visibility 属性-代码号

CSS visibility 属性详解：元素可见性控制

属性概述

CSS visibility 属性用于控制 HTML 元素在页面中的可见性状态。该属性决定了元素是否在视觉上显示，但即使元素被隐藏，它仍然会占据原有的页面空间。

语法结构

visibility: visible | hidden | collapse | initial | inherit;

属性值详解

visible（可见）

默认值：元素正常显示在页面中
特点：元素内容可见，占据正常的文档流空间
应用场景：需要显示元素的标准状态

hidden（隐藏）

作用：使元素不可见，但保留其占据的空间
布局影响：不影响页面布局，其他元素位置不变
与 display 区别：不同于 display: none，hidden 元素仍占用空间

collapse（折叠）

专用性：仅对表格元素（tr、tbody、col、colgroup）有效
表格行为：移除行或列，但不影响表格整体布局
非表格元素：应用于非表格元素时，效果等同于 hidden
空间处理：被折叠的表格行列空间可供其他内容使用

initial（初始值）

作用：将属性重置为默认值 visible
兼容性：所有现代浏览器都支持

inherit（继承）

作用：从父元素继承 visibility 属性值
应用场景：需要保持子元素与父元素可见性一致时

基础应用示例

基本可见性控制

<!DOCTYPE html>
<html>
<head>
    <title>基础可见性控制 - 代码号编程教程</title>
    <style>
        .visible-element {
            visibility: visible;
            background-color: #e8f5e8;
            padding: 15px;
            margin: 10px;
            border: 2px solid #4caf50;
        }
        
        .hidden-element {
            visibility: hidden;
            background-color: #ffebee;
            padding: 15px;
            margin: 10px;
            border: 2px solid #f44336;
        }
        
        .container {
            border: 1px dashed #999;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>代码号学习平台 - 可见性演示</h3>
        
        <div class="visible-element">
            这个元素是可见的 - 正常显示内容
        </div>
        
        <div class="hidden-element">
            这个元素是隐藏的 - 但仍然占用空间
        </div>
        
        <div class="visible-element">
            后续元素 - 注意上方隐藏元素占用的空间
        </div>
    </div>
</body>
</html>

表格行列折叠示例

<!DOCTYPE html>
<html>
<head>
    <title>表格折叠效果 - 代码号高级应用</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #f5f5f5;
        }
        
        .collapsed-row {
            visibility: collapse;
        }
        
        .collapsed-column {
            visibility: collapse;
        }
    </style>
</head>
<body>
    <h3>代码号数据表格 - 折叠效果演示</h3>
    
    <table>
        <thead>
            <tr>
                <th>课程编号</th>
                <th class="collapsed-column">课程类型</th>
                <th>课程名称</th>
                <th>学习时长</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td class="collapsed-column">前端</td>
                <td>HTML5基础教程</td>
                <td>8小时</td>
            </tr>
            <tr class="collapsed-row">
                <td>002</td>
                <td class="collapsed-column">前端</td>
                <td>CSS3进阶教程</td>
                <td>12小时</td>
            </tr>
            <tr>
                <td>003</td>
                <td class="collapsed-column">后端</td>
                <td>Node.js实战</td>
                <td>15小时</td>
            </tr>
        </tbody>
    </table>
    
    <p>说明：第二行和"课程类型"列使用了 visibility: collapse</p>
</body>
</html>

JavaScript 交互控制

动态可见性切换

<!DOCTYPE html>
<html>
<head>
    <title>动态可见性控制 - 代码号交互编程</title>
    <style>
        .content-box {
            width: 300px;
            height: 150px;
            background-color: #e3f2fd;
            border: 2px solid #2196f3;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
        }
        
        .control-panel {
            margin: 20px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 6px;
        }
        
        button {
            padding: 10px 20px;
            margin: 0 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .show-btn {
            background-color: #4caf50;
            color: white;
        }
        
        .hide-btn {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <h3>代码号交互演示 - JavaScript控制可见性</h3>
    
    <div class="control-panel">
        <button class="hide-btn" onclick="hideContent()">隐藏内容</button>
        <button class="show-btn" onclick="showContent()">显示内容</button>
        <button onclick="toggleContent()">切换显示状态</button>
    </div>
    
    <div id="contentElement" class="content-box">
        <h4>编程学习内容区</h4>
        <p>这是一个可以通过按钮控制显示/隐藏的内容区域。</p>
        <p>注意：隐藏后仍然占用原有空间。</p>
    </div>
    
    <script>
        function hideContent() {
            document.getElementById('contentElement').style.visibility = 'hidden';
        }
        
        function showContent() {
            document.getElementById('contentElement').style.visibility = 'visible';
        }
        
        function toggleContent() {
            const element = document.getElementById('contentElement');
            if (element.style.visibility === 'hidden') {
                element.style.visibility = 'visible';
            } else {
                element.style.visibility = 'hidden';
            }
        }
    </script>
</body>
</html>

实际应用场景

加载状态管理

<!DOCTYPE html>
<html>
<head>
    <title>加载状态管理 - 代码号实践</title>
    <style>
        .loading-container {
            position: relative;
            border: 1px solid #ddd;
            padding: 30px;
            margin: 20px;
        }
        
        .content {
            visibility: visible;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="content">
            <h4>代码号课程内容</h4>
            <p>这里是详细的编程教程内容...</p>
            <p>JavaScript高级编程技巧</p>
            <p>CSS3动画效果实现</p>
        </div>
        
        <div id="loadingOverlay" class="loading-overlay">
            <div class="loading-spinner"></div>
            <span>内容加载中...</span>
        </div>
    </div>
    
    <button onclick="simulateLoading()">模拟加载过程</button>
    
    <script>
        function simulateLoading() {
            const overlay = document.getElementById('loadingOverlay');
            const content = document.querySelector('.content');
            
            // 显示加载状态
            overlay.style.visibility = 'visible';
            content.style.visibility = 'hidden';
            
            // 模拟加载过程
            setTimeout(() => {
                overlay.style.visibility = 'hidden';
                content.style.visibility = 'visible';
            }, 2000);
        }
    </script>
</body>
</html>

表单验证提示

<!DOCTYPE html>
<html>
<head>
    <title>表单验证提示 - 代码号用户体验设计</title>
    <style>
        .form-group {
            margin: 15px 0;
        }
        
        input {
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
            width: 250px;
        }
        
        .error-message {
            color: #d32f2f;
            font-size: 14px;
            margin-top: 5px;
            visibility: hidden;
            height: 20px;
        }
        
        input:invalid {
            border-color: #f44336;
        }
        
        input:invalid + .error-message {
            visibility: visible;
        }
    </style>
</head>
<body>
    <h3>用户注册表单 - 代码号示例</h3>
    
    <form>
        <div class="form-group">
            <label>用户名：</label>
            <input type="text" required minlength="3" 
                   placeholder="至少3个字符">
            <div class="error-message">请输入有效的用户名</div>
        </div>
        
        <div class="form-group">
            <label>邮箱：</label>
            <input type="email" required 
                   placeholder="请输入有效邮箱地址">
            <div class="error-message">请输入有效的邮箱地址</div>
        </div>
        
        <button type="submit">注册</button>
    </form>
</body>
</html>

本节课程知识要点

空间占用特性：hidden 元素不可见但仍占用空间，与 display: none 不同
表格专用值：collapse 值仅对表格元素有效，用于折叠行列
继承性：visibility 属性具有继承性，子元素会继承父元素的可见性
性能考虑：相比 display: none，visibility: hidden 的重绘成本更低
交互控制：可通过 JavaScript 动态控制元素可见性
应用场景：适合需要保留布局空间的隐藏需求，如表单验证、加载状态等

浏览器兼容性

CSS visibility 属性被所有主流浏览器支持，包括：

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Internet Explorer 4+

总结

visibility 属性是 CSS 中控制元素可见性的重要工具，特别适用于需要保持页面布局稳定的场景。通过合理运用不同的属性值，可以实现丰富的交互效果和用户体验优化。

本文标签：

CSS visibility 属性