CSS入门-第四篇：CSS 盒模型基础

第四篇：CSS 盒模型基础

一、盒模型概念

在 CSS 中，每个 HTML 元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解盒模型对于掌握 CSS 布局至关重要，它决定了元素在页面中的实际占用空间以及元素之间的间距关系。

可以想象一个实际生活中的盒子，内容就像是盒子里装的物品，内边距是物品与盒子内壁之间的空间，边框就是盒子本身的壁，而外边距则是这个盒子与周围其他盒子之间的间隔。

以下通过一个简单的示意图来展示盒模型结构：

  +-----------------------+
  | margin                |
  | +-------------------+ |
  | | border            | |
  | | +---------------+ | |
  | | | padding       | | |
  | | | +-----------+ | | |
  | | | | content   | | | |
  | | | +-----------+ | | |
  | | |               | | |
  | | +---------------+ | |
  | |                   | |
  | +-------------------+ |
  |                       |
  +-----------------------+