用 css 隱藏頁面元素的 5 種方法
opacity：
opacity 屬性的意思是設定乙個元素的透明度。這意味著將 opacity 設為 0 只能從視覺上隱藏元素，而元素本身依然佔據它自己的位置並對網頁的布局起作用，同時它將響應使用者互動。此外，元素在讀屏軟體中不會被隱藏。
visibility：
將visibility的值設為 hidden將隱藏我們的元素。如同 opacity 屬性，被隱藏的元素依然會對我們的網頁布局起作用。與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏；
如果乙個元素的 visibility 被設定為 hidden，同時想要顯示它的某個子孫元素，只要將那個元素的 visibility 顯式設定為 visible 即可。
display：
display 屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見並且連盒模型也不生成。被隱藏的元素對我們的網頁布局不起作用，也不會響應任何使用者互動。此外，讀屏軟體也不會讀到元素的內容，這種方式產生的效果就像元素完全不存在；
任何這個元素的子孫元素也會被同時隱藏；
為這個屬性新增過渡動畫是無效的，它的任何不同狀態值之間的切換總是會立即生效；
通過 dom 依然可以訪問到這個元素，因此你可以通過 dom 來操作它，就像操作其他的元素。
position：
假設有乙個元素你想要與它互動，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity 和 visibility 影響布局， display 不影響布局但又無法直接互動——譯者注）。在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，有能讓元素保持可以操作。下面是採用這種辦法的 css：
hide
這種方法的主要原理是通過將元素的 top 和 left 設定成足夠大的負數，使它在螢幕上不可見。採用這個技術的乙個好處（或者潛在的缺點）是用它隱藏的元素的內容可以被讀屏軟體讀取。
clip-path：
隱藏元素的另一種方法是通過剪裁它們來實現。在以前，這可以通過 clip 屬性來實現，但是這個屬性被廢棄了，換成乙個更好的屬性叫做 clip-path。nitish kumar 最近在 sitepoint 發表了「介紹 clicp-path 屬性」這篇文章，通過閱讀它可以了解這個屬性的更多高階用法。記住，clip-path 屬性還沒有在 ie 或者 edge 下被完全支援。如果要在你的 clip-path 中使用外部的 svg 檔案，瀏覽器支援度還要更低，使用 clip-path 屬性來隱藏元素的**看起來如下：
.hide
用 CSS 隱藏頁面元素的 5 種方法
opacity屬性的意思是設定乙個元素的透明度。它不是為改變元素的邊界框 bounding box 而設計的。這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然佔據它自己的位置並對網頁的布局起作用。它也將響應使用者互動。hide第二個要說的屬性是visibility。將它的值...
用CSS隱藏頁面元素的5種方法
1.opacity 設定乙個元素的透明度只是從視覺上隱藏元素，對頁面布局還是有影響，讀屏軟體會原樣讀出 2.visibility 設定為hidden將隱藏我們的元素，對網頁布局還是起作用，子元素也會被隱藏，單獨設定子元素可見是生效的，讀屏軟體不會讀取 3.display 設定為none，相當於元素完...
用 CSS 隱藏頁面元素
用 css 隱藏頁面元素有許多種方法。你可以將 opacity 設為 0 將 visibility 設為 hidden 將 display 設為 none 將 position 設為 absolute 然後將位置設到不可見區域。opacity，佔據網頁布局，可以互動，讀屏軟體可以讀到它 opacit...