关于CSS层叠、CSS继承、CSS盒模型概述

1、CSS层叠

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

1）CSS样式的来源

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

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

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

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

由于浏览器自带一个默认的样式，若是html中没有为标签设置样式，则浏览器会按照本身的样式来显示。可是浏览器默认样式的级别是最低的，一旦有其余地方设置了标签样式，浏览器默认样式就会被干掉。

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

a：用户样自定义式：

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

其实浏览器也有这样的设置，例如chrome浏览器中，咱们就能够设置字号和字体

2）CSS权重规则

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

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

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

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

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

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

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

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

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

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

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

3）CSS设置规则

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

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

2、css继承

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

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

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

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

3、CSS盒模型

1）简述：

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

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）。

内边距、边框和外边距能够应用于一个元素的全部边，也能够应用于单独的边。并且，外边距能够是负值，并且在不少状况下都要使用负值的外边距。

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

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

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

3）盒模型应用：

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

以下图实例项目所示：

总结：以上文章是对CSS层叠、CSS继承以及CSS盒模型三个知识模块的概述。