Question

HTML代码

<!DOCTYPE html>
<html>
    <head>
        <title>Testing Page</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1 class="hidden">Hello World</h1>
    </body>
</html>

CSS代码

.shown {
    display: hidden;
}

运行此代码时，仍会显示标题。为什么会这样呢？我认为隐藏的显示值会将元素隐藏在页面的正常流程中。

Answer 1

hidden不是显示的有效值，您在none之后。此外，您的班级名称不正确，应为.hidden

.hidden{
    display: none;
}

此外，还有一个名为visibility的属性也隐藏了visibility: hidden的内容。差异是display使得它显示为元素已完全从页面中删除，而visibility使内容消失，但元素占用的空间仍然受到尊重。

Answer 2

实际上你搞砸了两个不同CSS属性的值，即visibility和display。

显示

.class_name
{
    display:none;
}

将display设置为none会导致对象不可见，并且该对象所需的空间不会被分配，即 不可见对象不占用任何空间 。

能见度

.class_name
{
    visibility:hidden;
}

将visibility设置为hidden会导致对象不可见，但对象所需的空间是分配的，即 它占据了它所需的空间，尽管它不可见< / EM>

<强> Reference

Answer 3

你有错误的课程试试这个

<h1 class="shown">Hello World</h1>

和css

.shown {
    display: none;
}

Answer 4

使用

 .hidden{
        display: none;
    }

Answer 5

使用

.shown {
  display: none;
}

或

 .shown {
  visibility: hidden;
}

Answer 6

首先，您的css标记名称与HTML代码不匹配。你的CSS也是错误的。

你可以写display：none或visibility：hidden。

css中的显示值无法按预期工作

6 个答案:

显示

能见度