这是我参与「第四届青训营」笔记创作活动的的第2天

一. CSS的概念

1. CSS的定义

CSS是一种用来表现HTML或XML等文件样式的计算机语言。

CSS 指的是层叠样式表：Cascading Style Sheets。
样式定义如何显示 HTML 元素。
用来定义页面元素的样式：设置字体和颜色；设置位置和大小；添加动画效果。

2. 在页面中使用CSS的方法

外链（推荐）：使用<link>标签，引入外部文件。

嵌入：在html页面内部，使用<style>标签将样式包裹起来。

内联：写在页面标签的style属性内，使用引号包裹。

二. CSS的简单工作流程

浏览器加载和渲染HTML的顺序：

浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

三. CSS中的选择器

选择器selector，能够找出页面中的元素，设置样式。

1. 通配选择器

选择器	示例	含义
*	* { }	选择所有HTML元素并应用样式。

2. 标签选择器：选择指定的HTML元素。

选择器	示例	含义
标签名	A { }	选择所有的< A >标签并应用样式

3. ID选择器

选择器	示例	含义
#id名	#A { }	选择所有id="A"的标签并应用样式。idName应保持唯一。

4. 类选择器

选择器	示例	含义
. 类名	.A { }	选择所有class="A"的标签并应用样式。

5. 属性选择器

选择器	示例	含义
[属性名]	[attr] { }	选择包含 attr 属性(不论attr值为何)的元素并应用样式。
	[attr=val] { }	选择包含 attr 属性且值为val的元素并应用样式。
	[attr~=val] { }	选择包含 attr 属性(以空格间隔出多个值) 且值中含有val的元素并应用样式。
	[attr\|= val] { }	选择包含 attr 属性且值以val或val-开头的元素并应用样式。
	[attr ^= val] { }	选择包含 attr 属性且值以val开头的元素并应用样式。
	[attr $= val] { }	选择包含 attr 属性且值以val结尾的元素并应用样式。
	[attr *= val] { }	选择包含 attr 属性且值中包含val 的元素并应用样式。

6. 伪类选择器

选择器	示例	含义
:状态	a:hover{ }	选择所有标签a的hover状态元素并应用样式。

7. 伪元素选择器

选择器	示例	含义
::元素某部分	p::first-line { }	选择所有p标签的first-line元素并应用样式。

8. 组合选择器

选择器	示例	含义
后代选择器：节点空格后代节点	A B{ }	选择A的后代节点B(父子、祖孙...) 并应用样式。
子选择器：A>B	A>B	选择A的直接子节点B(父子) 并应用样式。
相邻兄弟选择器：A+B	A+B	选择A的相邻兄弟B(B在A后，紧邻A) 并应用样式。
通用兄弟选择器：A~B	A~B	选择A的兄弟B(B在A后，不必紧邻) 并应用样式。

9. 多用选择器

选择器	示例	含义
选择器列表：A,B,C	A,B,C{ }	A{ }B{ }C{ }的简写，选择满足A或B或C的元素并应用样式。

四. CSS选择器特异度

1. 特异性

特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

简单来说：CSS特异性就是CSS样式选择器的权重计算。从而让哪些样式应用到元素上。

2. 各选择器的权值

每一种选择器都有自己的权重，依次是：

行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
我们以一个 0 0 0 0 四位数为样式的权重总和：

从最低的元素、伪元素选择器在个位+1 就是 0 0 0 1

类、属性、伪类在十位数+1 就是 0 0 1 0

ID选择器在百位数+1 就是 0 1 0 0

行内样式在千位数+1 就是 1 0 0 0
可以通过选择器特异值覆盖部分样式，实现样式复用。

3. 总结

选择器	权重	使用示例
!important	1111	* { color: '#00f' !important }
行内	1000	<span style={ color:'#00f' } />
id	100	#idName { color:'#00f' }
class	10	.calssName { color:'#00f' }
伪类	10	a:hover { color:'#00f' }
属性	10	a[href="**"] { color:'#00f' }
标签	1	div { color:'#00f' }
伪元素	1	p::first-line { color:'#00f' }

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

CSS 优先规则2： "直接样式"比"祖先样式"优先级高。

CSS 优先规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

CSS 优先规则4： 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

CSS 优先规则5： 属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级。

五. CSS求值过程

QQ截图20220725190349.png

filtering：通过样式规则为dom树种的各个元素进行选择器匹配，匹配有效的属性值，匹配当前媒体查询media等等,比如当用户打印时，加载media是打印样式的css样式，生成的声明值可能会有一个或多个，比如一个p标签匹配到了两个选择器 p{ font-size: 16px },p.text{ font-size: 1.2em }
cascading：用过对比选择器的特异性，选出优先级最高的一个选择器，生成层叠值，比如1.2em
defaulting：判断层叠值是否为空，如果为空，使用继承或者初始值，生成指定值，保证指定值一定不为空。
resolving：将相对值计算成绝对值，比如em转化成px，相对路径转化成绝对路径等，生成计算值( computed value ：在浏览器不进行实际布局时，得到的具体的值)
formatting: 有些值不能静态计算出来的，比如有些值需要渲染之后才能获得，如vh，vw，百分比这种，得到使用值
将小数像素值转为整数，比如width：400.2px,转化成width: 400px,生成实际值，css求值完毕

求值过程总结：DOM+样式 -> filtering（规则）-> cascading（层叠：筛选声明值）-> defaulting（没有声明，继承或初始值）->resolving（相对值转化绝对值）->formatting（计算值转换）->constraining（限制：小数到整数）->实际值。

六. CSS中的颜色

1. 16进制 / RGB（red green blue）

Red红：红色的比重。取值范围是0-255。
Green绿：绿色的比重。取值范围是0-255。
Blue蓝：蓝色的比重。取值范围是0-255。

2. HSL（hue saturation lightness）

Hue色相：色彩的基本属性。取值范围是0-360。
Saturation饱和度：色彩的鲜艳程度。取值范围0-100%。
Lightness亮度：颜色的明亮程度。取值范围是0-100%。

3. 颜色名

常用：white白色、black黑色。

4. alpha透明度（0透明~1不透明）

七. CSS中的字体样式

1. font-family字体族

指定多个字体，属性用逗号隔开，从前往后浏览器自己选择，有哪个用哪个。
通用字体族：
- serif 衬线字体族
- sans-serif 非衬线字体族
- monospace 等宽字体，即字体中每个字宽度相同
- cursive 草书字体
- fantasy 主要是那些具有特殊艺术效果的字体

font-family使用建议：
- 字体列表最后协商通用字体族。
- 中英文混排的情况下，建议英文字体写在中文前面。

2. @font-face自定义字体

字体文件放在服务器上，下载指定字体文件。
影响性能。可以通过裁切使用到的文字，丢弃无用文字来解决。

3. font-size 字体大小

关键字：small、medium、large。
长度：px、em。
百分数：相对于父元素字体大小。

4. font-style字体风格

italic 斜体
normal 非斜体
oblique 倾斜

5. font-weight字体粗细

取值范围：100-900。默认normal400，bold700。
font-weight属性需要字体本身支持。

6. line-height行高

行高：两行文字基准线之间的距离。
- line-height: 45px; 有单位，表示基准线距离。
- line-height: 1.6; 没有单位，表示自身字体大小的多少倍。

7. font字体综合属性

综合属性设置的时候，必须保留字号与字体。

8. text-align水平对齐方式

属性值	描述
left	将内联文本向左对齐。
right	将内联文本向右对齐。
center	使内联文本居中。
justify	使内联文本两端对齐。文本通过拉伸空格和单词将其左右边缘对齐到段落的左右内容边缘。
initial	将此属性设置为其默认值。
inherit	如果指定，则关联元素采用其父元素text-align的属性值。

9. spacing间距

word-spacing文字间距：增加或减少单词间的空白（即字间隔）。
letter-spacing字符间距：增加或减少字符间的空白（即字符间距）。

10. text-indent首行缩进

规定文本块中首行文本的缩进。

11. text-decoration文本装饰

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

12. 文字空格展示

值	描述
normal	默认。合并空格。
pre	保留所有。
nowrap	强制不换行。
pre-wrap	保留空格，且一行内显示不下，自动换行。
pre-line	合并空格，保留换行。
inherit	从父元素继承属性的值。

八. CSS中的布局

1. 布局的概念

布局（Layout）： 确定内容的大小和位置的算法；一句元素、容器、兄弟节点和内容等信息计算。

2. 盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素。

1.盒模型构成： content（主内容）+padding（内边距）+border（边框）+margin（外边距）

① W3C标准盒模型/标准盒子：width宽度表示content（主内容）宽度。【width = content】

② IE盒模型/怪异盒子：width宽度表示content（主内容）+padding（内边距）+border（边框）这三个部分的宽度。大多数情况下，IE盒模型更容易设定一个元素的宽高。【width = content + padding + border】

2.盒模型设置

① box-sizing: content-box; W3C盒子模型 - 默认值；

② box-sizing: border-box; IE盒子模型。

3. 三种布局方式

1. 常规流

1.元素按照其在HTML 中的先后位置至上而下布局。

2.行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。

3.所有元素默认都是普通流定位。

常规流中的盒子，在某种排版上下文中参与布局。

🔍 1.1. 行级元素与块级元素

CSS中的概念：

块级盒模型：独占一行，不和其他盒子并列摆放。可以设定元素的宽高。适用所有盒模型属性。
行级盒模型：可以和其他盒子放在一行，超出自动换行。不可以设置宽高。行内元素内一般不可以包含块级元素。

HTML中的概念：

块级元素： 生成块级盒子。

body、article、div、main、section、h1-6、p、ul、li 等。

display: block;
行级元素： 生成行级盒子，分散在多个行盒中。

span、em、strong、cite、code 等。

display: inline;

display属性：

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

🔍 1.2. flex布局

flex-box： 一种新的排版上下文。它可以控制子级盒子的：摆放的流向 ( → ← ↑ ↓ )、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。

display: flex：开启flex布局。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性：

flex-direction：控制流向。

① 属性值为row：水平为主轴，垂直为交叉轴，左边为主轴起点；

②属性值为row-reverse: 水平为主轴，垂直为交叉轴，右边为主轴起点；

③ 属性值为column：垂直为主轴，水平为交叉轴，上方为起点；

④ 属性值为column-reverse：垂直为主轴，水平为交叉轴，下方为起点；
flex-wrap：控制如何换行。

① 属性值为nowrap：默认值，不换行。

② 属性值为wrap：换行，第一行在上。

③ 属性值为wrap-reverse：换行，第一行在下。
justify-content：控制主轴上项目的对齐方式。

① 属性值为flex-start：默认值，主轴起点对齐。

② 属性值为flex-end：主轴终点对齐。

③ 属性值为center：主轴居中对齐。

④ 属性值为space-between：两端对齐。

⑤ 属性值为space-around：每个项目两侧的间隔相等。
align-items：控制交叉轴上项目的对齐方式。

① 属性值为flex-start：交叉轴起点对齐。

② 属性值为flex-end：交叉轴终点对齐。

③ 属性值为center：交叉轴居中对齐。

④ 属性值为baseline：项目的第一行文字的基线对齐。

⑤ 属性值为stretch：默认值，占满整个容器的高度。

项目的属性：

order：项目排列顺序。数值越小越靠前。默认为0。
align-self：单个项目不一样的对齐方式。
flex-grow：有剩余空间时的伸展能力。
flex-shrink：容器空间不足时收缩的能力。
flex-basis：没有伸展或收缩时的基础长度。
flex：可以代表flex-grow+flex-shrink+flex-basis三合一。

① 属性值为auto：代表1 1 auto。放大且缩小。

② 属性值为none：代表0 0 auto。不放大也不缩小。

🔍 1.3. grid布局

grid：将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。：将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。

display: grid：使元素生成一个块级的 Grid 容器。