理解CSS Box模型的六个问题

介绍

盒子模型是CSS中使许多新前端开发人员感到困惑的概念之一。 它的许多含义对我来说都是模糊的。 因此,本文旨在尝试更多地了解该概念,并帮助其他人更好地了解盒子模型。

在本文中,我们将探讨以下六个问题:

  1. 盒子型号是什么?
  2. 盒子的主要属性是什么?
  3. 箱子的主要类型是什么?
  4. 如何计算盒子的尺寸?
  5. 在什么情况下利润会崩溃?
  6. 当内容溢出时。

1.什么是盒子模型?

CSS框模型是一组规则,这些规则定义了如何呈现网页中的每个元素。 根据盒子模型,页面中的每个元素都是一个矩形框,至少具有内容,宽度和高度。

根据CSS框模型,网页中的每个元素都是一个矩形框。 内容位于中间,周围是可选元素,例如填充,边框和边距。 盒子模型有五个主要部分/属性,它们决定盒子的大小。 这些属性是宽度,高度,填充,边框和边距。

除了宽度,高度以外,其他属性是可选的。 意味着我们可以有一个没有填充,没有边框和没有边距的盒子。 在下一节中,我们将详细介绍此框的不同部分。

2.盒子的主要特性是什么?

我们将从创建一个基本的html文件开始,其中包含一段虚拟文本。 我们将此文件称为index.html 。 我们将使用方括号作为文本编辑器。 出于样式目的,让我们创建一个外部CSS文件并将其命名为main.css

我们为段落定义宽度,高度,填充,边框和边距。 我们可以使用Chrome开发者工具在浏览器中可视化盒子模型的图示。

下图是框的实际表示。 由于方括号,页边距突出显示。

下面,我们有相同的图像,没有任何突出显示。

盒子通常具有五个主要部分,包括宽度,高度,填充,边框和边距。 无论是否设置宽度和高度都是强制性的。 填充,边框和边距是可选的。

内容,宽度和高度

在每个盒子中,都有核心内容。 内容可以是文本,图像,视频,音频等。宽度,高度,填充,边框和边距适用于该内容。 每个html元素都有一个基于两个因素的默认宽度:该元素是嵌入式元素还是块元素。 很少为元素设置高度。 通常,默认使用内容的高度。

填充

填充是围绕内容的空间,将其与边界分隔开。 它采用内容的背景色。 padding CSS属性是padding-top,padding-right,padding-bottom和padding-left的简写。 它定义了内容和边框之间的空间大小,如果未设置边框(例如,不存在),则定义空白。 我们可以将填充应用于任何HTML元素。 但是,它永远不会有负值。

  p { 
内边距:50px;
}

边境

边框是围绕内容和填充的线,并将其与边距分隔开。 默认情况下,它设置为零,并且不可见。 border属性适用于框的四个侧面:顶部,底部,左侧和右侧。 除非我们指定颜色,否则它将采用元素的颜色。

p {padding:50px; 边框:15像素蓝色;}

  p { 
内边距:50px;
边框:15像素蓝色;
}

余量

保证金通常是元素周围的多余空白。 像填充和边框一样,margin是可选的,其默认值设置为零。 在这种情况下,它是不可见的。 开发人员通常使用边距来分隔不同的框。 默认情况下,现代浏览器使用它来例如在段落之间插入换行符。

重要的是要注意,空白是分隔空格的外部空间。 因此,在确定元素的宽度或高度时不考虑这一点。

边距具有四个属性:上边距,右边距右边,底部边距和左边距。 这些属性的简写是margin属性。

保证金始终是透明的。 意思是,它采用了父元素的背景。 在上图中,父元素的背景色是ANTIQUEWHITE,页边距的背景也是如此。 我们突出显示了边距区域,以帮助您设想其大小。

3.盒子的主要类型是什么?

在深入探讨Box模型细节之前,有必要区分在处理HTML和CSS时可能遇到的主要Box类型。 尽管可以有各种各样的框和子框,但主要有两种类型:嵌入式框或块框。 内联框可以是不可替换或替换的元素。

内联盒

内联框的布局从左到右,通常没有施加任何宽度或高度。 与其他类型的框不同,嵌入式框不会填充其父级宽度的百分之一百。 它的宽度是其元素内容的宽度(例如,文本)。

同样,两个或多个内联元素将彼此紧贴,而不会出现换行符。 众所周知的内联CSS属性包括“ a”,“ em”,“ strong”,“ span”,“ q”,“ textarea”等。

内联元素有两种类型:替换元素和非替换元素。 我们将在下面探讨这两个概念。

  • 内联替换元素

W3C将替换的元素定义为:

内容超出CSS格式模型范围的元素,例如图像,嵌入式文档或applet。 例如,HTML IMG元素的内容通常被其“ src”属性指定的图像替换。 替换元素通常具有固有尺寸:固有宽度,固有高度和固有比率。 例如,位图图像具有以绝对单位指定的固有宽度和固有高度(从中可以明显确定固有比率)。 另一方面,其他文档可能没有任何固有维度(例如,空白HTML文档)。

替换的元素是具有固有宽度和高度的嵌入式元素。 这意味着宽度和高度不是用CSS定义的,而是属于元素的。 例如,图像的初始宽度和高度在CSS外部设置。

被替换元素的内容不在文档中,它通常是指向外部内容的链接。 image标记就是这种情况,它链接到外部文件。

众所周知的替换元素包括:

  ,,

图像标签链接到外部文件。 该文件可以是本地文件(在一个网站文件夹中),也可以是显示该文件的网站的外部文件。 在这种情况下,文件通常托管在另一台服务器(网站,文档共享应用程序等)中。

其他替换的元素包括标记。 该标签本身没有内容。 该元素将替换为文本,单选,复选框等。

尽管替换的元素可以由CSS操纵,但它们有两个主要的特殊性:

  • 我们无法将生成的内容应用于他们; 和
  • 在没有CSS加载的情况下,它们将加载默认的宽度和高度。
  • 内联不可替换元素

内联不可替换元素是不是替换元素的内联元素。 我们将在下面探讨内联非替换元素的主要特征。 在下面的段落中,为简单起见,我们将内联不可替换元素称为内联元素。

仅左右边距适用于内联框。 同样,虽然顶部和底部填充可以应用于内联框,但它们对周围的框没有影响,但对背景颜色没有影响。

在下面的示例中,我们将在段落内添加引号(内联元素),并对其应用宽度,边距和填充。

基本样式的效果如下所示:

我们注意到的第一件事是width属性对报价没有影响。 因此,至少就非替换元素而言,无需在嵌入式框中应用宽度或高度。

在下面的图像中,我们使用标尺绘制了相同的图像,以便更好地了解引号周围的水平空白区域的宽度:

我们可以看到引号右侧空白的总宽度约为60像素。 它是padding-left和margin-left的组合,每个都是30px。

在这两个图像中,我们可以注意到填充和边距对报价的垂直边没有影响。 好像没有应用顶部和底部填充和边距。

我们可以看到,即使水平填充对周围没有影响,应用背景色也会产生有趣的效果。

背景颜色将应用于元素,包括其顶部和底部填充。

虽然垂直填充对引号周围的文本没有影响,但是如果我们应用背景色,情况会发生变化。 quote元素上方的文本完全被背景色隐藏。 对于下面的文字,这是另一个故事。 将背景颜色应用于定义了padding-top的嵌入式元素是没有用的。除非我们要隐藏文本或元素上方的文本或元素,否则我们将应用背景。 而且这里根本不需要将padding-top应用于内联不可替换元素。

块级元素

与内联元素相反,块级元素的行为就像在它们后面有换行符一样,以便它们像实际的盒子一样堆叠在一起。 但是,实际包装盒略有不同。 块级元素占用其空间,因此,即使它们的宽度小于其父容器的宽度,默认情况下,其他元素也不会占用剩余的垂直空间 。 因此,它们在所有四个侧面上都可以具有特定的宽度和高度以及填充,边距和边框。

4.如何计算盒子的尺寸?

各种因素决定了我们如何计算盒子的大小。 核心是元素的宽度和高度。 如上所述,元素具有可选属性,例如填充,边框和边距。

盒子模型与网页中元素的大小有关。 我们通过考虑元素的宽度,高度,填充,边框和边距来计算特定盒子的尺寸。 因此,定义宽度和高度是元素尺寸设置的一部分。

width属性定义元素内容的宽度。 填充和边框也添加到元素的总宽度中。

  p { 
宽度:200像素;
填充:10px;
边距:10px;
边框:1px实线#eee;
}

在上面的示例中,段落的总宽度为

 宽度(200px)+ 
向右填充(10px)+向左填充(10px)+
右边距(10px)+左边距(10px)+
右边框(1px)+左边框(1px)。

段落的总宽度实际上是242px,而不是200px。

但是,在CSS3中,引入了一个新概念以使元素宽度的计算更加直观:box-sizing属性。

盒大小属性

box-sizing属性允许开发人员选择如何计算元素的宽度。 与框大小相关的三个值是:内容框,填充框和边框。

内容框:内容框是默认框。 元素的宽度不包括填充和边框,因此它们加起来等于框的尺寸。 顾名思义,宽度仅包含内容。 默认情况下,添加填充或边距后,框中的内容将保持相同的宽度。 这意味着通过考虑额外的填充或边距,盒子会变大。

填充框:元素的宽度包括填充,但不包括边框。 在撰写本文时,仅受Firefox支持。 因此,不建议使用它。

边框:最后一个值带来更大的灵活性,并使元素宽度的计算更加直观。 元素的宽度包括填充和边框。 在我们之前的示例中将border-box的box-sizing应用于总宽度为200px。 宽度包括填充和边框。 我们可以在这里注意到的行为是,内容会缩小以允许填充和边框在相同宽度内。

块级元素的框尺寸规格

如果我们没有为内容指定宽度,它将采用允许的最大宽度。 如果我们未为其设置with,则嵌套在另一个块元素(如div)中的块元素将占用其父元素宽度的100%。 出于说明目的,让我们考虑以下配置:

  

Lorem ipsum dolor坐着,安全奉献精英。 尼莫错误culpa repudiandae tenetur labour magni,corporis quae volttate。 Mollitia asperiores deleniti错误perferendis atque,corporis id harum? Quaerat,autem,Explicabo。


  div { 
宽度:800像素;
背景色:浓汤;
}

我们在div元素中有一个段落。 父元素的宽度(div)设置为800px,而p元素没有明确的宽度。 在这种情况下,该段落的宽度将默认为800px,即另一个单词,它将占用其父宽度的100%。

父级有时可以是window(body)。 在这种情况下,默认情况下其宽度设置为屏幕窗口的100%。 在我们向没有声明宽度的元素添加填充的情况下,它占用其父级宽度的100%。 当我们向其添加填充时,宽度保持不变。

使用前面的示例,让我们在段落中添加30px的填充。

  p { 
填充:30px;
}

元素的内容将缩小以留出填充空间。 该段落的总宽度保持为800px,即使在左侧(左侧填充)和右侧(右侧填充)分别增加了30px和30px。 如果添加边框或边距,也会发生相同的行为

5.利润率在什么情况下会崩溃?

根据W3C规范,

“塌陷边缘是指两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有非空内容,填充物或边框区域,或间隙将它们隔开)组合在一起形成一个边距。 ”

崩溃边际通常发生两次。 在相邻元素之间以及父元素和子元素之间。

相邻元素之间的边距崩溃

在两个段落的边距为30px(顶部,右侧,底部和左侧)的情况下,两者之间的垂直间距应为60px。 我的意思是第一段的底边和第二段的底边相遇的空间。 简单计算:第一段的边距底:30px +第二段的边距顶:30px = 60px。

但是,这不会发生。 两段之间的实际大小为30px,而不是60px。 如规格中所述,相邻的边距合并形成一个。 好像第二段的上边距已经神奇地消失了。

在第一段的下边距和第二段的上边距具有不同值的情况下,将应用最大值。 小的然后被忽略。

当边距之一为负值时,将两个值相加并使用这两个值的总和。

父子元素之间的折叠边距

父级和子级元素之间没有内容,边框或其他任何元素时,页边距也会崩溃。 让我们创建一个div元素,在其中有一个嵌套的段落。 这是我们两个元素的CSS:

  div { 
边距:30px 10px;
背景颜色:#ccc;
}
  p { 
页边距:20px;
背景颜色:#efe;
}

HTML代码如下:

将div的上边距和段落设置为30px和20px,页面边缘和段落之间的距离应为50px。 但是,与相邻元素一样,边距会崩溃,而最高的边距(div的边距)会损害最低的(p)。

我们可以通过为父级设置边距或边框来防止边距崩溃。 在我们的示例中,我们应该在顶部和底部应用填充或边框,以防止在父元素的顶部和底部塌陷。

同样重要的是要注意,当父项具有以下设置之一时,边距不会折叠:

  -位置:绝对; 
-位置:固定;
-溢出:隐藏; 要么
-溢出:滚动;

6.内容溢出时

在前面的部分中,我们讨论了盒子以及如何影响宽度。 在本节中,我们将讨论在考虑元素的高度和–内容时盒子的行为。

默认情况下,如果我们不声明特定高度,则元素的高度与其内容适合的高度相同。 在这种情况下,没有什么要处理的。 当我们为元素设置特定的高度时,事情变得更加棘手。 我们将在这里讨论内容溢出时的具体情况。 表示内容的高度大于元素的指定高度时的含义。

为了说明起见,让我们创建一个包含400个单词的虚拟文本并具有以下CSS规范的段落:

  p { 
宽度:800px;
高度:250像素;
背景色:浅绿色;
}

如浏览器中所示的文本。

在CSS中,有一个称为溢出的属性可以帮助处理这种情况。 该属性具有四个值:visible,scroll,hidden和auto。 如果不定义overflow属性,则默认情况下将其设置为可见。 因此,我们前面的文本超出段落边界溢出的示例就是此默认设置的说明。

我们将从“可见”开始解释这些值所揭示的内容。

溢出:可见

默认情况下,内容设置为溢出:可见。 除非我们要覆盖先前的溢出声明,否则将其设置为可见是没有用的。

溢出:隐藏

  p { 
宽度:800px;
高度:250像素;
背景色:浅绿色;
溢出:隐藏;
}

果然,当将溢出设置为隐藏时,超出框的定义尺寸的所有内容都将被隐藏。

溢出:滚动

为了更好地了解将溢出设置为在内容上滚动的影响,我们将使用之前的文本并将溢出设置为滚动。

  p { 
宽度:800px;
高度:250像素;
背景色:浅绿色;
溢出:滚动;
}

让我们检查一下对文本的影响。

在上图中,我们可以注意到右上方的滚动条。 有了这个值,总会有一个滚动条。

溢出:自动

该值几乎与滚动类似,但略有不同。 仅在需要时才提供滚动条。

结论

关于CSS盒子模型有很多东西要写。 而且您可以注意到,本文只是从头开始。 探索的其他有趣点包括关于盒子模型的定位和浮动。