html5知识点：CSS盒模型

冷不防 2024-02-18 16:37 36阅读 0赞

一、 **CSS层叠**

在前端程序员对CSS编写的过程中，CSS选择器的作用是用来选中某个元素，并对当前的元素进行样式上的渲染，那么每一个选择器都有属于自己的一些解析规则。那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源进行叠加，并最终解析成渲染效果，那这个过程我们就称为CSS层叠。

1） **CSS样式的来源**

css之所以有“层叠”的概念，是因为有多个样式来源。其实css的样式来源有5个，开发人员只能接触到后面3个。

![ec2a9e4a7119da3f6b417704ab5b2ad8.png][]

前三个我们程序员习惯的称为：“内联样式表”、“内部样式表”、“外部样式表”，这三个样式表也是我们程序员所接触的css样式编写的部分，这里就不做多的介绍。

下面我们来认识下后面两个：“浏览器默认样式”以及“用于自定义样式”。

**a：****浏览器默认样式：**

当你不为html设置任何样式时，显示在浏览器上，b标签会显示粗体、em标签有倾斜、h1-h6字号有默认的大小……这是就是浏览器默认的样式。

因为浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了标签样式，浏览器默认样式就会被干掉。

注意，不同浏览器的默认样式有些地方是不一样的。例如，我们在写css时，都会首先设置 \* \{margin:0; padding:0;\}，就是因为有浏览器兼容性问题。干脆，全部弄成0，这样各个浏览器就都统一了。

**a：****用户样****自定义****式****：**

在一些新闻网站中，经常看到可以设置字体大小的快捷菜单，例如下图就是搜狐新闻中的设置。这些都是用户可以根据自己的意愿去修改的。

![31eca6e7734042109c33d70588614aa9.png][]

其实浏览器也有这样的设置，例如chrome浏览器中，我们就可以设置字号和字体

![4889148c1c264e17934ce9b20ef8b59f.png][]

**2）CSS权重规则**

每个选择器都有一些css规则，这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的，为此需要为每条规则制定特殊性，当发生冲突的时候必须选出一条最高特殊性的规则来应用。

CSS规则的特殊性可以用4个整数来表示，例如0，0，0，0.计算规则如下：

**1、**对于规则中的每个ID选择符，权重值表示为0，1，0，0

**2、**对于规则中每个类选择符和属性选择符以及伪类，权重值表示为0，0，1，0

**3、**对于规则中的每个元素名或者伪元素，权重值表示为0，0，0，1

**4、**对于通配符，权重值表示为0，0，0，0.

**5、**对于内联规则，权重值表示为1，0，0，0

最终得到结果就是这个规则的权重。两个权重值的比较类似字符串大小的比较，是从左往右依次比较，第一个数字大的规则的权重高。例：

![99106c39618d4a5486bd5c610ad0bfa7.png][]

上例中两条规则的权重值分别是0，0，0，2 和0，0，0，1，显然第一条样式胜出，因此最终字是**蓝色**的。

**注意**，通配符的权重值0，0，0，0看起来没有作用，实际上不是。

css还有一个!important，用来改变css规则的特殊性。实际上，在解析css规则权重的时候，是将具有!important的规则和没有此标签的规则利用上述方法分别计算权重，分别选出权重值最高的规则。最终合并的时候，具有任何权重值的带有!important标记的规则胜出。

**3）CSS设置规则**

由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

![d63fabf1b0af4cd5a6f9fb42572384cd.png][]

根据上图描述箭头左侧分别是css外部样式和css内部样式对P/span标签的样式渲染，箭头右侧则是浏览器对css样式规则的解析。浏览器对css解析规则一目了然。

二、 **css继承**

想要了解CSS继承，我们必须要先谈谈文档树，例：

![7e7fc475357b41dfa94543b67833959b.png][]

在HTML结构中各个元素的嵌套规则是我们前端程序员必须要掌握的专业技能，那么只要元素之间有了嵌套，那必然会产生父元素与子元素的关系，那继承是指我们设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。在CSS中有一些特定的属性，例如：color、font-size、font-family、text-align等，这些属性会在给父元素设定后传递到子元素甚至传递到孙元素的样式中，那么这些子元素/孙元素会得到样式的渲染，这就是CSS的继承机制。

![199e0a53c48f4969be1f54fd8500aec6.png][]

在浏览器上显示的则是如下图所示：

![e0f6b966cc674568b30e760cf7a4c830.png][]

**注：**在给body设置了font-size、color属性之后，嵌套在body里面的div、p、span标签也应用了此属性，那么这种情况就是CSS的继承属性传递到了子元素以及孙元素身上。这就是css继承机制。

三、 **CSS盒模型**

**1）简述：**

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含**内容区、补白（填充）、边框、边界****(****外边距****)**这就是盒模型。下面是盒模型的图例：

![47617f0d8dd0496cb19187929b4475b9.png][]

**2）盒模型组成及原理：**

CSS盒模型由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding- bottom、padding-left）、边框（border-top、border-right、border-bottom、border- left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

**1、**元素框的最内部分是实际的内容；直接包围内容的是内边距（padding），内边距呈现了元 素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任 何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。

**2**、内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器（\*）对所有元素进行设置：

**3、**在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

**2）盒模型应用：**

CSS中的盒子模型是为了让我们充分理解div+css模型的定位功能，就是利用盒子模型这样的布局方式代替了传统的表格布局方式，所以盒子模型是在学习div+css布局方式中必须要学习的一个模型，通过这个模型能够明白网页中div和div之间的相对位置是如何布局的。

如下图实例项目所示：

![75b1f58d329b4523808c9adc6a86a95c.png][]

总结：以上文章是对CSS层叠、CSS继承以及CSS盒模型三个知识模块的概述。前端知识体系固然非常庞大。

[ec2a9e4a7119da3f6b417704ab5b2ad8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0301e3d0c2334263b07e6666327ed5d9.png
[31eca6e7734042109c33d70588614aa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/79efdea4719947edabbc230637c52769.png
[4889148c1c264e17934ce9b20ef8b59f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/294b8d4c40a64c019e20c3c4b6a2e47f.png
[99106c39618d4a5486bd5c610ad0bfa7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0d62f294f68f464d95bd1b49dc99b335.png
[d63fabf1b0af4cd5a6f9fb42572384cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c01a0e544ca143ab8cebc64ec8a64a97.png
[7e7fc475357b41dfa94543b67833959b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7d30082a2e9c42ca83550768add8342f.png
[199e0a53c48f4969be1f54fd8500aec6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/bb7a4794c2f548c883adb79d779ad717.png
[e0f6b966cc674568b30e760cf7a4c830.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b23cadc6370a440693f9013a9efbd575.png
[47617f0d8dd0496cb19187929b4475b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/53d1137f7ddd420892230c34f85b7f08.png
[75b1f58d329b4523808c9adc6a86a95c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/850fd51f48954affbdb5b4fb0f6810a3.png