CSS Display(顯示) and Visibility（可見性）

如何設置一個元素是否顯示，visibility屬性指定一個元素應可見或隱藏。

---

隱藏元素 - display:none或visibility:hidden

隱藏一個元素能夠經過display屬性設置爲"none"或"hidden"屬性的可見性。可是，請注意這兩種方法產生不一樣的結果

visibility:hidden能夠讓您隱藏某個元素，但它仍然須要像之前同樣的空間。該元素將被隱藏，但仍然會影響佈局。

h1.hidden {visibility:hidden;}

display:沒有隱藏的元素，它不會佔用任何空間。元素將被隱藏，但頁面會顯示：

h1.hidden {display:none;}

CSS Display - 塊和內聯元素

塊元素是一個元素，佔用了所有寬度，在先後都是換行符。

塊元素的例子:

• <h1>

• <p>

• <div>

內聯元素只須要必要的寬度，不強制換行。

內聯元素的例子：

• <span>

• <a>

---

如何改變一個元素顯示

能夠更改內聯元素和塊元素，反之亦然，能夠使頁面看起來是以一種特定的方式組合，並仍然遵循web標準。

下面的示例顯示爲內聯元素的列表項：

li {display:inline;}

下面的示例是把span元素做爲塊元素

span {display:block;}

注意：變動元素的顯示類型看該元素是如何顯示，它是什麼樣的元素。例如：一個內聯元素設置爲display：block是不容許有它內部的嵌套塊元素。.

---

更多實例

如何顯示元素的內聯元素。

這個例子演示瞭如何顯示一個元素的內聯元素。

如何顯示元素的塊元素。

這個例子演示瞭如何顯示一個元素的塊元素。

如何使用一個表的collapse屬性

這個例子演示裏如何使用表的collapse屬性