CSS Display(顯示) 與 Visibility(可見性)
CSS display 屬性和 visibility屬性都可以用來隱藏某個元素,但是這兩個屬性有不同的定義,請詳細閱讀以下內容。
display屬性設置一個元素應如何顯示,visibility屬性指定一個元素應可見還是隱藏。
隱藏元素 - display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設置為"none",或把visibility屬性設置為"hidden"。但是請注意,這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
實例
h1.hidden {visibility:hidden;}
display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
實例
h1.hidden {display:none;}
CSS Display - 塊和內聯(lián)元素
塊元素是一個元素,占用了全部寬度,在前后都是換行符。
塊元素的例子:
<h1>
<p>
<div>
內聯(lián)元素只需要必要的寬度,不強制換行。
內聯(lián)元素的例子:
<span>
<a>
如何改變一個元素顯示
可以更改內聯(lián)元素為塊元素,反之亦然,可以使頁面看起來是以一種特定的方式組合,并仍然遵循web標準。
下面的示例把列表項顯示為內聯(lián)元素:
實例
li {display:inline;}
下面的示例把span元素作為塊元素:
實例
span {display:block;}
注意:變更元素的顯示類型看該元素是如何顯示,它是什么樣的元素。例如:一個內聯(lián)元素設置為display:block是不允許有它內部的嵌套塊元素。
- CSS Padding(填充)
- 當元素的 Padding(填充)(內邊距)被清除時,所"釋放"的區(qū)域將會受到元素背景顏色的填充。
- 03-28 關注:4
- CSS Border(邊框)
- CSS 邊框 (border) 可以是圍繞元素內容和內邊距的一條或多條線,對于這些線條,您可以自定義它們的樣式、寬度以及顏色。
- 03-28 關注:7