### DIV+CSS布局实例详解
在Web开发中，DIV（Division）元素与CSS（Cascading Style Sheets）的结合使用是实现页面布局的核心技术之一，这种布局方式不仅提高了网页的加载速度，还增强了网页的可维护性和可访问性，本文将通过几个具体的DIV+CSS布局实例，详细讲解如何利用这些技术来构建现代、响应式的网页布局。
#### 一、基础概念回顾
**DIV元素**：HTML中的``元素是一个块级容器，用于组织和布局页面内容，它本身不带有任何样式，但可以通过CSS来定义其样式、大小、位置等属性。
**CSS**：CSS用于控制HTML元素的样式和布局，通过选择器定位到具体的HTML元素，然后应用一系列样式规则来改变这些元素的外观。
#### 二、实例一：简单两栏布局
**目标**：创建一个左侧导航栏固定宽度，右侧内容区自适应宽度的两栏布局。
**HTML结构**：
<div class="container">
<div class="sidebar">侧边栏内容</div>
<div class="main-content">主内容区</div>
</div>
**CSS样式**：
.container {
display: flex; /* 使用Flexbox布局 */
}
.sidebar {
width: 200px; /* 侧边栏固定宽度 */
background-color: #f4f4f4; /* 背景色 */
padding: 20px; /* 内边距 */
}
.main-content {
flex-grow: 1; /* 主内容区自适应剩余空间 */
padding: 20px; /* 内边距 */
}
在这个例子中，我们使用了Flexbox布局来简化两栏布局的实现，Flexbox提供了更加灵活和强大的布局能力，使得两栏布局变得简单直观。
#### 三、实例二：响应式三栏布局
**目标**：创建一个在小屏幕设备上堆叠显示，在大屏幕设备上并排显示的三栏布局。
<div class="container">
<div class="column">第一栏</div>
<div class="column">第二栏</div>
<div class="column">第三栏</div>
</div>
.container {
display: flex;
flex-wrap: wrap; /* 允许子元素换行 */
}
.column {
flex: 1 1 300px; /* 弹性基础值、增长因子、最小宽度 */
padding: 20px;
box-sizing: border-box; /* 使得padding和border包含在宽度内 */
}
@media (max-width: 600px) {
.column {
flex: 1 1 100%; /* 在小屏幕上，每栏占据全部宽度 */
}
}
在这个例子中，我们使用了Flexbox的`flex-wrap`属性来允许子元素在必要时换行，并通过媒体查询（Media Queries）来定义不同屏幕尺寸下的布局样式，在小屏幕设备上，三栏会堆叠显示；而在大屏幕设备上，则会并排显示。
#### 四、实例三：网格布局（Grid Layout）
**目标**：使用CSS Grid布局创建一个复杂的网格系统，包括头部、导航栏、主内容区和侧边栏。
<div class="grid-container">
<header>头部</header>
<nav>导航栏</nav>
<div class="main">
<aside>侧边栏</aside>
<article>主内容</article>
</div>
<footer>底部</footer>
</div>
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* 定义两列，第一列宽度为第二列的三分之一 */
grid-template-rows: auto 1fr auto; /* 定义三行，第一行和第三行高度自适应，第二行占据剩余空间 */
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
header, nav, .main, footer {
grid-area: var(--grid-area);
.main {
grid-template-columns: 1fr 3fr; /* 在主内容区内部再定义一个
