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

一、本堂课重点内容

CSS 代码构成、使用方法和工作流程
CSS 选择器组、文本渲染和调试
CSS的继承与求值
CSS盒模型

二、详细知识点介绍

/走进前端技术栈 - CSS/

1.ccs是什么？

用来定义页面的样式，可以调节字体颜色、页面元素的大小和位置、还可以添加动画效果

2.css的构成及引入

构成
CSS的引入
- 可以使用外链、嵌入、内联3种方式

3.css是如何工作的？

浏览器载入 HTML 文件
将 HTML 文件转化成一个 DOM
浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式
浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型把他们分到不同的容器中
浏览器基于它找到的不同的选择器，将基于选择器的规则应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）
上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局
着色

4.CSS 流程之选择器组、文本渲染

选择器	示例
类型选择器	h1{ }
通配选择器	* { }
类选择器	.box { }
id选择器	#unique { }
标签属性选择器	a[title] { }
伪元素选择器	p::first-line { }
伪类选择器	p:first-child { }
后代选择器	A B
子代选择器	A>B
相邻兄弟选择器	A+B
兄弟选择器	A~B

 状态伪类  :link :visited :hover :active :focus
 结构伪类  :first-child:last-child

5.颜色-HSL

Hue 色相
Saturation 饱和度（%）
Lightness 亮度（%）
alpha 透明度为1时不透明[0,1]

6.Font

font:style weight size/height family

字体font-family

通用字体族
衬线体serif
无衬线体Sans-Serif
手写体Cursive
Fantasy
等宽字体Monospace

字体大小font-size

关键字smll、medium、large
长度 px、em
百分数
字重font-weight 100-900

其他的一些常见属性

相对于父元素字体大小 line-height
文本水平位置text-align
行距 spacing
文本缩进 text-indent
属性规定添加到文本的修饰 text-decoration
控制空白符的展示 white-space

7.调试css

可以F12唤起浏览器调试工具进行调试

/深入 CSS/

1. CSS 选择器的特异度

选择器特异度 Specificity

"#"id
.伪类
E 标签

2. CSS 继承

color可继承，未定义可以冒泡到其父级去寻找
某些属性会自动继承其父级的计算值，一般文字属性可继承
盒模型相关不可继承
显示继承 *{ xxx:inherit; }

3. CSS 求值过程解析

css中，每个属性都有一个初始值。 background-color的初始值为transparentmargin-left的初始值为0,可以使用initial关键字显式重置为初始值background-color：initial

css的求值规则

4. CSS 布局方式及相关技术

布局Layout

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

布局相关技术

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

width

height 容器有指定高度时，百分数才会生效
padding
border 样式颜色粗细有4个方向

margin

使用margin：auto水平居中
margin collapse
box-sizing：border-box
控制溢出内容 overflow visible hidden scroll

小技巧

通过设置容器宽高为0时就只剩下边框，通过设置不同的透明度得到不同的三角形

/CSS盒模型/

一、CSS 盒模型 - 行级

和其他行级盒子放在一行或者拆开成多行
盒模型中的width、height不适用 display：inline

IFC内排版规则：

盒子在一行内水平摆放
一行放不下，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内垂直对齐
避开浮动元素

inline-block

本身行级可以放在行盒
可以设置宽高
整体不会拆散成多行

处理连续的长的不换行超出容器的范围，可以使用 overflow-wrap

二、CSS 盒模型 - 块级

不和其他盒子并列摆放
适用于所有盒模型属性 display：block

1.块级排版上下文

某些容器会创建一个BFC

根元素
浮动、决定定位、inline-block
Flex子项和Grid子项
overFlow值不是bisible的块盒
display：flow-root

2.BFC内排版规则

盒子从上到下摆放
垂直margin合并
BFC内的margin 不会与外面的合并
BFC不会和浮动元素重叠

3.FlexBox

一种新的排版上下文，它可以控制子级盒子的：

摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

4.弹性盒子容器的对齐方式

横向 justify-content：

flex-start
flex-end
center
space-between
space-around
space-evenly

纵向 align-items:

flex-start
flex-end
center
stretch
baseline
Flexibility

5.可以设置子项的弹性：

当容器有剩余空间时，会伸展；容器空间不够时，会收缩

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩的基础长度.

6.网格Grid

使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占用那些行列

grid area 网格区域

7.float浮动多用于实现文字环绕

8.position 属性

static 默认值
relative 相对自身原本位置偏移，不脱离文档流
absolute 相对定位，相对非static祖先元素定位
flxed 相对视口绝对定位

position：relative

在常规流里面布局，相对于自己本应该在位置进行偏移，流内其他元素当它没有偏移时一样布局

position：absolute

脱离常规流
不会对流内元素布局造成影响
相对最近的非static祖先定位.

三、总结

通过这堂课的学习，夯实巩固了我对css的了解，发现了一些以前学习css没注意到细节，收获了一些在写css时的小细节小技巧，并且对css的工作流程有了更加清晰的认知。在布局方面多使用flex或者grid来实现页面的布局，让浮动回归最初实现文本环绕的功能。

四、引用

课程视频juejin.cn/course/byte…

MDN 上的CSS参考 developer.mozilla.org/zh-CN/docs/…

[ 前端与 HTML | 青训营笔记]