5、理解CSS盒模型：构建高效页面布局的基础

理解CSS盒模型：构建高效页面布局的基础

1. 盒模型的基本概念

网页布局的基本原理是基于一个称为CSS盒模型的概念，该模型将每个HTML元素视为一个盒子。每个盒子的位置由网页的流动顺序决定，即HTML元素在源代码中出现的顺序。盒模型有两种主要类型：块级盒子（如 <div> 、标题或段落）和内联盒子（如 <span> 或图像）。

块级盒子通常会占据所有可用的水平空间，从新的一行开始，并将后续元素推到下一行。另一方面，内联盒子会与前面和后面的内联元素并排显示。通常，这种行为正是你所需要的，但在很多情况下并非如此。CSS允许你改变元素的显示方式，因此你可以将块级元素并排放置，或者将内联元素转换成块级元素的行为。甚至可以完全从页面流中移除元素。

盒模型的组成部分

CSS盒模型由以下四个部分组成：
- 内容（Content） ：这是HTML元素的实际内容，如段落、图像、 <div> 或 <span> 。
- 填充（Padding） ：围绕内容的水平和垂直空间。
- 边框（Border） ：围绕填充的边框。
- 外边距（Margin） ：边框外的水平和垂直空间。

这些组件共同决定了元素的最终尺寸和布局。图1展示了这些组件是如何组合在一起的。