CSS中提供了三種隱藏元素的方式，分別為：

display:none;
visibility:hidden;
opacity:0;

下面我們分別來介紹一下它們的具體用法和效果。

display:none;

這種方式會完全將元素從頁面中移除，不占用任何空間，也不會影響其他元素的排布。使用該方式隱藏元素后，會使得該元素的子元素和事件都被禁用，且不會被屏幕閱讀器所識別。適合用于動態調整頁面結構、無需使用該元素時、或需要完全隱藏某個元素時使用。

visibility:hidden;

這種方式隱藏元素，但是并不會將其從頁面中移除，仍然占據相應的空間。因此，使用該方式隱藏元素會影響其周圍元素的位置，但不會影響里面的子元素和事件，也不會被屏幕閱讀器所忽略。適合用于隱藏表格某一列、隱藏菜單等需要保留位置但視覺上不顯示的元素。

opacity:0;

這種方式也是將元素隱藏，但是不同于前兩種方式，該方式隱藏元素并不會影響其所占據的位置。換言之，它的占位方式和visibility:hidden;一致。但是它不會禁用子元素和事件，也能被屏幕閱讀器所識別。適合用于需要將元素隱藏且保留位置的情況，如實現透明度漸變的效果等。