程琳琳

（广东交通职业技术学院 广东省广州市 510650）

1 引言

在网页设计中，一个页面的布局是非常重要的。一个精美的网页不仅仅是依靠图文并茂的视觉展示，更重要的是网页的框架和布局，合理的布局能让用户更好地接受网页信息。例如，我们所熟知的淘宝、京东等网站，虽然页面的内容很多，但是总体给人的感觉是整齐，美观的。这正是页面布局合理的效果。

盒子模型是CSS网页布局的基础，也是CSS布局的基本思想，在网页制作中的应用十分广泛[1]。我们需掌握盒子模型的各类特征与规律，才能更好地控制各种元素在网页中的显示效果。CSS盒子模型属于网页制作中CSS布局的重要技术。在网页制作过程中，合理地利用盒子模型，有助于制作更加美观、合理的网页。对于盒子模型，需掌握以下几个基本内容。

（1）理解CSS盒子模型的概念及原理。

（2）掌握CSS盒子模型的相关属性。

（3）掌握CSS盒子模型的应用及相关常见问题。

本文也将围绕这几个知识点为初学者提供参考。

2 盒子模型的概念及其属性

2.1 盒子模型的概念

盒子模型，即把网页中的各种元素视为一个矩形的盒子，类似于一个容纳物体的容器。每个盒子的构成包括元素的内容、外边距，内边距及边框。

以某个元素为例，盒子模型的结构如图1所示[2]。标记为content区域是盒子的内容部分，盒子边框区域标记为border。内边距为内容与边框之间的距离，也就是标记padding这块区域。盒子外边距区域标记为margin，即该元素与其相邻元素之间的距离。……