管理CSS框模型

CSS 盒模型：理解网页布局的关键

理解 CSS 最重要的点在于：一切皆为盒子。更具体地说，文档中的每个元素都会生成一个盒子。这个盒子可以是块级盒子，也可以是内联级盒子。盒子的类型决定了元素如何影响页面布局。CSS 盒模型是一个用于描述 HTML 元素布局和大小的概念。每个元素都包含一个用于其内容、填充、边框和边距的盒子。这些盒子组合在一起，决定了元素内容的布局以及相邻元素如何与其并排显示：

元素是否创建盒子以及创建哪种类型的盒子将取决于标记语言。CSS 发展成为一种为 HTML 文档设置样式的方式，因此，许多 CSS 可视化渲染模型都源于 HTML 区分块级元素和内联元素。默认情况下，诸如 <code><p></p> 和 <section></section> 之类的元素会创建块级盒子，但 <a></a>、<span></span> 和 <em></em> 会创建内联盒子。另一方面，SVG 不使用盒模型，因此大多数与布局相关的 CSS 属性都不能与 SVG 一起使用。

块级盒子会创建新的内容块，如图 4.1 所示。块级盒子的渲染是垂直的，根据其源顺序排列，并且（除了表格之外）会扩展以填充其包含元素的可用宽度。这被称为普通流。块级盒子的 display 值为 block、list-item、table 或任何 table-* 值（例如，table-cell）。

图 4.1. 包含元素（灰色区域）内的 h1、p、ul 和 table 元素的块级盒子

相比之下，内联级盒子不会形成新的内容块。相反，这些盒子构成块级盒子内的行。它们水平显示并填充包含盒子的宽度，如果需要，会换行，如图 4.2 所示。内联级盒子的 display 值为 inline、inline-block、inline-table 或 ruby。

图 4.2. 应用了 margin: 1em 和 padding: 5px 的内联盒子的示例

但是盒子的尺寸是如何计算的呢？这就是事情变得更复杂的地方。如图 4.3 所示，盒子尺寸是盒子内容区域、填充宽度和边框宽度的总和。边距宽度为元素创建边距盒子，并影响文档中的其他元素；但是，边距宽度对盒子本身的尺寸没有影响。

图 4.3. CSS 2.1 盒模型

例如，一个具有 width: 300px、padding: 20px 和 border: 10px 的 <code><p></p> 元素的计算宽度为 360 像素。这是其宽度、左右填充和左右边框宽度属性的总和。要创建一个宽度为 300 像素、填充为 20 像素和边框为 10 像素的元素，宽度需要设置为 240px。大多数主流浏览器就是这样计算宽度的。为了解决浏览器之间竞争模型的部分问题，CSS 工作组引入了 box-sizing 属性。它允许我们选择自己喜欢的盒模型实现，并在处理响应式设计时大大简化计算。

使用 box-sizing 选择盒模型

box-sizing 属性在 CSS 基本用户界面模块级别 3 规范中定义。它有两个可能的值：content-box 和 border-box。最初，box-sizing 的值为 content-box。使用此值时，设置元素的 width 和 height 属性会影响其内容区域的大小。这与 CSS 2.1 规范中定义的行为相匹配，并且是现代浏览器中的默认行为（如图 4.4 所示）。将 box-sizing 的值设置为 border-box 会产生一些神奇的效果。现在，width 和 height 的值将应用于外边框边缘而不是内容区域。边框和填充绘制在元素框内，与旧的 Internet Explorer 5.5 行为匹配。让我们来看一个混合使用百分比宽度和 px 单位的填充和边框的示例：

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

我们的 <article></article> 和 <aside></aside> 元素都应用了以下 CSS，这为我们提供了图 4.5 中所示的布局，其中第一个元素的宽度为 60%，第二个元素的宽度为 40%：

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

图 4.5. 元素使用 box-sizing: content-box

默认情况下，<aside></aside> 和 <article></article> 的 box-sizing 值都为 content-box。border-width 和 padding 值会为每个元素的宽度增加 40 像素，这会大大影响 60%/40% 的分割。现在让我们将 box-sizing: border-box 添加到 <article></article> 和 <aside></aside> 元素：

article, aside {
  box-sizing: border-box;
}

您可以在图 4.6 中看到变化：元素具有相同的宽度，但 box-sizing: border-box 意味着宽度包括边框和填充。因为 width 属性应用于边框边缘而不是内容区域，所以我们的元素现在并排排列。

图 4.6. 元素使用 box-sizing: border-box

我建议您在项目中使用 box-sizing: border-box。它使生活更轻松，因为无需计算宽度值来考虑填充和边框的值，并且盒子行为更可预测。应用 box-sizing: border-box 的最佳方法是使用重置规则。以下示例来自 Chris Coyier 的 CSS-Tricks 文章“继承 box-sizing 可能略微更好——最佳实践”：

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

这默认情况下将 border-box 大小应用于每个元素，而不会影响项目现有部分的 box-sizing 行为。如果您知道不会有依赖于 content-box 行为的第三方或旧版组件，则可以简化这些规则：

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

管理盒模型只是理解如何创建复杂布局的一个要素。

关于 CSS 盒模型的常见问题解答 (FAQ)

(此处省略 FAQ 部分，因为篇幅过长，且与伪原创目标不符。FAQ 部分内容可以根据需要自行添加或修改。)

以上是管理CSS框模型的详细内容。更多信息请关注PHP中文网其他相关文章！