- A+
使用HTML的div标签进行页面布局是前端开发的基础技能。div是一个块级容器，本身没有语义，但通过CSS控制，可以实现各种灵活、响应式的网页结构。
理解div的基本作用
div（division）用于将页面划分为不同的区块，每个div可代表页头、内容区、侧栏、页脚等部分。它本身不带样式，需要配合CSS来设定宽高、位置、边距等视觉效果。
例如：
<div class="header">网站头部</div>
<div class="content">主要内容</div>
<div class="sidebar">侧边栏</div>
<div class="footer">底部信息</div>
常用的布局方式
通过不同CSS方法，可以让div实现多种布局效果：
立即学习“前端免费学习笔记（深入）”；
1. 浮动布局（Float）
早期常用float属性让div左右排列，适合简单的多列布局。
.sidebar {
float: left;
width: 200px;
}
.content {
margin-left: 220px;
}
注意：浮动元素会脱离文档流，需清除浮动避免影响后续元素，可用 overflow: hidden 或伪类 ::after 清除。
2. 弹性盒子布局（Flexbox）
专为短片创作者打造的AI创作平台
279
查看详情
现代布局首选，适合一维布局（行或列）。父容器设置 display: flex 后，子div可自动对齐、伸缩。
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.main {
flex: 1;
}
flex: 1 让主内容区自动占满剩余空间，适配不同屏幕。
3. 网格布局（Grid）
适合二维布局，能精确控制行和列。
.layout {
display: grid;
grid-template-columns: 200px 1fr;
gap: 10px;
}
以上代码创建两列，左侧固定200px，右侧自适应。
响应式设计技巧
为了让div布局在手机、平板、桌面都表现良好，需结合媒体查询和相对单位。
- 使用百分比宽度或 max-width 避免内容溢出
- 通过 @media 查询调整小屏幕下的布局方向
- 移动端可将侧栏置于下方，使用 flex-direction: column
- 图片和视频设置 max-width: 100% 防止撑破容器
提升可维护性的建议
合理组织HTML结构和CSS命名能让布局更易维护。
- 给div添加有意义的class名，如 header、nav、main、aside、footer
- 采用BEM等命名规范，如 sidebar__menu、sidebar__item
- 避免过度嵌套div，保持结构简洁
- 用语义化标签（如 header、main）替代部分div更利于SEO和可访问性
基本上就这些。掌握div与CSS的配合，尤其是Flex和Grid，就能应对大多数页面布局需求。关键是多练习常见布局模式，比如两栏、三栏、居中、圣杯布局等。不复杂但容易忽略细节，比如盒模型、外边距折叠等问题也需留意。
