CSS布局是指如何使用CSS樣式來定位和排列網頁中的元素。其中，div是HTML元素中一種常見的容器標簽，可以用于創建各種布局。

1. 基本布局

下面是一個簡單的基本布局示例：

<code>
<style>
.container {
border: 1px solid black;
padding: 10px;
}
<br>
      .header {
background-color: lightblue;
padding: 10px;
text-align: center;
}
<br>
      .content {
background-color: lightgreen;
padding: 10px;
text-align: center;
}
<br>
      .footer {
background-color: lightyellow;
padding: 10px;
text-align: center;
}
</style>
<br>
    <div class="container">
<div class="header">
<h1>Header</h1>
</div>
<br>
      <div class="content">
<p>Content</p>
</div>
<br>
      <div class="footer">
<p>Footer</p>
</div>
</div>
</code>

2. 兩列布局

下面是一個兩列布局的示例：

<code>
<style>
.container {
display: flex;
}
<br>
      .sidebar {
flex: 1;
background-color: lightblue;
padding: 10px;
}
<br>
      .main {
flex: 2;
background-color: lightgreen;
padding: 10px;
}
</style>
<br>
    <div class="container">
<div class="sidebar">
<p>Sidebar</p>
</div>
<br>
      <div class="main">
<p>Main Content</p>
</div>
</div>
</code>

3. 網格布局

下面是一個使用網格布局的示例：

<code>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
<br>
      .item {
background-color: lightblue;
padding: 10px;
}
</style>
<br>
    <div class="container">
<div class="item">
<p>Item 1</p>
</div>
<br>
      <div class="item">
<p>Item 2</p>
</div>
<br>
      <div class="item">
<p>Item 3</p>
</div>
<br>
      <div class="item">
<p>Item 4</p>
</div>
</div>
</code>

上述示例分別展示了基本布局、兩列布局和網格布局的用法。通過使用CSS樣式和div標簽，我們可以靈活地創建多種不同的布局，以滿足網頁設計的需求。

在實際項目中，可以根據需求選擇合適的布局方式，并結合其他CSS屬性和技巧，優化布局效果。掌握好div和CSS布局的基本原理和用法，將有助于開發者更高效地進行網頁設計和開發工作。