第五章 CSS盒模型

5.1 盒模型的定义

盒模型（Box Model）是Web开发中的一种概念，用于描述HTML元素如何在页面上占据空间。它将每个HTML元素看作是一个矩形盒子，并且定义了这个盒子由哪些部分组成，如何计算元素的总大小。盒模型包括以下四个区域：

1. 内容区域（Content）： 显示元素的实际内容，如文本或图片。这是最内部的区域，定义了元素的宽度和高度。

2. 内边距（Padding）： 内容区域与边框之间的空白区域。内边距会增加元素的整体尺寸，但它的背景颜色或图片可以扩展到内边距区域。

3. 边框（Border）： 包围内边距和内容区域的边界。边框的厚度、样式和颜色都可以调整，且会增加元素的总宽度和高度。

4. 外边距（Margin）： 元素外部与其他元素之间的距离。外边距不会被背景颜色或图片覆盖，它纯粹是用于控制元素之间的空隙。

盒模型的总宽度和高度计算公式为：

 总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

 总高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距

理解盒模型是掌握网页布局的关键，因为它直接影响元素的排列和页面的整体设计。

5.2 CSS元素的高度和宽度

在CSS中，设置元素的高度和宽度是进行页面布局的基础。CSS提供了控制元素大小的相关属性和计算规则。以下是关于元素高度和宽度的详细信息：

 1. 高度（height）和宽度（width）属性

 height 用于设置元素的高度。

 width 用于设置元素的宽度。

这些属性可以使用不同的单位来设置大小，比如像素（px）、百分比（%）、视口单位（vw、vh）等。

 2. 默认行为

 对于 块级元素（如 div），默认宽度是父元素宽度的 100%，高度则是根据内容自动扩展。

 对于 内联元素（如 span），默认情况下 height 和 width 属性是无效的，因为它们根据内容的尺寸自动调整。

 3. 单位

 像素（px）：绝对单位，表示固定的大小。例如，width: 300px; 表示元素宽度为300像素。

 百分比（%）：相对于父元素的尺寸。例如，width: 50%; 表示元素宽度是父元素宽度的50%。

 视口单位（vw、vh）：

   1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

   例如，width: 50vw; 表示元素宽度是视口宽度的50%。

 4. 盒模型对宽度和高度的影响

默认情况下，width 和 height 属性只影响内容区域的大小，不包括内边距、边框和外边距。即使你指定了宽度和高度，实际显示的元素大小可能会因为这些额外的空间而大于预期。

举例：

css

div {

  width: 200px;

  height: 100px;

  padding: 10px;

  border: 5px solid black;

  margin: 20px;

}

在默认的 盒模型（boxsizing: contentbox）中，元素的 总宽度 和 总高度 计算如下：

 总宽度 = 内容宽度 (200px) + 左右内边距 (10px + 10px) + 左右边框 (5px + 5px) = 230px

 总高度 = 内容高度 (100px) + 上下内边距 (10px + 10px) + 上下边框 (5px + 5px) = 130px

 5. boxsizing属性

使用 boxsizing 属性可以改变盒模型的计算方式：

 boxsizing: contentbox;（默认值）：width 和 height 只应用于内容区域，不包含内边距和边框。

 boxsizing: borderbox;：width 和 height 包括内容区域、内边距和边框的总和。这意味着设置的宽度和高度是元素的总尺寸，而不是仅仅是内容区域的尺寸。

例如：

css

div {

  width: 200px;

  height: 100px;

  padding: 10px;

  border: 5px solid black;

  boxsizing: borderbox;

}

在这种情况下：

 总宽度 仍然是 200px（宽度包括了内边距和边框）。

 总高度 仍然是 100px。

 6. 自动高度

 当 height 未指定或设置为 auto 时，元素会根据其内容自动调整高度。

  

 7. 最小和最大宽度/高度

 minwidth 和 minheight：设置元素的最小宽度和最小高度，即使内容较少，也不会缩小到低于该值。

 maxwidth 和 maxheight：设置元素的最大宽度和最大高度，即使内容过多，也不会超过该值。

例如：

css

div {

  width: 100%;

  minwidth: 300px;

  maxwidth: 800px;

}

此时，元素的宽度会根据父容器调整，但不会小于 300px，也不会超过 800px。

 8. 溢出内容处理（overflow）

如果内容超过了指定的宽度和高度，可以使用 overflow 属性控制内容如何处理：

 overflow: visible;（默认）：内容不受限制，会溢出元素框。

 overflow: hidden;：超出部分会被裁剪掉。

 overflow: scroll;：如果内容超出，会显示滚动条。

 overflow: auto;：如果内容超出，会自动显示滚动条，否则不会。

 结论

通过控制元素的高度和宽度，结合盒模型的理解，可以精确地设计页面的布局和元素的大小。

5.3 边距设置和边框设置

在CSS中，边距（margin） 和 边框（border） 是用来控制元素外观和布局的重要属性。它们决定了元素之间的距离、元素的外观以及元素在页面中的布局方式。

 1. 边距设置（Margin）