一、选择器的特异度

概念：

CSS 中的选择器有不同的优先级，称为“特异度”。特异度越高的选择器，其对应的样式就会优先应用。简单来说就是当多个选择器发生冲突时，应当按照特异度确定优先级，优先级高的选择器将会覆盖优先级低的选择器。

特异度的值：

元素选择器（例如 p、h1、div 等），其特异度为 1,0,0,0 类选择器（例如 .class-name），其特异度为 0,1,0,0 ID 选择器（例如 #id-name），其特异度为 0,0,1,0 属性选择器和伪类选择器（例如 [attr]、:hover 等），其特异度为 0,0,0,1

特异度的计算：

1.计算选择器中ID选择器的数量
2.计算选择器中class选择器，属性选择器和伪类选择器的数量
3.计算类型选择器和伪元素选择器的数量
4.忽视通用选择器

二、CSS的继承

CSS的继承和其他[面向对象]语言所指的继承不同，像Java继承是继承的属性和方法，而CSS继承只有属性，没有方法

当一个元素的样式被继承到其子元素上的过程。只有一些 CSS 属性是可继承的，例如 font-size, color, font-family 等。

例如： body { font-size: 16px; color: blue; }

那么所有的子元素都会继承 body 元素的字体大小和颜色样式，除非被子元素的样式覆盖。

<body> <p>This is a blue text</p> <h1>This is also a blue text</h1> </body>

三、CSS的求值过程

解析过程

收集所有的 CSS 规则：浏览器会收集所有来自外部样式表和内部样式块的 CSS 规则，并将它们存储在一个数据。
构建选择器的优先级树：浏览器会根据选择器的特异度来构建一个优先级树，以确定哪些规则会优先应用。
应用样式：浏览器会按照优先级树的顺序，逐层匹配元素并应用样式。
计算继承和默认值：浏览器会考虑继承和默认值的情况，来确定最终的样式。
重绘和回流：如果样式改变会影响布局或尺寸，则需要进行重绘和回流。

3836c59fa7c7426c88bd6fbb9ccdcbe4(1).png

四、CSS布局及相关技术

确定内容的大小和位置的算法：依据元素、容器、兄弟节点和内容等信息来计算
相关技术：

常规流：行级、块级、表格布局
浮动
绝对定位

border

三种属性
border-width, border-style, border-color
四个方向
border-top, boder-right, border-bottom, border-left

margin指定元素四个方向的外边距，其取值可以是长度、百分数、auto，其中百分数相对于容器宽度。 margin collapse:只在垂直方向上发生，当多个边距相互接触时，那么会发生合并，并取所有边距的最大值。 box-sizing: border-box box-sizing: border-box将border的外边界设置为高度与宽度，这样就不会出现border超出范围的情况。

overflow：

overflow·：处理溢出采用

常见取值有：visible（边界与文字全部可见、且文字超出范围）、hidden（隐藏超出范围的文字）、scroll（无论如何都设置了滚动条）

五、盒模型

CSS [盒子模型]本质上是一个盒子。封装了周围的 HTML 元素。它包括：外边距([margin])、边框(border)、内边距(padding)、实际内容(element)四个属性。

CSS盒模型有两种：标准模型 + IE模型

块级元素	行级元素
生成块级盒子。	生成行级盒子、内容分散在多个行盒（line box）中
body、article、div、main、section、h1-6、p、ul、li等	span、eh、strong、cite、code等
dsplay:block	display:inline

block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

盒子模型的大小由元素的内容宽度（width）、内边距（padding）、边框（border）和外边距（margin）四个部分共同决定。

内容框计算方式

元素内容的宽度由CSS属性width控制。

内边距框计算方式

内边距的大小由CSS属性padding来控制。

边框框计算方式

边框的大小由CSS属性border来控制，指定的边框大小包括边框的线宽和边框周围的占位空间。

外边距框计算方式

外边距的大小由CSS属性margin来控制，指定了元素与其他元素之间的距离。

CSS盒子模型是Web开发中的一个基本概念，对于控制元素的大小、边距和填充非常重要。了解如何使用CSS属性来控制元素的大小、内缩和边距，可以轻松布局Web页面。在实际开发过程中，我们可以通过调整元素的大小、内边距、边框和外边距来控制页面上特定元素的位置和样式。

前端之CSS｜ 青训营