理解CSS | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第二天。 CSS 作为前端技术栈中关键一环，用于

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

一、本堂课重点内容：

CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课旨在通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，帮助前端新手建立对 CSS 的全面而深刻的认知，而后由此引出CSS继承与布局的话题，最后围绕盒模型中行“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路，帮助同学强化 CSS 实战技能。

二、详细知识点介绍：

1. CSS详解

CSS全称为Cascading Style Sheets，用来定义页面元素的样式，设置字体和颜色，位置大小，及动画效果等。

CSS由一条一条的样式规则所构成。

IMG_2444(20230116-171142).JPG 大括号内为声明块，选择器+声明块为一条规则。

2. CSS的使用

1）外链

将CSS的定义放在单独的文件中，通过link标签将其引入到页面中。（最为推荐）

<link rel = "stylesheet" href = "/assets/style.css">

2）嵌入

直接将样式的代码嵌入标签中

<style>
    li{ margin: 0;list-style: none; }
    p{ margin: lem 0; }
</style>

3）内联

将标签样式直接写入style属性中。（不太推荐）

<p style = "margin: lem 0">Example Content</p>

3. CSS工作原理之选择器

1）选择器

找出页面中的元素，以便设置样式
使用多种方式选择元素
- 按标签名、类名或ID
- 按属性
- 按DOM树中的位置

2）通配选择器

通过星号*匹配所有元素

3）标签选择器

通过标签选择元素

4）ID选择器

通过ID选择元素，利用#+ID进行匹配，其ID值在该页面中最好是唯一的。

5）类选择器

对于同一类型的标签进行设置，较为常用

6）属性选择器

通过元素的属性进行选择[属性]
通过元素的属性值进行选择[属性 = 属性值]

7）伪类选择

一种不基于标签和属性定位元素，分为状态伪类和结构性伪类

状态伪类：元素处于特定状态进行定位
结构伪类：根据DOM节点在DOM树中的位置进行定位

8）组合选择

9）选择器组

4. 文本渲染

1）RGB模式进行颜色渲染

利用#加三个十六进制的数或rgb(0-255, 0-255, 0-255)进行表示，三个数分别代表红、绿、蓝三种颜色数量值

2）HSL模式进行颜色渲染

用色相、饱和度及亮度表示颜色hsl(0-360, 0-100%, 0-100%)

3）不透明度进行颜色渲染

又叫alpha，指颜色在页面中的不透明度

#：后加两位十六进制的数进行表示
rgb：改为rgba，并在括号中后加一个0-1的数进行表示
hsl：改为hsla，并在括号中后加一个0-1的数进行表示

4）字体

应设置多个字体，以便于在不同设备中都能正常使用，系统自动从前至后选择字体与其匹配，最后一个字体最好使用通用字体族（Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体），中英文字符都存在时，尽量将英文所匹配的字体位于前方，中文匹配的字体位于后方。

5）使用Web Fonts设置字体

将字体文件直接放入服务器中

6）font-size

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

6）white-space控制多个空白符

normal：默认行为，多个空格仅展示一个
nowarp：强制不换行
pre：保留原始代码
pre-wrap：保留空格，当一行展示不下时进行自动换行
pre-line：合并空格，当一行展示不下时进行自动换行

5. 调试CSS

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

6. 选择器优先级与继承

根据特异度将优先级由高到低排列
特异度根据ID、（伪）类及标签个数进行判断，（ID > （伪）类 > 标签）
可利用选择器可覆盖的特质，实现代码的复用
某些属性会自动继承其父元素的计算值，除非显式指定一个值（一般与文字相关属性可继承，模型相关属性不可继承）
inherit显式继承
- 利用显式继承，强制让某一元素属性继承其父元素
initial初始值
- 某元素不可继承，且未设置属性，或其为可继承，但未继承到其父元素，则需用到初始值
- 每一属性都有初始值
  - background-color初始值为transparent
  - margin-left初始值为0
- 可使用initial关键字显式重置初始值，如background-color:initial

6. CSS求值过程

IMG_2467(20230117-230513).JPG

7. CSS布局

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

1）常规流

包括行级、块级、表格布局、FlexBox，与Grid布局
盒模型
- width
  - 指定content box宽度
  - 取值为长度、百分数、auto
  - auto由浏览器根据其他属性确定
  - 百分数相对于容器的content box宽度
- height
  - 指定content box高度
  - 取值为长度、百分数、auto
  - auto由内容计算得来
  - 百分数相对于容器的content box高度
  - 容器有指定高度时，百分数才生效
- padding内边距
  - 指定元素四个方向的内边距
  - 百分比相对于容器宽度
- border边框
  - 指定容器的边框样式、粗细和颜色
  - 包括三种属性及四种方向
- margin外边距
  - 指定四个方向的外边距
  - 取值可以是长度、百分比、auto
  - 百分数相对于容器的宽度
  - 使用margin:auto进行水平居中
  - margin collapse在排版时选择较大的边距进行排版，而非将其相加
块级 BFC
- 不和其他盒子并列摆放
- 适用所有的盒模型属性
- 某些容器创建一个BFC
  - 根元素
  - 浮动、绝对定位、inline-block
  - Flex子项和Grid子项
  - overflow值不是visible的块盒
  - display:flow-root
- 排版规则
  - 盒子从上到下摆放
  - 垂直margin合并
  - BFC内盒子的margin不会与外面的合并
  - BFC不会和浮动元素重叠
- clientWidth
行级 IFC
- 和其他行级的盒子一起放在一行或拆分成多行
- 盒模型中的width、hight不适用，宽度与高度由内容决定
- 只包含行级盒子的容器会创建一个IFC
- 排版规则
  - 盒子在一行内水平摆放
  - 一行放不下时，换行显示
  - text-align决定一行内盒子的水平对齐
  - vertical-align决定一个盒子在行内的垂直对齐
  - 避开浮动元素
块级元素
- 生成块级盒子
- body、article、div、main、section等
- 利用display:block进行转化
行级元素
- 生成行级盒子
- 内容分散在多个行盒（line box）中
- span、em、strong、cite、code等
- 利用display:inline进行转化
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可放于行盒，可设置宽高，作为一个整体不会被拆分成多行
- none 排版时完全被忽略
对齐方式
flex布局
display
- display:grid使元素生成一个块级Grid容器
- 使用grid-template相关属性将容器划分成网格
- 设置每一个子项占那些行/列
- 划分网格

2）浮动

为实现文字环绕效果

文字浮动在图片上方 position:absolute;

相对于父元素居中

margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;

3）绝对定位

relative
- 在常规流中布局
- 相对于自己本应在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当他没有偏移一样布局
absolute
- 脱离原常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
fixed
- 相对于窗口进行定位
- 脱离常规流

三、实践练习例子：

四、课后个人总结：

老师十分详细地讲解了CSS的一些基本用法，我感受到CSS知识点较为零散及复杂，因此在今后的学习中，我应当始终保持一颗好奇心，可以利用MDN和W3C CSS规范进行学习，不断学习其新的规范，以便于写出更加完善的程序。

五、引用参考：

本篇文章代码均引用老师在掘金课堂中的示例。

理解CSS | 青训营笔记