CSS 布局是网页设计中非常重要的一个环节，它决定了页面元素的排列和显示方式。本教程将带您从基础开始，逐步学习 CSS 布局的相关知识。
布局基础
CSS 布局主要有两种类型：浮动布局（Float Layout）和定位布局（Positioning Layout）。
浮动布局
浮动布局是传统的布局方式，通过设置元素的 float 属性来使元素横向浮动。
- 基本语法：
float: left;或float: right; - 注意事项：浮动元素会影响其兄弟元素的位置。
定位布局
定位布局提供了更强大的控制能力，可以通过设置元素的 position 属性来实现。
- 基本语法：
position: static;、position: relative;、position: absolute;或position: fixed; - 注意事项：绝对定位的元素会脱离正常文档流。
实战案例
下面是一个简单的页面布局示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS 布局实战案例</title>
<style>
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: #f8f8f8;
padding: 10px;
}
.footer {
background-color: #f8f8f8;
padding: 10px;
text-align: center;
}
.sidebar {
background-color: #f0f0f0;
width: 20%;
float: left;
padding: 10px;
}
.main {
background-color: #ffffff;
width: 70%;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">头部内容</div>
<div class="sidebar">侧边栏内容</div>
<div class="main">主要内容</div>
<div class="footer">页脚内容</div>
</div>
</body>
</html>
在上面的示例中，我们使用浮动布局将页面分为头部、侧边栏、主内容和页脚。
扩展阅读
如果您想了解更多关于 CSS 布局的技巧，可以阅读本站提供的 CSS 布局高级教程。