CSS 透過CSS 隱藏網頁上的元件方法,visibility | css隱藏顯示
當我們想控制一個網頁上的元素要不要顯示出來,可以簡單地透過CSS的方式做到。隱藏元素的方式有兩種:visibility:hidden和display:none。這裡有個範例,我們想隱藏文章的標題。先看看原本網頁應該長的樣子:▍隱藏元素但保留元素的位置visibility:hidden使用visibility:hidden這個屬性會使得元素不顯示在網頁上,但它卻會保留元素的空白位置。可以看到標題已經隱藏起來了,可是標題本身的位置也保留了下來,留下了一片空白。▍隱藏元素也不保留元素的位置display:hidden如果你想要把元素隱藏起來,連它的位置也不保留給它,就好像它完全...
當我們想控制一個網頁上的元素要不要顯示出來,可以簡單地透過 CSS 的方式做到。隱藏元素的方式有兩種:visibility: hidden 和 display: none。
這裡有個範例,我們想隱藏文章的標題。先看看原本網頁應該長的樣子:
▍ 隱藏元素但保留元素的位置 visibility: hidden使用 visibility: hidden 這個屬性會使得元素不顯示在網頁上,但它卻會保留元素的空白位置。
可以看到標題已經隱藏起來了,可是標題本身的位置也保留了下來,留下了一片空白。
▍ 隱藏元素也不保留元素的位置 display: hidden如果你想要把元素隱藏起來,連它的位置也不保留給它,就好像它完全不存一樣,那麼你就要使用 display: hidden 這個屬性。
需要注意的是,雖然我們把元素隱藏起來,好像它整個被移除了。但是實際上它還是存在在網頁上的,只需要打開 HTML 原始碼就可以看到,我們只是透過 CSS 的方式去控制它現在顯示的外觀狀態。
Copyright announcement: the featured image: Computer photo created by freepik – www.freepik.com[1]
References www.freepik.com (www.freepik.com)