CSS樣式隱藏顯示是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)技巧，它可以在不改變頁(yè)面布局的情況下隱藏或顯示元素。通過(guò)使用display屬性和visibility屬性，可以輕松實(shí)現(xiàn)這種效果。

隱藏元素：
display: none;
visibility: hidden;
顯示元素：
display: block;
visibility: visible;

下面是一個(gè)使用CSS樣式隱藏顯示的案例：

HTML代碼：
<div class="content">
<p id="text">這是一段文本內(nèi)容</p>
<button id="hide">隱藏內(nèi)容</button>
<button id="show">顯示內(nèi)容</button>
</div>
CSS代碼：
#text {
display: block;
visibility: visible;
}
#hide {
background-color: gray;
color: white;
border: none;
padding: 5px 10px;
margin-right: 10px;
}
#show {
background-color: gray;
color: white;
border: none;
padding: 5px 10px;
}
button:hover {
cursor: pointer;
}
Javascript代碼：
var text = document.getElementById("text");
var hideBtn = document.getElementById("hide");
var showBtn = document.getElementById("show");
hideBtn.onclick = function() {
text.style.display = "none";
text.style.visibility = "hidden";
}
showBtn.onclick = function() {
text.style.display = "block";
text.style.visibility = "visible";
}

這個(gè)例子中有一段文本和兩個(gè)按鈕，點(diǎn)擊“隱藏內(nèi)容”按鈕，文本會(huì)被隱藏，點(diǎn)擊“顯示內(nèi)容”按鈕，文本會(huì)重新顯示。通過(guò)CSS樣式設(shè)置文本的顯示和隱藏效果，通過(guò)Javascript代碼實(shí)現(xiàn)按鈕的點(diǎn)擊事件。