CSS中的display和visibility屬性可以用來(lái)隱藏和顯示HTML元素。盡管它們看起來(lái)相似，但很多人仍然容易搞混。下面將分別介紹它們的屬性和用法。方法一：使用display屬性當(dāng)使用disp

CSS中的display和visibility屬性可以用來(lái)隱藏和顯示HTML元素。盡管它們看起來(lái)相似，但很多人仍然容易搞混。下面將分別介紹它們的屬性和用法。

方法一：使用display屬性

當(dāng)使用display:none時(shí)，一個(gè)HTML元素將被隱藏，并且在瀏覽器中不占據(jù)任何空間。如果該元素后面有其他元素，它們將會(huì)上移填補(bǔ)隱藏元素所占的空間（類(lèi)似于將100塊錢(qián)從桌子上拿走放到抽屜里，桌子上的其他物品會(huì)占據(jù)原先放錢(qián)的位置）。當(dāng)使用display:block時(shí)，已經(jīng)隱藏的HTML元素會(huì)重新顯示出來(lái)，如果其他元素占據(jù)了該空間，它們將下移以騰出位置（類(lèi)似于將100塊錢(qián)重新從抽屜里拿出來(lái)放回桌子上）。

方法二：使用visibility屬性

當(dāng)使用visibility:hidden時(shí)，一個(gè)HTML元素將被隱藏，但是它仍然占據(jù)著相應(yīng)的空間（類(lèi)似于將100塊錢(qián)藏在桌布下面，錢(qián)還在那里占據(jù)空間）。當(dāng)使用visibility:visible時(shí)，隱藏的元素將重新顯示出來(lái)（類(lèi)似于拿掉桌布，看到了100塊錢(qián)）。

示例代碼演示

下面是一個(gè)使用JavaScript和CSS的示例代碼，展示了如何通過(guò)按鈕點(diǎn)擊事件來(lái)控制div元素的顯示和隱藏。

```html

```

圖示

以下是未進(jìn)行任何改變的原始圖示，用于更好地理解這兩種方法的效果。

（圖片略）