在CSS中，我們可以使用display屬性來設置元素的隱藏和顯示。display屬性可以設置為以下幾個值：
display: none; // 隱藏元素，不占用空間 display: block; // 塊級元素，占用整行空間 display: inline-block; // 內聯(lián)塊級元素，不獨占一行但可以設置寬高 display: inline; // 內聯(lián)元素，不獨占一行，不能設置寬高 display: table; // 表格元素，表格行為 display: flex; // 彈性盒子元素，可伸縮布局 display: grid; // 網(wǎng)格布局元素，二維網(wǎng)格布局
其中，display: none;是實現(xiàn)隱藏元素的最常用屬性，可以用于隱藏不需要顯示的元素，比如彈出層、提示信息等。
下面是一個實現(xiàn)點擊按鈕切換元素隱藏和顯示的例子：
HTML代碼：這是需要隱藏和顯示的內容CSS代碼： #content { display: none; } #content.show { display: block; }
JavaScript代碼：
var toggleBtn = document.querySelector('#toggleBtn');
var content = document.querySelector('#content');
toggleBtn.addEventListener('click', function(){
if(content.classList.contains('show')) {
content.classList.remove('show');
} else {
content.classList.add('show');
}
});以上代碼實現(xiàn)了當點擊按鈕時，元素的隱藏和顯示切換。這里通過添加和移除show類來實現(xiàn)元素的顯示和隱藏。CSS中設置display為none，JavaScript中添加或移除show類，實現(xiàn)了元素的隱藏和顯示。
上一篇css并列懸浮