作者选择了 多样性在技术基金作为 写给捐款计划的一部分接受捐款。
介绍
box model 是浏览器用来确定元素的大小以及它如何与其他元素相互作用的规则集。HTML元素的内容以及多个CSS属性,都为浏览器使用的计算做出贡献,将HTML和CSS代码转化为最终的,渲染的网页。知道框模型是如何工作的,以及如何有效地操纵它,可以成为一个不必要的横向滚动和内容之间额外空间的网页之间的区别。
<$>[note]
**注:**大多数HTML元素属于两个类别中的一个,一个 _inline_或一个 block。一个<span>元素是一个通用的线性元素,因为它与文本内容保持一致。
请注意,对显示属性的更改可能导致框模型以超出本教程的目标的方式运作的变化,特别是在使用表、Flexbox 和 CSS 网格时。
在本教程中,您将使用边界,边界,宽度和高度属性,这些属性是盒子模型使用的主要属性,您还将使用盒子大小属性来了解如何更改盒子模型。
前提条件
- 将 HTML 文件存储在您的本地计算机上作为 index.html,您可以从所选的文本编辑器和网页浏览器访问。 要开始,请查看我们的 How To Set Up Your HTML Project]教程,然后按照 How To Use and Understand HTML Elements的说明,了解如何在浏览器中查看您的 HTML。 如果您是新的 HTML,请尝试 How To Build A Website in HTML系列
- 熟悉您的浏览器的开发工具。 本教程将使用 Firefox 开发工具。
设置HTML和开发工具
在本节中,您将为整个教程设置HTML基础,您还将访问您的浏览器的开发工具,并开始使用它们来帮助识别构成框模型的属性。
要开始,请在文本编辑器中打开index.html,并将以下HTML添加到文件中:
1[label index.html]
2<!doctype html>
3<html>
4 <head>
5 <title>Box Model</title>
6 <link href="styles.css" rel="stylesheet" />
7 </head>
8 <body>
9 </body>
10</html>
HTML 包含在 标签中引用一个 styles.css 文件. 继续创建该文件;您将在下一节开始编辑。
接下来,您将需要内容来应用风格,并开始使用框模型。在下一个代码块中,在<body>标签中添加突出代码。在整个教程中将使用突出代码来识别代码的更改和补充。
1[label index.html]
2...
3<body>
4 <div>
5 Alice had begun to think that very few things indeed were really impossible.
6 </div>
7
8 <div>
9 "Begin at the beginning," the King said gravely, "and go on till you come to the end: then stop."
10 </div>
11</body>
12...
接下来,在您所选择的浏览器中打开index.html并打开浏览器的开发工具. 通常可以通过右键单击页面并选择Inspect**或Inspect Element**来完成此操作。 打开开发工具后,检查第一个<div>元素。 在 Firefox 和 Chrome 中,将可见框模型的视觉图表。 以下是您在 Firefox 开发工具中发现的:
仔细观察Firefox的框模型可视化,构成框模型的属性从中间向外显示为宽度,高度,粘贴,边界和边界。这些五个属性构成框模型,并提供元素的维度特性。
在本节中,您为教程设置了您的HTML,打开了浏览器的开发工具,并访问了框模型可视化指南. 在下一节中,您将开始为边界属性写CSS,这将为您的<div>元素提供一个开始的框模型的视觉风格。
使用边界属性来可视化容器
现在你已经设置了 HTML,你将开始应用框模型的属性,从边界属性开始. 在本节中,你将使用边界属性来创建<div>元素的视觉概述,并看到该属性如何影响框模型。
该边界属性被称为短手属性,因为它是三个不同的属性的组合:边界宽度,边界风格和边界颜色。
边境宽度、边境风格和边境颜色也作为其边境顶部、边境右边、边境底部和边境左边对象的缩写,并将风格按时应用从上到右边,然后是底部,最后是左边。
在文本编辑器中打开styles.css,为div元素写一个类型选择器,并添加border属性。对于该值,顺序并不关键,尽管常见的排序往往是宽度、风格和颜色。考虑到这一点,将border属性的值设置为1px solid red:
1[label styles.css]
2div {
3 border: 1px solid red;
4}
将您的更改保存到styles.css,然后在浏览器中打开index.html。div>元素的内容将被框架周围的薄红线紧密包裹起来。在两个文本行之间,将有一个更厚的边界。这发生在两个不同的元素的边界被设置在一起时,使边界的视觉大小翻了一番。在您的浏览器中,这些变化将看起来像这样:
在浏览器中打开index.html,回到浏览器开发工具,检查两个<div>元素之一。在开发工具中返回显示元素的框模型的视图。在最内在的框中是元素的宽度和高度,然后是垫子,最后是边界,在其框的每个侧都有1。 参见Firefox开发工具的下面的图像:
随着Firefox窗口设置为986px宽,框模型图表的内部框的宽度为968 by 19,但接着图表是另一个值,即970 by 21. 这是 _computed_宽度和高度,这是浏览器渲染的最终像素大小,将高度,宽度,边界和粘贴属性值相结合。
在本节中,您在div>元素上创建了一个边界,并看到这个属性如何影响这些元素的计算尺寸。
使用粘贴属性创建容器内部空间
您在上一节中使用边界属性的工作给了框架的视觉界限,但它非常接近文本,接下来您将使用贴属性在框架内部添加空间,在文本和框架边界之间提供空间。
与边界属性类似,padding属性也是一种短语属性,但padding仅限于侧面,如padding-bottom属性。当使用单个值时,将适用于所有侧面,例如,padding: 20px;适用于所有侧面的20px叠加。当使用两种值时,第一个值适用于顶部和底部侧面,而第二个值适用于左侧和右侧。例如,以下padding: 20px 40px;将适用于盒子顶部和底部的20px叠加,而40px叠加是左侧和右侧的。
在文本编辑器中打开你的styles.css文件,然后在边界属性之后,添加一个具有30px 60px值的padding属性。
1[label styles.css]
2div {
3 border: 1px solid red;
4 padding: 30px 60px;
5}
将最新的更改保存到您的 styles.css 文件中,然后返回您的浏览器中的 index.html 文件,并更新页面. 两个元素的身高增加了,红色框内的文本的位置已向右转移,在文本下方有额外的空间。
再次,返回浏览器开发工具,检查两个框之一. 盒子模型图现在显示一个 30 在顶部和底部和一个 60 在盒子的左边和右边。
您通过在div>元素上使用padding属性来扩展框架模型的复杂性,以便在边界和文本之间提供视觉空间。在您的浏览器开发工具中的框架模型视觉指南展示了这些变化及其对显示的维度值的影响。
使用宽度和高度属性来限制维度宽度
本节将专注于使用定义的宽度和高度属性值来强制对div>元素的尺寸,以及这些属性在框模型中如何处理。本节将使用宽度和高度值的像素单位,通常被称为固定尺寸,以及被称为流体尺寸的百分比单位。与前两种属性不同,宽度和高度不是短语。这些应用定义的值。然而,用CSS设置尺寸值会导致一个可疑的效果,可以追溯到语言的早期规范。
要尝试这个框模型的方面,回到文本编辑器中的styles.css文件,并添加一个值为250px的宽度属性:
1[label styles.css]
2div {
3 ...
4 width: 250px;
5}
将您的更改保存到styles.css,切换到您的浏览器,并更新index.html。当页面重新加载时,内容将更窄,并被包装成多个文本行。
打开浏览器开发工具,检查两个<div>元素中的一个。中间的盒子是由宽度属性定义的值250 by 57。然而,正如Firefox框模型图表所示,元素的完整宽度不是250,而是372。
计算的宽度是由宽度决定的,它定义了内容的宽度,然后是右侧和左侧的粘贴值的大小,然后是右侧和左侧的边界宽度值。
使用一个固定的像素值为宽度,使用流体百分比为100%的宽度. 默认情况下,一个<div>元素扩展了整个宽度,但在扩展默认的全宽度和有声明的宽度值为100%之间存在差异:在你的styles.css中,将250px更改为100%:
1[label styles.css]
2div {
3 ...
4 width: 100%;
5}
保存styles.css文件并在浏览器中更新index.html。<div>元素现在扩展到视图端边缘,无论窗口大小如何。发生的事情与250变成372相同:元素的完整宽度现在是可用的宽度的100%,加上使用padding和border值创建的122像素。
返回你的styles.css文件,并开始返回宽度值为250px。接下来,添加一个高度属性,并添加一个您知道的值将小于内容的高度。
1[label styles.css]
2div {
3 ...
4 width: 250px;
5 height: 40px;
6}
将这些更改保存到styles.css文件,并在浏览器中更新index.html。 插件现在会显示在底部更小,而实际上浏览器正在出现一个困境:高度明确设置,但内容大于容器。
随着浏览器开发工具打开,检查其中一个<div>元素,元素将在渲染视图中突出显示。向框模型图表的padding区域倾斜,以突出元素的padding区域。
在内容可以变长的情况下,最好避免定义的高度值,而不是让内容的自然高度决定高度。
在这种情况下,最好完全删除高度属性。在文本编辑器中返回styles.css,从文件中删除高度属性及其值,并保存您的更改。
1[label styles.css]
2div {
3 border: solid red 1px;
4 padding: 30px 60px;
5 width: 250px;
6}
在本节中,您将宽度和高度属性应用于div>元素中。您发现高度属性是如何难以实现的,因为网页内容的流动性质。 最后,您了解了这些维度属性如何应用于一个元素之前的粘贴属性,导致一个比预期更大的维度。
使用边缘属性来创建容器外的空间
在下一节中,您将使用边缘属性应用边界外的间隔,以提供其他框之间的间隔。边缘属性与边缘属性相似,具有相同的长和短的属性变异。
首先,在文本编辑器中打开styles.css,向div类型选择器添加一个边缘属性,并给出一个值为20px。
1[label styles.css]
2div {
3 ...
4 margin: 20px;
5}
将您的更改保存到 styles.css,然后打开您的浏览器并加载或更新您的 index.html 文件. 您将发现容器已向右移动20像素。
看看浏览器中的两个div元素之间的间隔,这些元素之间的间隔是20px而不是40px,尽管第一个div的底部有边界,第二个div的顶部有边界。这是由于边界属性的一个特征,其中邻近的容器重叠其边界属性,从更大的边界中取值。这可能起初没有意义,但可能有助于将盒子模型作为描述物理对象,然后定义你想要在每个对象周围的空间。
由于最大的边缘值被视为外部间隔值,请更改属性的值,以便顶部和底部是不同的. 您可以通过确保列表中的第一个和第三个值是不同的,或者使用边缘顶部和边缘底部属性来做到这一点。
1[label styles.css]
2div {
3 ...
4 margin: 20px 20px 60px;
5}
短语列表中的第一个值为边缘定义了顶部值,第二个值定义了右边和左边值,第三个值定义了底部值. 将您的更改保存到styles.css,并在浏览器中更新index.html。
现在,用浏览器开发工具检查两个<div>元素之一,与所有其他属性不同,边缘值不会改变容器的计算高度或宽度:
该边缘属性具有两个特殊的特性,而边缘没有。第一,边缘接受负值,这意味着它可以更接近邻近的元素,并导致它们重叠。此外,该边缘属性接受一个自动的值,可用于中心内容。
回到文本编辑器中的styles.css文件,并将边缘属性的第二个值从20px更改为auto:
1[label styles.css]
2div {
3 ...
4 margin: 20px auto 60px;
5}
将此更改保存到styles.css,并在浏览器中重新加载index.html。
您在本节中使用了边缘属性来添加div元素中的报价之间的空间。您更改了边缘来显示它是如何重叠和转移到最大的邻近值。 此外,您将边缘左和边缘右属性的值设置为自动,其中集中了容器。 在最后一节中,您将使用盒尺寸属性来改变框模型的行为和属性之间的关系。
使用盒子大小的属性来改变盒子模型行为
在本节中,您将使用盒子大小属性,这允许盒子模型改变其表达方式。随着您与盒子模型的工作,宽度,高度,板块和边界属性对盒子模型的总体尺寸做出贡献。现在使用盒子大小属性,您将能够通过浏览器计算的板块和边界,以执行设置为宽度和高度值的值。
到目前为止,您已经使用了盒子大小属性的默认状态,该属性是内容箱。内容箱模型通过添加宽度,padding-right,padding-left,border-right-width和border-bottom-width来确定内容箱的最终计算宽度值来确定宽度大小。同样,内容箱也通过添加高度,padding-top,padding-bottom,border-top-width和border-bottom-width来找到内容箱的最终计算宽度。正如前面讨论的那样,这会导致一个比预期更大的盒子来破坏布局和设计。
对盒子大小属性的内容盒值的替代方法是边缘箱。而不是将边缘和边缘属性添加到声明的宽度和高度值中,以获得计算值,它将值减去,这意味着具有边缘箱模型的框的宽度是宽度属性,减去左和右边缘宽度值和左和右边缘宽度值的总和。
在文本编辑器中打开styles.css,并在div类型选择器中添加一个具有border-box值的盒子大小属性:
1[label styles.css]
2div {
3 ...
4 box-sizing: border-box;
5}
现在,容器的大小会更小,因为浏览器现在正在缩小框模型的宽度,以便计算的宽度宽度,粘贴和边界不超过CSS文件中定义的宽度值。
在Firefox开发工具中,宽度被定义为128px,尽管styles.css中的宽度属性有250px的值。元素的计算值是250px,计算通过从右侧添加128px加上60px,从左侧添加60px,从右边宽度添加1px,从左边宽度添加250px。
可以通过使用通用选择器(*)更改网页的所有元素的盒尺寸属性,也称为星级选择器。这个选择器将风格应用到页面上的所有元素中。
打开styles.css并从div类型选择器中删除box-sizing属性,然后在div选择器前添加一个通用选择器,一个设置为border-box的box-sizing属性:
1[label styles.css]
2* {
3 box-sizing: border-box;
4}
5...
将这些更改保存到styles.css并重新加载到index.html。您将不会从视觉上看到任何区别。
在本节中,您使用盒子大小属性来改变盒子模型与边缘框值的行为方式,从而创建一个更全面的方式来使用盒子模型。
结论
盒子模型是必要的,以了解风格如何应用于元素,以及风格如何影响内容的流动。在本教程中,你学会了如何使用边界,板块,边界,高度和宽度属性,以及它们如何在盒子模型中相互关联。你使用了盒子大小属性的默认盒子模型,这将有助于你规划和调试样式情况。此外,你了解了边界盒值,它改变了盒子模型的功能,并允许与盒子模型更直观地工作。请记住,倾斜到浏览器的默认值有助于保持良好的性能,所以改变盒子模型应该按照需要而不是普遍地进行。
如果您想阅读更多 CSS 教程,请尝试 How To Style HTML with CSS series中的其他教程。