CSS 选择器的特异度
选择器的特异度（specificity）是用来确定CSS规则优先级的一个值。它是一个四位数值，由四个部分组成，每个部分表示一个级别的特异度。 特异度的计算规则如下：
- 对于每个选择器中的ID选择器，增加100。
- 对于每个选择器中的类选择器、属性选择器或伪类选择器，增加10。
- 对于每个选择器中的元素选择器或伪元素选择器，增加1。 特异度的计算是针对每个选择器的，不是针对整个选择器列表的。因此，如果一个选择器列表中包含多个选择器，则特异度的计算结果是每个选择器特异度之和。 特异度越高，优先级越高。当两个规则具有相同的特异度时，后面出现的规则将覆盖前面出现的规则。 以下是一些特异度的示例： h1：特异度为1。 body p：特异度为2。 .container .title：特异度为20。 #header .nav li.active：特异度为112。 特异度的理解对于正确理解CSS规则的优先级非常重要，特别是在处理复杂的选择器和多个
CSS规则时。
当多个CSS规则具有相同的属性但具有不同的特异度时，CSS解析器将根据特异度来确定应用哪个规则。
特异度是一种衡量CSS选择器权重的机制，它由四个部分组成。
当多个CSS规则具有相同的属性时，CSS解析器将比较它们的特异度，并选择具有更高特异度的规则来应用。如果特异度相同，则解析器将应用最后定义的规则。
举个例子来说，假设有以下两个CSS规则：
h1 { color: red; } #title { color: blue; }
在HTML中，如果一个元素同时具有<h1>标签和id="title"，那么color: blue将被应用，因为ID选择器的特异度为100，而元素选择器的特异度为1。
CSS 继承
CSS继承是指元素在没有设置特定样式时，会从其父元素继承一些样式属性。 在CSS中，一些常见的样式属性是可以继承的，例如字体样式（font-family、font-size、font-weight等）、文本样式（color、text-align、line-height等）、列表样式（list-style-type、list-style-position等）等。 当一个元素没有设置某个样式属性时，浏览器会自动从其父元素继承该属性的值。如果父元素也没有设置该属性，浏览器会继续向上查找，直到找到设置了该属性的元素为止。 例如，如果一个段落元素没有设置字体样式，它会从其父元素继承字体样式。如果父元素也没有设置字体样式，浏览器会继续向上查找，直到找到设置了字体样式的元素为止。 但是并不是所有的样式属性都是可以继承的。例如，背景样式（background-color、background-image等）、定位样式（position、top、left等）等就不可继承。 如果需要禁止继承，可以使用inherit关键字。例如，color: inherit;表示继承父元素的文本颜色。 总结起来，CSS继承是一种方便的机制，可以减少重复的样式定义，提高代码的可维护性。但需要注意的是，并不是所有样式属性都可以继承，需要根据具体情况进行设置。
显式继承
在CSS中，inherit是一个属性值，用于指定元素应该继承其父元素的属性值。 当一个元素的某个属性被设置为inherit时，它将继承其父元素的相同属性值。这意味着该元素将采用与其父元素相同的样式。
例如，如果一个段落的文本颜色被设置为红色，而该段落的子元素的文本颜色被设置为inherit，则子元素的文本颜色也将是红色。 以下是一个示例： ` p { color: red; /* 设置段落文本颜色为红色 / } span { color: inherit; / 子元素继承父元素的文本颜色 */ }
这是一个段落，文本颜色为红色。 这是一个span元素，将继承父元素的文本颜色。
` 在上面的示例中，span元素继承了其父元素p的文本颜色，因此它的文本颜色也是红色。 inherit属性可以用于继承任何可继承的CSS属性，例如字体样式、背景颜色等。CSS 求值过程解析
层叠值是指当多个CSS样式规则应用到同一个元素时，浏览器根据优先级和特定规则来决定最终应用哪个样式规则的值。每个样式规则都有一个层叠值，层叠值越高，优先级越高。 在CSS求值过程解析中，浏览器会按照以下步骤计算每个属性的值：
- 继承值：如果属性可以继承，且父元素有对应属性的值，则继承父元素的值作为初始值。
- 初始值：如果属性有定义初始值，则使用初始值作为初始值。
- 声明值：应用样式表中对应属性的声明值。
- 计算值：对于一些属性，如长度、颜色等，计算出最终的值。例如width: 50%，计算出实际的宽度值。
- 层叠值：根据样式规则的优先级和特定规则，确定最终应用的样式规则的值。 在层叠值的计算中，浏览器会根据以下规则来决定优先级： 重要性：!important声明的样式具有最高优先级。 选择器的特殊性：选择器的特殊性值越高，优先级越高。例如，#id选择器的特殊性值高于.class选择器。 源码顺序：如果以上两个规则相同，则后出现的样式规则具有更高的优先级。 通过以上步骤和规则，浏览器可以得出最终应用到元素上的CSS样式规则的值。
CSS 布局方式及相关技术
CSS布局相关技术包括常规流、浮动和绝对定位。
- 常规流是默认的布局方式，元素按照其在HTML中出现的顺序依次排列。元素会占据其在文档流中的位置，并且可以通过设置宽度、高度、外边距和内边距来调整布局。
- 浮动是一种常用的布局方式，通过将元素从常规流中脱离出来，使其可以向左或向右浮动。浮动元素会尽量靠近其前面的元素，并且可以通过设置清除浮动来避免其他元素受到影响。
- 绝对定位是将元素相对于其最近的已定位祖先元素进行定位，或者相对于浏览器窗口进行定位。通过设置top、right、bottom和left属性，可以精确地控制元素的位置。 这些布局技术可以单独使用，也可以结合在一起来创建复杂的布局。不同的布局技术适用于不同的场景，开发者可以根据具体需求选择合适的布局方式。
盒模型
- width：设置元素的宽度，可以使用具体的像素值、百分比或者auto。
- height：设置元素的高度，可以使用具体的像素值、百分比或者auto。
- padding：设置元素的内边距，可以使用具体的像素值、百分比或者auto。内边距是元素内容与边框之间的空间。
- border：设置元素的边框样式，可以设置边框的宽度、样式和颜色。
- margin：设置元素的外边距，可以使用具体的像素值、百分比或者auto。外边距是元素与其他元素之间的空间。
