CSS 是一門強大的前端編程語言，可以讓我們輕松地為網頁增加各種炫酷的效果。其中，一個常見的效果就是通過 CSS 在點擊某個元素時彈出一個方框，這一效果十分實用。下面，我們就來學習一下如何實現這一效果。

HTML 代碼：
<div class="box">
<button>點擊我彈出方框</button>
<div class="popup">
<p>這是一個方框</p>
<button class="close">關閉</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;
}

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

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

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');
}
});

上面的代碼中，我們首先獲取了關閉按鈕和包含按鈕和方框的 box 元素。然后，為關閉按鈕添加了一個 click 事件監聽器，當按鈕被點擊時，將 box 的 active 類名移除，隱藏方框。

同時，我們還為 box 元素添加了一個 click 事件監聽器。當該元素被點擊且不包含 active 類名時，將 active 類名添加到 box 元素中，使方框呈現出來。這樣，我們就完成了通過 CSS 點擊彈出一個方框的效果。