使用css隱藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);、height: 0; overflow: hidden;。
display: none;屬性依照詞義是真正隱藏元素，使用這個屬性，被隱藏的元素不佔據任何空間，使用者互動操作例如點選事件都不會生效，讀屏軟體也不會讀到元素的內容，這個元素的任何子元素也會同時被隱藏。當使用該屬性將元素從顯示狀態切換為隱藏狀態時，元素不佔據原本的空間，會觸發瀏覽器的重繪與回流。為這個屬性新增過渡動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。這種方式產生的效果就像元素完全不存在，但在dom中依然可以訪問到這個元素，也可以通過dom來操作它。
opacity是用以設定透明度的屬性，將opacity設定為0只能從視覺上隱藏元素，而元素本身依然佔據它自己的位置並對網頁的布局起作用，它也將響應使用者互動例如點選事件，對於其新增過渡屬性可以顯示動畫效果。對於opacity屬性，可以利用其透明的視覺效果製作點選劫持攻擊。
opacity
visibility屬性值為hidden的時候，元素將會隱藏，也會佔據著自己的位置，並對網頁的布局起作用，與opacity不同的是它不會響應任何使用者互動，元素在讀屏軟體中也會被隱藏，如果對於子元素的visibility被設定為visible而父元素的visibility設定為hidden，子元素依舊可以顯示而父元素會被隱藏。
visibility
still show
position與overflow屬性的意義就是把元素脫離文件流移出視覺區域，超出螢幕顯示的部分隱藏掉，使用這兩個屬性隱藏主要就是通過控制方向top、left、right、bottom達到一定的值，離開當前顯示區域並將超出部分裁剪，此外在未隱藏時設定好相關樣式，在動態新增class時即可實現過渡動畫。
position
clip-path屬性使用裁剪方式建立元素的可顯示區域，區域內的部分顯示，區域外的隱藏，直接將元素裁剪之後即可實現隱藏效果，該屬性相容性一般，具體可以查閱clip-path
position與overflow的組合，使用height: 0;將元素高度設定為0，使用overflow: hidden將超出部分裁剪隱藏，即可實現隱藏效果，如果需要使用這兩個屬性制呈現過渡動畫的話，需要將height給予乙個確定的值，不能是auto。
height
display
opacity
visibility
still show
position
clip-path
height
css隱藏頁面元素的方法
用css隱藏頁面元素有許多種方法。第一種方法 opacity 0 opacity屬性通常用於設定乙個元素的透明度，從另乙個角度來看，如果透明度為0，也就從視覺上隱藏了該元素。這個屬性不是為改變元素的邊界框 bounding box 而設計的，元素本身依然佔據它自己的位置並對網頁的布局起作用，它也將響...
css 隱藏html元素的方法
1 常見方法 display none 這個方法的問題是 元素被隱藏了 同時該元素不佔位置了，應該也可以說該元素沒有高度和寬度了 2 常見方法 visibility hidden 這個方法和display 都是常規的方法 但是 它隱藏了元素後元素還是佔著原來的位置的 3 opacity 0 這個方法...
CSS隱藏元素
在製作網頁時，隱藏內容也是一種比較常用的手法，它的作用一般有 隱藏文字 隱藏鏈結 隱藏超出範圍的內容 隱藏彈出層 隱藏滾動條 清除錯位和浮動等等。使用css即可使以上提到的內容隱藏起來，幾種隱藏內容的方法 1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不...