Div是HTML/CSS中最常用的標記之一，它可以定義在網頁中的一個獨立部分，并且可以與CSS樣式表中的規則相配合，以此實現眾多的網頁布局、視覺效果及交互功能。

下面我們將介紹Div標記在CSS中的使用，以及它所能實現的功能：

/* 定義一個div規則 */
div {
border: 1px solid black;
margin-top: 20px;
padding: 10px;
background-color: #f2f2f2;
}

1.布局

Div可以被用來實現網頁中的布局，比如構建網頁的不同區域、欄目及排版等。使用CSS對Div進行定位、大小的調整，可以輕松地實現各種布局效果。在頁面中使用div的一個典型案例包括：定義一個頁眉、導航欄、頁腳并設定具體的CSS樣式。

/* 定義header, nav, footer的規則 */
header {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
nav {
height: 30px;
background-color: #f2f2f2;
}
footer {
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}

2.視覺效果

通過CSS，我們可以給Div添加各種視覺效果，從而美化頁面，并增加用戶的交互體驗。例如：改變Div的背景顏色、設置圓角邊框、給Div增加投影效果等，這些視覺效果可以讓頁面更加美觀、富有吸引力。

/* 添加投影效果 */
div {
box-shadow: 5px 5px 5px #999;
}
/* 圓角邊框 */
div {
border-radius: 5px;
}
/* 漸變背景 */
div {
background: linear-gradient(to bottom, #f2f2f2, #e6e6e6);
}

3.交互功能

通過CSS進行交互功能的實現，可以讓用戶更加便捷地使用網站。例如：用jQuery的slideToggle函數隱藏/顯示一個Div，在PC和移動端上都可以產生不同的效果，從而提高用戶的互動體驗。

/* 隱藏/顯示功能 */
$(document).ready(function(){
$(".btn").click(function(){
$("div").slideToggle();
});
});

通過以上對Div在CSS中的應用，可以看出其在網頁制作中的舉足輕重。因此，掌握基礎的Div布局及CSS樣式應用方法，對于網頁設計師而言是尤其重要的。