布局容器是CSS网站布局中常用的一种方式，它能够将页面内容包裹起来，实现对页面元素的精确控制和布局。
布局容器的概念
布局容器（layout container）是CSS中用于控制页面元素排列和布局的容器元素，它可以帮助我们将页面内容划分为不同的区域，实现页面的模块化和可维护性，常见的布局容器有：<div>、<section>、<article>等。
布局容器的使用方法
1、使用<div>作为布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>布局容器示例</title>
<style>
.container {
display: flex;
flexdirection: column;
alignitems: center;
justifycontent: spacearound;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
backgroundcolor: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
在这个例子中，我们使用<div>元素创建了一个名为container的布局容器，并设置了其样式为弹性盒子布局，我们在容器内部放置了三个红色方块。
2、使用<section>作为布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>布局容器示例</title>
<style>
section {
display: flex;
flexdirection: column;
alignitems: center;
justifycontent: spacearound;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
backgroundcolor: red;
}
</style>
</head>
<body>
<section>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
</body>
</html>
这个例子与上一个类似，只是我们将<div>元素替换为了<section>元素，这样，我们可以更清晰地表示这是一个独立的页面区域。
