CSS 顯示( Display) 與可見物(Visibility)屬性

CSS 顯示( Display) 與可見物(Visibility)的不同:

顯示( Display) 隱藏元素時 不會佔版面空間

用法 : <h1 style="display:none">你看不到我?</h1>

能見度(Visibility) 隱藏元素時 仍會佔版面空間

用法 : <h1 style="visibility:hidden">你看不到我?</h1>


CSS 顯示( Display) 的 同列顯示(inline)與區塊(block)顯示 :

區塊顯示display:block;

設定區塊(block)顯示時,該區塊會獨自佔一橫向列

橫向顯示display:inline;

設定同列(inline)顯示時,該元素會同在橫向列顯示

範例::CSS 隱藏顯示屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼

你可以在上方編輯區拿掉style='display:none'做實驗觀測


範例::CSS 區塊(block)/同列(inline)顯示屬性值的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看變化了什麼