CSS 盒 模型

冒着重复自己的风险：**网页设计中的每个元素都是一个矩形框。** 这是我的 顿悟时刻，它帮助我真正开始理解基于 CSS 的网页设计并实现我想要的布局。我们已经 讨论过这些框的位置 一点，以及 关于它们的行为。

我们没有过多讨论的是盒子本身。盒子的尺寸究竟是如何计算的？
这是一个图表

如果您是 Firebug 用户，您可能习惯了这样的图表，它可以很好地向您展示影响页面上任何框的数字

请注意，在两个示例中，外边距都是白色的。外边距的独特之处在于它本身并不影响盒子的大小，但它会影响与盒子交互的*其他*内容，因此是 CSS 盒模型的重要组成部分。

盒子本身的大小是这样计算的

宽度	width + padding-left + padding-right + border-left + border-right
高度	height + padding-top + padding-bottom + border-top + border-bottom

如果这些值未声明怎么办？

如果未声明内边距或边框，则它们要么为零（如果您使用的是 css 重置），要么为浏览器默认值（可能*不是*零，尤其是在通常不会重置的表单元素上）。

如果未声明框的宽度（并且该框是块级元素），事情会变得有点奇怪。让我们先从这开始，然后再继续了解一些关于盒模型的其他好东西。

块级盒子的默认宽度

如果您未声明宽度，并且该框具有静态或相对定位，则宽度将保持 100%，并且内边距和边框将向内而不是向外推。但是，如果您*明确设置*框的宽度为 100%，则内边距将像往常一样向外推动框。

这里的教训是，盒子的默认宽度实际上不是 100%，而是一个不太明显的*“剩下的任何东西”*。这一点尤其重要，因为在很多情况下，*设置*或*不设置*宽度都非常有用。

我总是发现这方面最大的问题是 textarea 元素，它们非常需要设置宽度来对抗必需的“cols”属性，并且不能有子元素。因此，您通常需要将 textarea 显式设置为 100%，但也需要内边距，这会使其太大而无法容纳。在静态宽度环境中，我们经常求助于适合的像素宽度，但在流体宽度环境中就没有这种运气了。

没有宽度的绝对定位盒子

未设置宽度的绝对定位盒子的行为有点奇怪。它们的宽度仅与其容纳内容所需的宽度一样宽。因此，如果该框包含一个单词，则该框的宽度仅与该单词呈现的宽度一样宽。如果它增长到两个单词，它就会增长到那么宽。

这种情况应持续到该框的宽度达到其父级宽度（最近具有相对定位的父级或浏览器窗口）的 100%，然后开始换行。盒子垂直扩展以容纳内容感觉自然而然，但当它水平发生时，感觉很奇怪。这种奇怪的感觉是有道理的，因为不同浏览器处理此问题的方式存在很多怪癖，更不用说文本在不同平台上的渲染方式不同了。

没有宽度的浮动盒子

没有宽度的浮动元素也表现出完全相同的行为。盒子的宽度仅与其容纳内容所需的宽度一样宽，最大可达其父元素的宽度（不需要相对定位）。由于这些无宽度盒子的脆弱性，这里要吸取的教训是不要在关键任务场景中依赖它们，例如在整体页面布局中。如果您浮动一个列用作侧边栏并依靠内部的某个元素（例如图像）来保持其宽度，那么您就是在自找麻烦。

内联元素也是盒子

我们在这里一直将盒子作为块级元素来关注。很容易将块级元素视为盒子，但内联元素也是盒子。可以将它们视为非常非常长且细的矩形，它们恰好在每一行换行。它们能够像任何其他盒子一样具有外边距、内边距、边框。

换行是它令人困惑的地方。如上所示的左外边距会按预期将盒子向右推，但仅限于第一行，因为那是盒子的开头。内边距按预期应用于文本的上方和下方，并且当它换行时，它会忽略其内边距上方的行，并从行高指示它应该开始的地方开始。背景应用了透明度，以便更清楚地了解其工作原理。

亲眼看看

想看看构成页面的每个“盒子”吗？尝试将此临时添加到样式表中

* {
   outline: 1px solid red !important;
}