CSS 播客 - 001:盒模型
假设您有以下这段 HTML 代码:
<p>I am a paragraph of text that has a few words in it.</p>
然后,为它编写以下 CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
内容最终的宽度为 142 像素,而非您指定的 100 像素, 元素会失去响应这是为什么?
盒子模型是 CSS 的核心基础。了解 Box 模型是如何构建的 它如何受 CSS 其他方面的影响 如何控制数据,可帮助您编写更可预测的 CSS。
请务必注意,CSS 显示的所有内容都是一个方框,即使
只是一些文本,或者有一个 border-radius
使其看起来像一个圆形。
内容和大小
Box 的 display
值及其集合具有不同的行为
尺寸及其包含的内容该内容可能是纯文本,也可能是
子元素生成的更多框。无论哪种情况,内容都会影响
默认处于启用状态
您可以使用外部大小调整来控制此设置,也可以使用固有大小进行控制 让浏览器根据内容大小做出决定。
以下基本演示可说明不同之处:
演示中有“CSS is awesome”字样在一个具有固定尺寸的盒子里
粗边框由于该框有指定宽度,因此会调整其尺寸。
这意味着,它可以控制其子内容的尺寸。不过,
“棒极了”对框而言过大,因此溢出了父框的
边框(稍后会对此进行详细介绍)。防止这种溢出的一种方法是
可以通过不设置宽度或在本例中
将 width
设为 min-content
。min-content
关键字用于指示该框
宽度只等于其内容的固有最小宽度(即单词
“很棒”)。这样,文本框就能完美地围绕在文本周围。
下面是一个更复杂的示例,展示了不同尺寸对真实客户的影响 内容:
开启和关闭固有大小,了解外部大小如何为您提供更多好处 通过外在尺寸和固有尺寸进行控制可让内容 控制。要查看具体效果,请在卡片中添加几句文字。 如果此元素有外部尺寸,则您对 可以在溢出之前添加,但当固有大小 。
默认情况下,此元素有一组 width
和 height
,每个值均为 400px
。
这些尺寸严格限定了元素内的所有内容,
除非内容过大,否则不会保存在该框中。您可以看到这一操作的实际效果
将花朵图片下面的图片说明改为
框的高度。
关键词:当内容太大,并不适合放入其中的盒子时,就会出现溢出。您可以
使用 overflow
属性管理元素处理溢出内容的方式。
切换为固有尺寸可让浏览器根据以下因素为您做出决策: 框的内容大小。这会大大降低溢出的可能性,因为 根据其内容调整大小。
请务必注意,固有大小是浏览器的默认大小 行为,并且通常比外在大小调整提供更大的灵活性。
盒模型的区域
框由多个不同的框模型区域组成,每个区域都执行特定任务。
<ph type="x-smartling-placeholder">内容框是内容所在的区域。内容 可控制其父项的尺寸,因此该区域通常是大小变化最大的区域。
内边距框是围绕内容框的
padding
属性。
由于内边距位于框内,因此框的背景在空间中可见
资源。
如果框中设置了溢出规则,例如 overflow: auto
或
overflow: scroll
,滚动条也会占用此空间。
边框会环绕边框,其空间由
border
值,
用于为元素创建一个视觉框架。元素的边框
看的有限。
最后一个区域是外边距框,也就是框周围的空间,由
margin
规则。媒体资源,例如
outline
和
box-shadow
会占据该空间,因为它们绘制在元素的上层,
影响框的大小。正在更改您盒子的outline-width
(共 200px
)
框不会改变边框边缘内的任何内容。
实用的类比
框模型理解起来很复杂,因此我们用这里的比喻 模型。
<ph type="x-smartling-placeholder">在此图中,你有三个相框相邻地装在 效果。框架图像的元素与方框模型相对应,如下所示:
- 内容框是艺术作品。
- 衬垫盒是位于画框和艺术作品之间的白色安装板。
- 边框是边框,可为图片提供文字边框。
- 外边距框是指帧之间的空间。
- 阴影占据的空间与外边距框相同。
调试 Box 模型
浏览器开发者工具直观呈现了所选框的框模型 这有助于您了解框模型的工作原理 会影响您制作的网站
在您的浏览器中尝试以下操作:
。 <ph type="x-smartling-placeholder">控制 Box 模型
要了解如何控制框模型,首先需要了解 是在浏览器中进行的
每个浏览器都会将用户代理样式表应用到定义 元素在未定义 CSS 的情况下应具有的外观和行为。采用 Google Cloud 技术的 CSS 用户代理样式表因浏览器而异,但它们可提供 默认设置为便于阅读内容。
用户代理样式表有一个属性用于设置框的默认 display
。对于
例如,在普通流中,<div>
元素的默认 display
值为
block
,<li>
的默认 display
值为 list-item
,并且 <span>
默认 display
值为 inline
。
inline
元素设有块外边距,但其他元素不遵循此限制条件。
使用 inline-block
时,其他元素遵循块外边距,但第一个
元素保留了其与 inline
元素相同的大部分行为。
默认情况下,block
项会填充可用的内嵌空间,而
inline
和 inline-block
元素的大小与其内容大小相同。
用户代理样式表还设置了 box-sizing
,告知框如何
计算它的盒子大小。默认情况下,所有元素都具有以下用户代理
样式:box-sizing: content-box;
。也就是说,如果您将维度设置为
为 width
和 height
,这些尺寸适用于内容框。如果您
然后设置 padding
和 border
,这些值会添加到内容框的
。
检查您的理解情况
测试您对盒子模型大小影响属性的知识的了解。
.my-box { width: 200px; border: 10px solid; padding: 20px; }
您认为.my-box
的宽度是多少?
此框的实际宽度为 260 像素。
由于 CSS 使用默认 box-sizing: content-box
,因此应用的宽度为
内容的宽度,并将两侧的 padding
和 border
添加到
这一点。内容宽度为 200 像素 + 内边距为 40 像素 + 边框大小为 20 像素
可见宽度为 260 像素
您可以通过指定 border-box
大小来更改此设置:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
此备用框模型会告知 CSS 将 width
应用于边框框
而不是内容框。这意味着,我们的 border
和 padding
会
推送入,所以当您将 .my-box
设置为 200px
宽度时,它实际上会呈现
宽度为 200px
。
请观看以下互动式演示,了解其工作原理。切换
box-sizing
值,蓝色区域表示当前在
方框。
*,
*::before,
*::after {
box-sizing: border-box;
}
此 CSS 规则会选择文档中的每个元素
以及每个 ::before
和 ::after
伪元素,并应用 box-sizing: border-box
。
这意味着,每个元素现在都使用此备用框模型。
由于替代框模型的预测性更高,因此开发者通常会添加 重置和标准化规则,就像这个一样。