CSS模態框是一個非常常用的Web設計組件，它可以使頁面呈現更平滑、更漂亮的外觀，其基本原理是通過使用CSS的display屬性來控制模態框的顯示與隱藏。

為了實現CSS模態框的開始隱藏，我們可以在HTML代碼中加入以下樣式代碼：

/* 定義模態框以及其遮罩層的樣式 */
#modal {
display: none; /* 隱藏模態框 */
position: fixed; /* 定位模態框在頁面中央 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#modal-overlay {
display: none; /* 隱藏遮罩層 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
background-color: rgba(0, 0, 0, 0.5);
}
/* 模態框顯示時的樣式 */
#modal.show {
display: block;
}
#modal-overlay.show {
display: block;
}

上述代碼中，我們定義了模態框和遮罩層的樣式，并將它們的display屬性都設置為none，以實現初始隱藏。當需要顯示模態框時，我們可以通過給它們添加類名.show來將它們的display屬性設置為block，這樣就可以使它們顯示出來了。

在JavaScript代碼中，我們可以通過以下方式來實現模態框的顯示和隱藏操作：

// 獲取模態框和遮罩層的元素
var modal = document.getElementById('modal');
var modalOverlay = document.getElementById('modal-overlay');
// 顯示模態框
function showModal() {
modal.classList.add('show');
modalOverlay.classList.add('show');
}
// 隱藏模態框
function hideModal() {
modal.classList.remove('show');
modalOverlay.classList.remove('show');
}

這樣，我們就可以在需要使用CSS模態框的Web頁面中，通過設置其初始隱藏來使頁面顯得更加美觀，也為后續的JavaScript操作提供了更加便利的基礎。