CSS Display(顯示) 與 Visibility(可見性)
CSS display 屬性和 visibility屬性都可以用來隱藏某個(gè)元素,但是這兩個(gè)屬性有不同的定義,請?jiān)敿?xì)閱讀以下內(nèi)容。
display屬性設(shè)置一個(gè)元素應(yīng)如何顯示,visibility屬性指定一個(gè)元素應(yīng)可見還是隱藏。
隱藏元素 - display:none或visibility:hidden
隱藏一個(gè)元素可以通過把display屬性設(shè)置為"none",或把visibility屬性設(shè)置為"hidden"。但是請注意,這兩種方法會產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個(gè)元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。
實(shí)例
h1.hidden {visibility:hidden;}
display:none可以隱藏某個(gè)元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。
實(shí)例
h1.hidden {display:none;}
CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個(gè)元素,占用了全部寬度,在前后都是換行符。
塊元素的例子:
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度,不強(qiáng)制換行。
內(nèi)聯(lián)元素的例子:
<span>
<a>
如何改變一個(gè)元素顯示
可以更改內(nèi)聯(lián)元素為塊元素,反之亦然,可以使頁面看起來是以一種特定的方式組合,并仍然遵循web標(biāo)準(zhǔn)。
下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素:
實(shí)例
li {display:inline;}
下面的示例把span元素作為塊元素:
實(shí)例
span {display:block;}
注意:變更元素的顯示類型看該元素是如何顯示,它是什么樣的元素。例如:一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素。
作者:大學(xué)生新聞網(wǎng) 來源:大學(xué)生新聞網(wǎng)
發(fā)布時(shí)間:2025-03-29 閱讀:
- CSS Positioning(定位)
- CSS position 屬性,允許您將布局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個(gè)表格才能完成的任務(wù)。
- 03-29 關(guān)注:0
- CSS 分組和嵌套
- 為了盡量減少代碼,你可以使用分組選擇器。
- 03-28 關(guān)注:4
- CSS Padding(填充)
- 當(dāng)元素的 Padding(填充)(內(nèi)邊距)被清除時(shí),所"釋放"的區(qū)域?qū)艿皆乇尘邦伾奶畛洹?/li>
- 03-28 關(guān)注:4
- CSS Margin(外邊距)
- margin清除周圍的元素(外邊框)的區(qū)域。margin沒有背景顏色,是完全透明的
- 03-28 關(guān)注:5
- CSS Border(邊框)
- CSS 邊框 (border) 可以是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線,對于這些線條,您可以自定義它們的樣式、寬度以及顏色。
- 03-28 關(guān)注:7