8、CSS 盒子模型与定位全解析

CSS 盒子模型与定位全解析

在网页设计中，CSS 盒子模型和元素定位是非常重要的概念，它们决定了网页元素在屏幕上的布局和显示方式。下面我们将详细介绍这些内容。

1. CSS 盒子模型

在 HTML 里，每个元素都可看作一个“盒子”，像段落、 <div> 、图像等。无论我们是否能看到，也不管样式表有无明确规定，盒子都具备一些固定属性。在进行布局设计时，我们得时刻留意这些属性。

盒子模型描述了每个 HTML 块级元素都可能有边框、内边距和外边距，以及它们的应用方式。具体来说，元素内容和边框之间存在内边距，边框可能可见也可能不可见，但会占据一定空间，元素边框和外部其他内容之间还有外边距。

从外到内，盒子模型各部分解释如下：
- 外边距（Margin） ：元素外部的区域，始终是透明的，没有颜色。
- 边框（Border） ：围绕元素，位于内边距的外侧边缘。边框有多种类型、宽度和颜色。
- 内边距（Padding） ：存在于内容周围，继承内容区域的背景颜色。
- 内容（Content） ：被内边距所环绕。

要确定元素的真实高度和宽度，必须考虑盒子模型的所有元素。例如，定义一个 <div> 元素，宽度为 250 像素，高度为 100 像素，背景为红色，边框为黑色单像素：

div {
  width: 25