在CSS中，布局是页面元素排列和展示的重要方式。不同的布局方式有不同的特点，适用于不同的场景。下面我们将对CSS的布局方式进行概览，并探讨如何选择适合的布局方式。
布局方式概览
CSS提供了多种布局方式，包括盒模型布局、Flexbox布局、Grid布局等。
盒模型布局
盒模型布局是CSS中最基础的布局方式，通过控制元素的外边距、内边距、边框和宽度/高度来实现元素的布局。盒模型布局适用于简单的页面布局需求。
Flexbox布局
Flexbox布局是一种灵活的布局方式，可以方便地实现元素的水平或垂直对齐、均分空间等。Flexbox布局适用于复杂的页面布局需求，如多列布局、垂直居中、响应式布局等。
Grid布局
Grid布局是一种二维布局方式，可以方便地实现元素在行和列上的排列和布局。Grid布局适用于需要复杂网格布局的场景，如网页设计、报表等。
选择适合的布局方式
选择适合的布局方式需要根据页面的具体需求和布局特点来决定。
盒模型布局适用于简单的页面布局
如果页面布局比较简单，元素之间的排列和布局相对固定，可以选择盒模型布局。盒模型布局通过控制元素的尺寸和位置来实现布局，适用于静态页面和简单的动态页面。
Flexbox布局适用于复杂的页面布局
如果页面布局比较复杂，需要实现多列布局、垂直居中、响应式布局等，可以选择Flexbox布局。Flexbox布局通过定义容器和子元素的属性来实现布局，适用于动态页面和复杂的页面布局。
Grid布局适用于需要复杂网格布局的场景
如果页面布局需要实现复杂的网格布局，如网页设计、报表等，可以选择Grid布局。Grid布局通过定义行和列的属性来实现布局，适用于需要复杂网格布局的场景。
综合考虑页面需求和布局特点
在选择布局方式时，需要综合考虑页面需求和布局特点。如果页面需求比较简单，可以选择盒模型布局；如果页面需求比较复杂，需要实现多列布局、垂直居中、响应式布局等，可以选择Flexbox布局或Grid布局。同时，还需要考虑浏览器兼容性和性能等因素，选择适合的布局方式。
示例
下面是一个使用Flexbox布局实现页面布局的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item {
width: 30%;
height: 200px;
background-color: #ccc;
margin: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>在这个示例中，我们定义了一个容器，使用Flexbox布局方式，将三个元素水平排列，并设置了元素之间的间距和尺寸。这个示例可以帮助我们理解如何使用Flexbox布局实现页面布局。
上一章：3.1 盒模型基础与类型差异 下一章：3.3 浮动布局详解与清除浮动