↩ zhcn 编程语言 Web相关 JSON 非公開: CSS 可见性（元素可见性）

CSS 可见性（元素可见性）

CSS 中的visibility 属性用于设置元素是否可见。您可以将此属性与JavaScript 一起使用来创建非常复杂的菜单或网页布局。

例如，当你想在网页上做一些测试题时，你可以使用：使用可见性属性转换答案或分析并隐藏并可选择显示。

可见性属性的可选值有：

价值	解释
visible	默认值表示元素可见
hidden	隐藏元素
collapse	主要用于隐藏表格行和列。隐藏行或列占用的空间可供其他表内容使用。用在其他元素上时，效果相当于“隐形”。
inherit	从父元素继承可见性属性值

提示：可见性属性隐藏元素，但保留它们在页面上占用的空间。如果您想隐藏某个元素而不占用页面空间，请使用 display 属性。

[示例] 使用visibility属性隐藏页面上的特定元素。

 <!DOCTYPE html>
<html>
<head>
    <style>
        .visible {
            visibility: visible;
        }

        .hidden {
            visibility: hidden;
        }
        .collapse {
            visibility: collapse;
        }
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h1 class="visible">表示</h1>
    <h1 class="hidden">非表示</h1>
    <table border="1">
        <tr><th>値</th><th>記述</th></tr>
        <tr><td>visible</td><td class="collapse">デフォルト値で、要素が表示されることを示す</td></tr>
        <tr><td>hidden</td><td>要素を非表示にする</td></tr>
        <tr class="collapse"><td>collapse</td><td>主にテーブルの行と列を非表示にするために使用され、非表示にされた行または列のスペースは他のテーブルのコンテンツに使用される。他の要素で使用する場合、「hidden」と同じ効果がある</td></tr>
        <tr><td>inherit</td><td>親要素からvisibility属性の値を継承する</td></tr>
    </table>
    <p><strong>ヒント：</strong>visibility属性は要素を非表示にするが、ページ内で要素が占めるスペースを保持する。要素を非表示かつページスペースを占有しないようにしたい場合は、display属性を使用してください。</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_666”对齐=“aligncenter”宽度=“1024”]

图：可见性属性演示[/caption]

注意：对于隐藏元素，即使它们在页面上不可见，源代码中仍然包含这些隐藏元素，因此隐藏用户信息和密码等敏感信息请避免使用它们。

通俗易懂地讲解“CSS可见性（元素可见性）”！您必须观看的 2 个最佳视频

CSS Position: Fixed

https://www.youtube.com/watch?v=jAm8wm77aTM&pp=ygUsIENTUyDjga7lj6_oppbmgKcgKOimgee0oOOBruWPr-imluaApykmaGw9SkE%3D

JSON