Visibility 屬性的用法

值

描述

visible

預設值。元素是可見的。

hidden

元素是不可見的。

collapse

當在**元素中使用時，此值可刪除一行或一列，但是它不會影響**的布局。被行或列佔據的空間

會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。

inherit

規定應該從父元素繼承 visibility 屬性的值。

雖然 visibility 和 display 屬性都可以隱藏乙個元素，但它們之間的不同點在於 visibility： hidden 在隱藏乙個元素的同時仍然在頁面上為該元素保留所需的空間，而 display： none 則表現得像把元素從頁面裡刪除了，在頁面上看不出該元素還存在著。

另外，display： block 和 display： inline 的區別在於 block 元素會在頁面中獨佔一行，而 inline 元素不會，有的物件預設為 block 元素，而有的物件則預設為 inline 元素，大家在使用時需要注意防止相同屬性的重複定義。

visibility 和display 屬性雖然都可以達到隱藏頁面元素的目的，但它們的區別在於如何回應正常文件流。

如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility：hidden 。如果你想在隱藏某元素的同時讓其它內容填充空白的話應該使用display：none 。

在現實中我發現人們更多的傾向於使用display 屬性（相信這也是大多數人的習慣）。當你決定用display：none 來隱藏乙個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的布局。在

有的人則因為害怕搜尋蜘蛛的的反感而為visibility：hidden 和display：none 的使用的煩惱。其實有很多漂亮的效果是通過元素可見性的轉換而實現的，搜尋引擎也理解這一做法（事實上搜尋引擎往往忽略css），因此如果你的目的不是欺騙

搜尋引擎，你大可以放心地使用visibility：hidden 和display：none 去隱藏內容。