CSS的盒模型 1

WEI_Gaot
131 阅读4分钟

核心概念

CSS 盒模型是 CSS 布局的基础。它规定了 HTML 元素在页面上如何被渲染成一个矩形的盒子。这个盒子由四个主要部分组成，从内到外分别是：

  1. 内容区域 (Content Area):

    • 这是盒子的最内部，用来显示元素的实际内容，比如文本、图片或其他嵌套的 HTML 元素。
    • 它的尺寸由 CSS 属性 width 和 height 控制（但这会受到 box-sizing 属性的影响，后面会讲）。

  2. 内边距 (Padding):

    • 包围在内容区域之外的透明空间。
    • 用来在内容和边框之间创建一些空白区域。
    • 可以通过 padding-top, padding-right, padding-bottom, padding-left 或简写属性 padding 来设置。
    • 内边距会受到元素背景颜色或背景图片的影响。

  3. 边框 (Border):

    • 包围在内边距之外的线条。
    • 它是内容和内边距与外边距之间的边界。
    • 可以通过 border-width, border-style, border-color 或简写属性 border 来设置。
    • 边框有自己的厚度，会占据空间。

  4. 外边距 (Margin):

    • 盒子最外层的透明空间。
    • 用来在当前元素与其他元素之间创建空白区域，控制元素间的距离。
    • 可以通过 margin-top, margin-right, margin-bottom, margin-left 或简写属性 margin 来设置。
    • 外边距总是透明的。
    • 重要特性：外边距合并 (Margin Collapsing) ：在垂直方向上，相邻的块级元素（非 BFC 或 Flex/Grid item）的外边距可能会合并（取两者中较大的值），而不是简单相加。

图示:

1.png

2.png

关键属性：box-sizing

box-sizing 属性决定了元素的 width 和 height 属性如何计算盒子的总宽度和总高度。这是理解盒模型行为方式的 关键。

  1. box-sizing: content-box; (默认值)

    • 这是 W3C 标准的盒模型。
    • 你设置的 width 和 height 只应用于内容区域 (Content Area) 。
    • 元素的 实际渲染宽度 = width + padding-left + padding-right + border-left-width + border-right-width。
    • 元素的 实际渲染高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width。
    • 问题： 这意味着如果你给一个 width: 100px; 的元素添加 padding: 10px; 和 border: 1px solid black;，它实际占据的宽度将是 100px + (10px * 2) + (1px * 2) = 122px。这在布局时常常不直观，因为元素的总尺寸会随着内边距和边框的增加而变大。

  2. box-sizing: border-box;

    • 这是更直观、现在更常用的盒模型（有时被称为 IE 盒模型或怪异盒模型）。

    • 你设置的 width 和 height 包含了内容区域、内边距和边框。也就是说，width 和 height 定义的是 边框盒子 (Border Box) 的尺寸。

    • 元素的 实际渲染宽度 = 你设置的 width 值。

    • 元素的 实际渲染高度 = 你设置的 height 值。

    • 内容区域的尺寸会相应地被压缩，计算方式是：

      • 内容宽度 = width - padding-left - padding-right - border-left-width - border-right-width
      • 内容高度 = height - padding-top - padding-bottom - border-top-width - border-bottom-width

    • 优点： 布局更加可预测。如果你设置一个元素的宽度为 200px，无论你添加多少内边距或边框，它在布局中占据的总宽度始终是 200px（外边距仍然在外部计算）。

最佳实践:

现在普遍的最佳实践是在 CSS 的开头设置全局的 box-sizing: border-box;：

*,
*::before,
*::after {
  box-sizing: border-box;
}

这使得整个项目的布局更加一致和容易管理。

块级元素 vs. 行内元素

  • 块级元素 (Block-level elements) ，如 <div>, <p>, <h1>-<h6>, <ul>, <li> 等，默认会应用完整的盒模型，可以设置 width, height, 以及所有方向的 padding, border, margin。它们通常会独占一行。

  • 行内元素 (Inline elements) ，如 <span>, <a>, <img>, <strong>, <em> 等，盒模型的应用有所不同：

  • width 和 height 属性通常会被忽略。

  • 水平方向 的 padding, border, margin 会生效并影响周围元素。

  • 垂直方向 的 padding, border, margin 可能会在视觉上生效（例如，背景会扩展），但通常 不会 把其他行内元素推开，可能会与其他行发生重叠。

可以通过设置 display: inline-block; 或 display: block; 来改变元素的默认盒模型行为。

总结:

CSS 盒模型是理解元素如何在页面上占据空间和与其他元素交互的基础。掌握内容、内边距、边框、外边距这四个部分，并深刻理解 box-sizing 属性（尤其是 border-box）的作用，对于编写健壮、可预测的 CSS 布局至关重要。

avatar
文章
阅读
粉丝