border 不占位_css不占位隐藏是什麼？

使用css讓元素不可見的方法有很多種，裁剪、定位到螢幕外邊、透明度變換等都是可以的。但是最常用兩種方式就是設定元素樣式為display: none或者visibility: hidden。

display與元素的隐藏

如果給一個元素設定了display: none，那麼該元素以及它的所有後代元素都會隐藏，它是前端開發人員使用頻率最高的一種隐藏方式。隐藏後的元素無法點選，無法使用螢幕閱讀器等輔助裝置通路，占據的空間消失。

給元素設定display:none樣式

A元素

B元素

C元素

效果圖：

visibility與元素的隐藏

給元素設定visibility: hidden也可以隐藏這個元素，但是隐藏元素仍需占用與未隐藏時一樣的空間，也就是說雖然元素不可見了，但是仍然會影響頁面布局。

給元素設定visibility:hidden樣式

A元素

B元素

C元素

效果圖:

display: none與visibility: hidden的差別

很多前端的同學認為visibility: hidden和display: none的差別僅僅在于display: none隐藏後的元素不占據任何空間，而visibility: hidden隐藏後的元素空間依舊保留 ，實際上沒那麼簡單，visibility是一個非常有故事性的屬性

1、visibility具有繼承性，給父元素設定visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設定visibility: visible,則子元素又會顯示出來。這個和display: none有着質的差別

2、visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，但是其計數器仍在運作。這和display: none完全不一樣

給元素設定visibility:hidden樣式

1. 元素1
2. 元素2
3. 元素3
4. 元素4

給元素設定display:none樣式

1. 元素1
2. 元素2
3. 元素3
4. 元素4

效果圖：