CSS 是一門強(qiáng)大的前端編程語言，可以讓我們輕松地為網(wǎng)頁增加各種炫酷的效果。其中，一個(gè)常見的效果就是通過 CSS 在點(diǎn)擊某個(gè)元素時(shí)彈出一個(gè)方框，這一效果十分實(shí)用。下面，我們就來學(xué)習(xí)一下如何實(shí)現(xiàn)這一效果。

HTML 代碼：
<div class="box">
<button>點(diǎn)擊我彈出方框</button>
<div class="popup">
<p>這是一個(gè)方框</p>
<button class="close">關(guān)閉</button>
</div>
</div>
CSS 代碼：
.box {
position: relative;
display: inline-block;
}
.popup {
position: absolute;
top: 100%;
left: 0;
width: 100px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
display: none;
padding: 10px;
}
.box:hover .popup {
display: block;
}
.close {
margin-top: 10px;
}

上面的代碼中，我們使用了一個(gè)包含按鈕和方框的 div 元素。方框使用了絕對(duì)定位，初始時(shí) display 屬性設(shè)置為 none，不顯示在頁面上。通過 CSS 控制當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，將方框的 display 屬性設(shè)置為 block，使方框顯示出來。

同時(shí)，為了讓方框能夠正常工作，我們還需要在方框中添加一個(gè)關(guān)閉按鈕。關(guān)閉按鈕的作用是將方框的 display 屬性重新設(shè)置為 none，隱藏方框。這需要添加一些 JavaScript 代碼來實(shí)現(xiàn)，具體可以參考下面的代碼實(shí)現(xiàn)：

JavaScript 代碼：
var closeBtn = document.querySelector('.popup .close');
var box = document.querySelector('.box');
closeBtn.addEventListener('click', function() {
box.classList.remove('active');
});
box.addEventListener('click', function(e) {
if (e.target.classList.contains('box') && !box.classList.contains('active')) {
box.classList.add('active');
}
});

上面的代碼中，我們首先獲取了關(guān)閉按鈕和包含按鈕和方框的 box 元素。然后，為關(guān)閉按鈕添加了一個(gè) click 事件監(jiān)聽器，當(dāng)按鈕被點(diǎn)擊時(shí)，將 box 的 active 類名移除，隱藏方框。

同時(shí)，我們還為 box 元素添加了一個(gè) click 事件監(jiān)聽器。當(dāng)該元素被點(diǎn)擊且不包含 active 類名時(shí)，將 active 類名添加到 box 元素中，使方框呈現(xiàn)出來。這樣，我們就完成了通過 CSS 點(diǎn)擊彈出一個(gè)方框的效果。