CSS Display(顯示) 與 Visibility(可見性)
CSS Display(顯示) 與 Visibility(可見性)
## 隱藏元素- display:none或visibility:hidden
display屬性設定元素如何顯示,visibility屬性設定了元素的可見性.display:none不佔用空間而visibility:hidden雖然元素不可見但是依然佔用同樣的空間.區塊級元素的特徵是佔用正航寬度強制換行,例如div,p,h1內聯元素只佔用需要的寬度並且不強制換行,例如span, a.可以互相更改兩種元素顯示方式,例如span{display:block;}或li{display:inline;}visibility的屬性值可以是hidden或visible或是collapse ,collapse屬性可以用來隱藏表格的一行或一列,並且不影響表格的佈局,將隱藏元素的位置用相同的空白代替.CSS Display - 區塊和內聯元素
塊元素是一個元素,佔據了全部寬度,在前後都是換行符。 區塊元素的範例:<h1>#<p><div>#內聯元素只需要必要的寬度,不強制換行。 內聯元素的範例:<span>#<a>如何改變一個元素顯示可以更改內聯元素和區塊元素,反之亦然,可以使頁面看起來以特定的方式組合,並且仍然遵循web標準。 下面的範例把span元素當作區塊元素:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { display:block; } </style> </head> <body> <h2>标题</h2> <span>这是一段内容</span> <span>这也是一段内容</span> <h2>标题</h2> <span>内容</span> <span>也是内容</span> </body> </html>注意:變更元素的顯示類型看該元素是如何顯示,它是什麼樣的元素。例如:一個內聯元素設定為display:block是不允許有它內部的巢狀區塊元素。