一、什么是 div 元素
div 元素是 HTML 文档中的一个常见元素，它通常用于布局和分组。它是一个块级元素，能够将文档划分为多个区域，每个区域可以单独进行样式设置和操作。
在页面设计中，div 元素被广泛应用于网页排版和布局。通过设置不同的样式属性和在内部嵌套其他元素，可以实现各种复杂的布局效果。
<div class="wrapper"> <div class="header">头部内容</div> <div class="main">主体内容</div> <div class="footer">底部内容</div> </div>
二、基本应用
div 元素最基本的功能就是用来划分网页中的不同块级区域。通过设置不同的 class 或 id 属性，并在其中插入其他元素，可以实现各种复杂的布局。
以下是一个简单的 div 布局示例：
.wrapper {
width: 960px;
margin: 0 auto;
}
.header {
height: 80px;
background-color: #333;
color: #fff;
}
.main {
width: 720px;
float: left;
}
.sidebar {
width: 240px;
float: right;
}
.footer {
height: 60px;
background-color: #333;
color: #fff;
clear: both;
}
以上代码实现了一个简单的头部、主体、侧边栏和底部布局。其中 wrapper 定义网页整体宽度和居中，header 和 footer 定义顶部和底部的样式，main 和 sidebar 则分别定义了主体和侧边栏的宽度和位置。
三、响应式布局
如今的网页设计越来越注重用户体验，响应式布局成了必不可少的一部分。通过使用 div 元素，并结合媒体查询等技术，可以实现不同的屏幕大小下的不同排版效果。
以下是一个简单的响应式布局示例：
.wrapper {
max-width: 960px;
margin: 0 auto;
}
.header {
height: 80px;
background-color: #333;
color: #fff;
}
.main {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.main {
width: 70%;
float: left;
}
.sidebar {
width: 30%;
float: right;
}
}
.footer {
height: 60px;
background-color: #333;
color: #fff;
clear: both;
}
以上代码实现了一个简单的头部、主体、侧边栏和底部布局，并通过媒体查询设置了在屏幕宽度小于 768px 时，主体和侧边栏为上下两列，并占据整个宽度；在屏幕宽度大于 768px 时，主体占宽度的 70%，侧边栏占 30%，并排列在右侧。
四、嵌套和层叠
div 元素的另一个重要特性是可以嵌套和层叠。通过嵌套和层叠，可以实现更加复杂和多样的布局效果。
以下是一个简单的嵌套和层叠示例：
.inner {
width: 100%;
padding: 20px;
background-color: #eee;
}
.box {
width: 100%;
height: 200px;
margin-bottom: 20px;
background-color: #ccc;
}
.box-1 {
background-color: #f00;
}
.box-2 {
background-color: #0f0;
}
.box-3 {
background-color: #00f;
}
<div class="inner">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
以上代码实现了一个包含三个块级元素的容器，每个块级元素代表一个盒子。通过设置不同的 class 属性，可以实现不同的背景色。此外，通过在 inner 容器中嵌套 box 容器，也可以形成多层嵌套，实现更加灵活和复杂的布局效果。
五、总结
div 元素在页面设计中是一个非常重要和常用的元素。它可以通过设置不同的样式属性和结合其他元素进行嵌套和层叠，实现各种复杂的布局和排版效果。在响应式布局方面，div 元素的应用也十分广泛，通过结合媒体查询等技术，可以实现不同屏幕大小下的自适应。
通过学习和掌握 div 元素的应用，可以更加灵活和高效地进行页面设计和开发。
