9、使用CSS进行页面布局

使用CSS进行页面布局

1. 页面布局的基础

在现代网页设计中，CSS（层叠样式表）已经成为控制网页布局的核心工具。CSS不仅能够让网页看起来美观，还能确保网页在不同设备和屏幕尺寸上的一致性。通过CSS，我们可以精确地控制网页元素的位置、大小、间距等属性，从而实现灵活多变的页面布局。

1.1 基本概念

CSS布局的基本原理是通过控制HTML元素的样式属性来调整它们在页面中的位置和表现形式。CSS布局的核心在于理解盒模型（Box Model），即每个HTML元素都被视为一个矩形盒子，这个盒子由内容、内边距（padding）、边框（border）和外边距（margin）组成。

属性	描述
内容	实际内容区域
内边距	内容与边框之间的空间
边框	包围内容和内边距的线条
外边距	元素与其他元素之间的空间

1.2 盒模型的应用

了解盒模型对于掌握CSS布局至关重要。我们可以通过以下代码段来设置一个简单的盒模型：

div {
  widt