css隱藏元素屬性
display: none;
--> 元素消失,不保留原占有空間
visibility: hidden;
--> 設定元素能見度(hidden),元素消失,保留原占有空間,被隱藏元素的事件不能觸發
opacity: 0;
--> 設定元素的不透明度(0), 元素消失,保留原占有空間,被隱藏元素的事件能觸發
舉例:
doctype
html
>
lang
="en"
>
>
charset
="utf-8"
/>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
/>
>
隱藏元素title
>
>
.container
div.box1
.box2
.box3
.box4
style
>
head
>
>
class
="container"
>
class
="box1"
>
box1 (display: none;)div
>
class
="box2"
onclick
="alert('box2')"
>
box2 (visibility: hidden;)div
>
class
="box4"
>
box4div
>
class
="box3"
onclick
="alert('box3')"
>
box3 (opacity: 0;)div
>
div>
body
>
html
>
效果: CSS隱藏元素
在製作網頁時,隱藏內容也是一種比較常用的手法,它的作用一般有 隱藏文字 隱藏鏈結 隱藏超出範圍的內容 隱藏彈出層 隱藏滾動條 清除錯位和浮動等等。使用css即可使以上提到的內容隱藏起來,幾種隱藏內容的方法 1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不...
css元素隱藏
這個方式會把空間都釋放了,在控制台也不顯示了,所以綁在元素上的事件也都沒有了。不能修改子孫節點的dispaly值顯示出來。2.opacity 0 這個方式只是把元素的透明度設定為0,也就是把它變得透明,它本身還是在的只是看不到了,所以空間就不會釋放,綁在上面的事件也都在,能正常使用。3.visili...
CSS隱藏元素
一說到隱藏元素,很多人會想到display none 其實除了它還有很多隱藏元素的方法,它們都有各自特點和屬性,今天就來介紹以下兩種 一 display 在將display之前我們來看看元素的分類 分類一 塊級元素 特點 獨佔一行,對寬高生效,如果不給寬度撐滿整行,如果不給高度隨著內容的增長而增長。...