引言
CSS（层叠样式表）是网页设计中不可或缺的一部分，它负责控制网页的布局、外观和感觉。掌握CSS布局对于创建美观、响应式且功能齐全的网页至关重要。本文将带您从零开始，逐步学习CSS页面布局的基础知识。
CSS布局的基本概念
1. HTML结构
在开始使用CSS之前，您需要有一个基本的HTML结构。HTML定义了网页的内容，而CSS则负责如何呈现这些内容。

2. CSS选择器
CSS选择器用于指定要应用样式的HTML元素。常见的选择器包括类选择器（
.class
）、ID选择器（
#id
）和标签选择器（
element
）。
/* 类选择器 */
.header {
background-color: #333;
color: #fff;
}

/* ID选择器 */
#footer {
background-color: #555;
color: #fff;
}

/* 标签选择器 */
nav ul {
list-style-type: none;
padding: 0;
}
常见的CSS布局技巧
1. 固定宽度布局
固定宽度布局是最简单的布局方式，它通过设置容器的宽度来控制布局。
.container {
width: 1000px;
margin: 0 auto;
}
2. 两列布局
两列布局通常用于创建包含导航栏和主要内容的页面。可以通过浮动（
float
）属性来实现。
.main-content {
float: left;
width: 70%;
}

.sidebar {
float: right;
width: 30%;
}
3. 响应式布局
响应式布局能够根据不同的屏幕尺寸自动调整布局。可以使用媒体查询（
@media
）来实现。
@media (max-width: 768px) {
.main-content, .sidebar {
width: 100%;
}
}
实践案例
以下是一个简单的两列布局的示例：

.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.main-content, .sidebar {
float: left;
padding: 10px;
}

.main-content {
width: 70%;
}

.sidebar {
width: 30%;
}
总结
通过本文的学习，您应该已经掌握了CSS页面布局的基本概念和常用技巧。继续实践和探索，您将能够创建出更加复杂和美观的网页布局。祝您学习愉快！