div是HTML中最常用的元素之一，它被用來將文檔分割成獨立的區塊，并為這些區塊提供樣式和布局。而display屬性則用來控制元素的顯示方式。本文將詳細介紹如何使用div和display屬性來創建不同的布局效果。
<div>是HTML的一個重要元素，它通常用來定義一個區域，方便對該區域進行樣式和布局的控制。例如，我們可以使用div包裹一組相關的內容，然后對這個div設置樣式，使其具有特定的尺寸、邊框、背景顏色等等。通過使用多個div，我們可以創建復雜的布局效果，比如網站的頭部、側邊欄、內容區域和底部等。
具體來說，display屬性用來控制元素的顯示方式，常用的取值有block、inline和none。block表示元素將以獨立的塊級元素顯示，即占據一行并撐滿父元素的寬度。inline表示元素將以行內元素的方式顯示，即與其他行內元素在同一行上顯示，并根據內容自動調整寬度。none表示元素將被隱藏，不占據空間。
以下是幾個使用div和display屬性的代碼案例，通過代碼和效果演示，幫助讀者更好地理解這些概念。

是一個使用div和display屬性創建網頁頭部的案例：

<div style="background-color: #333; color: #fff; padding: 20px;">
<h1 style="display: inline;">網頁標題</h1>
<a href="#" style="display: inline; margin-left: 20px; color: #fff;">首頁</a>
<a href="#" style="display: inline; margin-left: 20px; color: #fff;">關于我們</a>
<a href="#" style="display: inline; margin-left: 20px; color: #fff;">聯系我們</a>
</div>

在上述代碼中，我們使用一個div元素包裹了網頁頭部的內容，然后為這個div設置了背景顏色、文字顏色和內邊距。通過設置display屬性為inline，我們使得h1標簽和三個a標簽都以行內元素的方式顯示，并根據內容自動調整寬度。從而實現了網頁頭部的布局效果。

接下來是一個使用div和display屬性創建圣杯布局的案例：

<div style="width: 100%; padding: 20px;">
<div style="width: 20%; float: left; background-color: #f7f7f7;">
<p>左側欄</p>
</div>
<div style="width: 60%; margin: 0 20px; background-color: #fff;">
<p>內容區域</p>
</div>
<div style="width: 20%; float: right; background-color: #f7f7f7;">
<p>右側欄</p>
</div>
</div>

在上述代碼中，我們使用三個div元素來創建一個圣杯布局，其中左側欄和右側欄的寬度分別為20%，內容區域的寬度為60%。通過設置display屬性為float和設置相應的浮動和外邊距樣式，我們使得這三個div元素在水平方向上正確地布局，并且內容欄的高度可以根據內容自動調整。
除了上述案例，div和display屬性還可以用來創建很多其他的布局效果，比如分欄布局、網格布局等等。希望通過這些案例的介紹，讀者可以更好地理解div和display屬性的用法，并能夠靈活運用它們來實現各種復雜的頁面布局。