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

Question

参考使用：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），但是还是占有位置呢？

Answer 1

选择合适的隐藏方式
要是你既不想让元素显示，也不想让它占据空间，就可以使用 display: none。
如果需要保留元素的布局空间，只是让元素不可见，那么 visibility: hidden 是不错的选择。
当你希望元素不可见，但还能响应鼠标事件时，opacity: 0 比较合适。
对于无障碍需求（例如为屏幕阅读器保留内容），可采用 position 结合负值偏移的方法

Answer 2

transform: scale(0)
opacity: 0
z-index: -1
visibility: hidden

Answer 3

简单方式：CSS使用此方式就好：

visibility: 'hidden'