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

一、走进前端技术栈 - CSS

1. 什么是CSS

CSS：

Cascading Style Sheets 层叠样式表
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

2. CSS的基本组成

CSS的基本组成：

选择器
声明
- 属性
- 属性值

3. 选择器

选择器Sector

找到页面中的元素，以便给它们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
- ......

通配选择器

用于匹配所有元素
用法： *

id选择器

用于匹配某id属性的唯一元素
用法： #id值

类选择器

用于匹配某class属性的一类元素
用法： .class值

属性选择器

用于匹配具有某属性/属性值的元素
用法：
- [ 属性 ] ---> 具有某属性
- [ 属性 = "属性值" ] ---> 属性为某特定属性值
- [ 属性 ^= "属性值" ] ---> 属性以某属性值为开头
- [ 属性 $= "属性值" ] ---> 属性以某属性值为结尾

伪类选择器pseudo-classes

不基于标签和属性定位元素
包括几种伪类
- 状态伪类
  - 匹配某元素的某种状态
- 结构性伪类
  - 匹配出现在DOM树中某位置结构的元素
用法：元素:伪类

选择器的组合

用于匹配元素间具某种关系的元素

选择器组

用于间隔多个选中选择器
用法：选择器1 , 选择器2

4. CSS的使用

在页面中如何使用CSS：

外链形式

eg. < link ref = " stylesheet " href = " /assets/style.css " >
嵌入形式

eg. < style >

li { color : red ; }

< /style>
内联形式

eg. < p style = " margin : 0 ; "> Demo < /p >

5. CSS如何工作

浏览器解析CSS简化过程：

6. 颜色模式

RGB模式

根据红Red、绿Green、蓝Blue三原色的值来调节颜色

HSL模式

根据色相Hue、饱和度Saturation、亮度Lightness来调节颜色

颜色名

通过颜色名来确定颜色

透明度

通过为RGB模式和HSL模式添加透明度来调节颜色

7. 文本渲染

字体font-family

用于指定展示字体

通用字体族

字体的风格分类

Web Fonts

@font-face用于下载指定网络字体

font-size

用于指定字体大小
指定规则：
- 关键字
  - small、medium、large
- 长度
  - px、em
- 百分数
  - 相对于父元素字体大小

font-wight

用于指定字体粗细
指定规则：
- 100~900
- 常规normal 即400
- 粗体bold 即700

line-height

用于指定两行文字间的距离
指定规则：
- 纯数字n ---> 字体大小的n倍

font

用于合并指定字体的样式

text-align

用于指定文字对齐方式
指定规则：
- 居中对齐center
- 左对齐left
- 右对齐right
- 两端对齐justify

spacing

用于指定文字间距
包括：
- letter-spacing 字符间距
- word-spacing 单词间距

text-indent

用于指定首行缩进

text-decoration

用于指定文本装饰
指定规则：
- none 无装饰
- underline 下划线
- line-through 删除线
- overline 上划线

white-space

用于指定空白符
指定规则：
- normal 默认
- nowrap 强制不换行
- pre 保留空格和换行
- pre-wrap 保留空格，自动换行
- pre-line 合并空格，保留换行

8. 调试CSS

浏览器调试CSS

右键点击页面，选择[检查]
使用快捷键
- Ctrl + Shift + I （Windows）
- Cmd + Opt + I （Mac）

二、深入CSS

1. 选择器的特异性

选择器的特异点（Specificity）：

用于计算选择器选中同一元素的优先级

2. 属性的继承

属性的继承：

某些属性会自动继承其父元素的计算值，除非显式指定一个值

显式继承：

某些属性不可继承
通过主动调用inherit来实现主动继承

3. 属性的初始值

属性的初始值：

CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left 的初始值为0
可以使用initial关键字显式重置为初始值
- background-color: initial

4. CSS求值过程

CSS求值过程：

浏览器通过一些规则对CSS属性进行计算求值

5. CSS布局

CSS布局（layout）

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

布局相关技术

常规流（文档流）
- 行级
- 块级
- 表格布局
- FlexBox
- Gird布局
浮动
绝对定位

6. 常规流

盒模型

width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、auto
- auto 取值由内容计算得来
- 百分数相对于容器的content box高度
- 容器有指定的高度时，百分数才生效

padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度

border
- 指定容器边框样式、粗细和颜色
- 三个属性
  - border-width
  - border-style
  - border-color
- 四个方向
  - border-top
  - border-right
  - border-bottom
  - border-left
- 四个边框颜色不同，宽高为0
  - 可实现三角形效果

margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度

可以使用 margin:auto; 实现水平居中效果

margin collapse外边距重叠：
    会取绝对值较大的外边距

怪异盒模型

宽高包括边框和内边距

overflow
- 用于指定超出区域处理方式
- 指定规则：
  - visible 可见
  - hidden 隐藏
  - scroll 显示滚动条

7. 块级与行级

块级与行级的区别

display属性

可以更改元素类型

8. 排版上下文

常规流 Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内（in-flow)
常规流中的盒子，在某种排版上下文中参与布局
排版上下文包括：
- 行级排版上下文
- 块级排版上下文
- Table排版上下文
- Flex排版上下文
- Gird排版上下文

行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*