CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

参考使用：antd的Tag

我做了2行的Tag：

<Row>
      <Tag bordered={false}>Tag 1</Tag>
      <Tag bordered={false}>Tag 2</Tag>
      <Tag bordered={false} closable>
        Tag 3
      </Tag>
      <Tag bordered={false} closable>
        Tag 4
      </Tag>
</Row>

<Row>
      <Tag bordered={false}>Tag 1</Tag>
      <Tag bordered={false}>Tag 2</Tag>
      <Tag bordered={false} closable>
        Tag 3
      </Tag>
      <Tag bordered={false} closable>
        Tag 4
      </Tag>
</Row>

现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

阅读 3k

使用 visibility: hidden

visibility 属性用于设置元素是否可见。当将其值设置为 hidden 时，元素将不可见，但仍然会占据在文档流中的位置。
示例代码

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
    </style>
</head>

<body>
    <p>这是第一个段落。</p>
    <p class="hidden-element">这是一个被隐藏但仍占位置的段落。</p>
    <p>这是第三个段落。</p>
</body>

</html>

代码解释

在上述代码中，我们定义了一个类名为 hidden-element 的 CSS 类，将其 visibility 属性设置为 hidden。然后将这个类应用到第二个段落上，这个段落就会不可见，但它仍然会占据原本的空间，使得第三个段落不会向上移动。

使用 opacity: 0

opacity 属性用于设置元素的透明度，取值范围是从 0 到 1。当 opacity 值为 0 时，元素完全透明，即不可见，但它仍然会占据文档流中的位置。
示例代码

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .transparent-element {
            opacity: 0;
        }
    </style>
</head>

<body>
    <p>这是第一个段落。</p>
    <p class="transparent-element">这是一个透明但仍占位置的段落。</p>
    <p>这是第三个段落。</p>
</body>

</html>

代码解释

在这个示例中，我们创建了一个名为 transparent-element 的 CSS 类，将其 opacity 属性设置为 0。应用这个类的段落会变得完全透明，不可见，但仍然会占据空间，保持文档流的布局不变。

使用 color: transparent 和 background-color: transparent

如果元素的主要内容是文本或有背景颜色，我们可以将文本颜色和背景颜色都设置为透明，这样元素看起来就像是隐藏了，但仍然占据着位置。
示例代码

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .transparent-content {
            color: transparent;
            background-color: transparent;
        }
    </style>
</head>

<body>
    <p>这是第一个段落。</p>
    <p class="transparent-content">这是一个内容透明但仍占位置的段落。</p>
    <p>这是第三个段落。</p>
</body>

</html>

代码解释

在这段代码中，我们定义了一个 transparent-content 类，将 color 和 background-color 属性都设置为 transparent。这样，应用这个类的段落的文本和背景都会变得透明，看起来就像隐藏了一样，但它仍然会占据文档流中的位置。
三种方法的比较

visibility: hidden：这是最直接的方法，适用于各种类型的元素，无论元素是文本、图片还是其他复杂的结构。它会完全隐藏元素，包括元素的边框和轮廓。
opacity: 0：元素虽然不可见，但仍然会响应鼠标事件，比如点击、悬停等。如果需要元素在不可见的情况下仍然能接收交互，这种方法比较合适。
color: transparent 和 background-color: transparent：这种方法主要适用于文本和有背景颜色的元素。对于一些有复杂样式（如边框、阴影等）的元素，可能无法完全隐藏元素的外观。

SpreadJS

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

你尚未登录，登录后可以

二本大三数据科学专业，已学HTML/CSS/，是否应继续深耕前端开发？

为什么vscode 的 Copilot Pro plan 模式总是折叠代码？

Trae 用什么通用的方法可以添加第三方的 skill 吗？

codex是中国区被禁止的，请问大佬们是使用的购买的海外账户吗，还是说可以接入国内模型并且效果不差？

关于post请求参数方式的疑问?

我的公司给了我 gemini 的 api key，但是我在中国大陆要怎么配置使用呢？

请问下为何可以：使用API中转来大幅降低Claude Code的使用成本？