我知道使用visibility:hidden会保留页面上的空间，而display:none不会，但是，什么时候"保留"空间才有意义？这可能会在页面上留下一个尴尬的空白区域/大洞。
显示：none-动态页面/节：通常将其用于页面上较大的动态区域，以避免留下尴尬的空白区域，使页面看起来很糟糕。当显示时，它将移动页面的其他部分，并在设计的页面中呈现自己，根据需要/设计改变周围页面元素的位置和流动。
可见性：隐藏-静态页面/节：将其用于较小的部分，当该部分可见时，让周围元素移动是不可取的，即：在页面节中显示/隐藏徽章。使用display：没有一个可以/会迫使自己进入页面的部分，并移动其周围的元素为自己腾出空间，从而导致页面上的移动。使用可见性：在这种情况下，隐藏将隐藏/显示"徽章"元素，而不会移动周围页面的其他元素，因为该空间已为其"保留/保留"，因此，它只是"打开/关闭"，而不会有任何可见的移动。
由于这种用法是在"静态"页面部分的一小部分上使用的，因此页面中因"保留/保留"空间而留下的空白"洞"在隐藏时并不明显，因为页面的"布局"不依赖于徽章的小"保留/预留"空间。它只是较大静态区域内的一小块。
希望这有助于决定何时何地使用这两个看似相似的属性。