1. 引言
CSS布局是网页设计中不可或缺的一环，它决定了网页的结构和视觉效果。通过合理运用CSS布局技巧，可以创造出既美观又实用的网页。本文将通过经典案例分析，帮助读者掌握CSS布局的实战技巧。
2. 盒模型与布局基础
2.1 盒模型
盒模型是CSS布局的基础，每个HTML元素都可以视为一个盒子，包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。
div {
width: 300px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
2.2 流式布局
流式布局是最常见的布局方式，它使网页内容能够适应不同大小的屏幕。
.container {
width: 100%;
padding: 0 20px;
}
.item {
width: 20%;
float: left;
box-sizing: border-box;
}
3. 经典布局案例分析
3.1 流式布局案例分析
案例描述：制作一个响应式两列布局，左侧固定宽度，右侧自适应宽度。
HTML结构：
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
CSS样式：
.container {
overflow: hidden;
}
.left {
width: 200px;
float: left;
}
.right {
margin-left: 200px;
}
3.2 Flexbox布局案例分析
案例描述：使用Flexbox实现一个三列布局，中间列自适应宽度，两侧列固定宽度。
HTML结构：
<div class="container">
<div class="left">左侧内容</div>
<div class="center">中间内容</div>
<div class="right">右侧内容</div>
</div>
CSS样式：
.container {
display: flex;
}
.left,
.right {
width: 150px;
}
.center {
flex-grow: 1;
}
3.3 Grid布局案例分析
案例描述：使用Grid布局实现一个两行三列的响应式布局。
HTML结构：
<div class="container">
<div class="row">
<div class="cell">单元格1</div>
<div class="cell">单元格2</div>
<div class="cell">单元格3</div>
</div>
<div class="row">
<div class="cell">单元格4</div>
<div class="cell">单元格5</div>
<div class="cell">单元格6</div>
</div>
</div>
CSS样式：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
}
.row {
display: flex;
}
.cell {
flex: 1;
}
4. 总结
通过本文的经典案例分析，读者可以掌握CSS布局的实战技巧。在实际开发中，可以根据需求选择合适的布局方式，创造出美观实用的网页。