前言
CSS3 是一种用于描述网页样式的语言，它可以干很多很棒的事情，如圆角、动画、渐变等。但在使用 CSS3 之前，我们需要先了解一些基本的 CSS 布局概念。本文将手把手教大家使用 CSS3 制作一个简单页面的布局，并对代码进行详细解读，让读者快速入门 CSS 布局。
一、HTML 结构
在开始之前，我们需要先了解 HTML 结构。本文将制作一个简单的页面来进行演示，页面结构如下：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
</html>
上面代码中，我们使用了 HTML5 的语法规范，其中 <header> 作为页面的头部，<nav> 作为页面的导航，<section> 作为页面的主要内容，<aside> 作为页面的辅助信息，<footer> 作为页面的底部信息。
二、CSS 布局概念
在进行 CSS 布局之前，我们需要先了解一些基本的 CSS 布局概念：
1. 盒子模型
在 CSS 中，每个元素都被表示为一个矩形的盒子，这个盒子由四个部分组成：内边距（padding）、边框（border）、外边距（margin）和内容（content）。
例如，给一个 div 元素设置样式：
.example {
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid red;
margin: 10px;
}
这个 div 元素的盒子模型如下图所示：
在盒子模型中，content 区域是元素实际内容所占据的空间，padding 区域是内容与边框之间的空白区域，border 区域是内容与外边距之间的边框，margin 区域则是元素与周围元素之间的空白区域。
2. 浮动
在 CSS 中，浮动（float）属性指使一个元素“浮动”在其容器的左边或右边，直到该元素的侧边触碰到容器的边框或另一个浮动的元素，这个特性常用于制作多栏布局。
例如，我们设置左侧的导航栏浮动：
nav {
float: left;
width: 200px;
}
上面代码中，我们将 nav 元素设为向左浮动，并设置其宽度为 200 像素。
3. 清除浮动
在上面的例子中，我们将 nav 元素设为向左浮动。但是，如果我们不清除浮动，后面的元素会紧贴着 nav 元素，造成排版混乱的问题。
例如，我们在父元素的末尾处添加一个 div ，并在 div 中添加一些文本。如果不清除 nav 元素的浮动，文本将会紧贴着 nav 元素，如下图所示：
为了解决这个问题，我们通常需要在浮动元素的末尾添加一个 div 元素，并设置 clear 属性：
<div style="clear: both;"></div>上面代码中，我们在浮动元素末尾添加一个 div 元素，并设置 clear 属性。这会告诉浮动元素的父容器，在它的末尾添加一个空元素，并清除浮动元素所造成的影响。
三、CSS3 布局
接下来，我们将通过使用 CSS3 完成页面布局。首先，我们需要创建一个 CSS 文件，并将其引入到 HTML 文件中：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>Header</header>
<nav>Nav</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
</html>
1. 布局基础
我们首先需要使用 CSS3 完成一个基本的布局。
例如，我们需要将 header、nav、section、aside 和 footer 元素进行布局：
header {
background-color: #ccc;
height: 100px;
}
nav {
float: left;
width: 200px;
height: 300px;
background-color: #eee;
}
section {
margin-left: 220px;
margin-right: 220px;
background-color: #fff;
height: 500px;
}
aside {
float: right;
width: 200px;
height: 500px;
background-color: #eee;
}
footer {
background-color: #ccc;
height: 100px;
}
上面代码中，我们设置 header、nav、section、aside 和 footer 元素的样式。其中，header 和 footer 元素设置背景颜色和高度，nav 元素设置向左浮动、宽度、高度和背景颜色，aside 元素设置向右浮动、宽度、高度和背景颜色，section 元素设置左、右边距和背景颜色，并设置高度为 500 像素。
这样，我们就完成了最基础的 CSS3 布局。
2. 布局进阶
我们还可以使用 CSS3 完成更加高级的布局。
例如，我们需要使用 CSS3 完成左侧栏固定，右侧内容区自适应的布局：
nav {
float: left;
width: 200px;
height: 100%;
background-color: #eee;
}
section {
margin-left: 220px;
margin-right: 0;
background-color: #fff;
height: 500px;
}
aside {
position: fixed;
right: 0;
top: 0;
width: 200px;
height: 100%;
background-color: #eee;
}
上面代码中，我们设置 nav 元素向左浮动，宽度为 200 像素，并将 height 属性设为 100%，使其高度与父元素相同，从而填满整个左侧区域。
我们将 section 元素的 margin-left 设为 220 像素，margin-right 设为 0，使其向右移动，从而避免了在页面宽度一定的情况下，section 元素的宽度被算作过小，造成内容不够放置的现象。
最后，我们将 aside 元素的 position 设为 fixed，表示其在窗口中固定不动，并将 right 和 top 属性设为 0，width 设为 200 像素，height 设为与父元素相等，使其填满整个右侧区域。
这样，我们就完成了一个左侧栏固定、右侧内容区自适应的布局。
结语
通过本文的学习，我们可以了解到 CSS3 布局的基本概念，并可以轻松使用 CSS3 完成一个简单的页面布局。当然，CSS3 布局并不止于此，我们在实际开发中还可以使用更多的 CSS3 属性和技巧来实现更加复杂和多样化的布局效果。