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

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

方法一：使用display屬性

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

方法二：使用visibility屬性

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

示例代碼演示

下面是一個使用JavaScript和CSS的示例代碼，展示了如何通過按鈕點擊事件來控制div元素的顯示和隱藏。

```html

```

圖示

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

（圖片略）