这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
走进前端技术栈
一 什么是CSS
CSS全称为Cascading Style Sheets，其是用来定义页面元素的样式。
CSS工作流程如下：
二 如何在页面中使用CSS
一般有三种方式，分别是外链、嵌入、内联。常用的是外链方式。
- 外链是在
<head></head>标签里面写的，而其CSS内容在下图的style.css文件里面写。 - 内嵌也是在
<head></head>里面写的，直接在<style></style>标签里面填写CSS内容。 - 内联则是直接在
<body></body>标签中的标签内写CSS内容。
三 选择器Selector
1 选择器概念
选择器是为了找到页面中的元素，以便给它们设置样式。
使用多种方式选择元素：
- 按照标签名、类名或id
- 按照属性
- 按照DOM数中的位置
2 选择器种类
-
通配选择器
如果想选中所有标签的话，用通配选择器，例子如下：
-
标签选择器
标签选择器则是以标签命名，对该标签金勋设置样式，例子如下：
-
id选择器
可以给某些标签设置id，再给对应的id设置样式，在CSS中的id名要在前面加上一个#,例子如下：
- 类选择器 在标签中用class="类选择器名" 给类选择器命名，在CSS中则用". 类选择器名" 给这个类选择器设置样式，例子如下：
- 属性选择器 通过这个元素的属性或属性值来选中这个元素。
若想实现所有元素有这个选中的属性和属性值都设置样式，则直接在CSS中的选择器中写"[属性或属性值]",例子如下：
若想实现某个元素的选中的属性或属性值，则要在CSS选择器中写"标签名[属性或属性值]",例子如下：
若想对属性值匹配到某个条件才被选中的话，可以用以下这些方式
-
"^="：表示若在该符号后面的内容处于开头的话，则被选中 -
"$="：表示若在该符号后面的内容处于末尾的话，则被选中
四 伪类
伪类是不基于标签和属性定位元素
有两种伪类，分别为：状态伪类、结构性伪类
-
状态伪类
当用户与页面交互触发哪种元素的哪种状态时，对该元素的该状态设置样式。例子如下：
-
a:link ：表示当该链接默认状态时 -
a:visited ： 表示该链接被访问过时 -
a:hover ： 表示鼠标移到该链接时。 -
a:active ： 表示鼠标点击该链接时 -
结构性伪类
结构性伪类：根据DOM节点在DOM处出现的位置来决定是否选中该元素。例子如下：
-
li:first-child ： 表示第一个li元素 -
li:last-child ： 表示最后一个li元素
五 组合
组合方式：
例子如下：
上图红框表示，其类选择器名字为error且标签为input的元素。
选择器组
上图第一个红框表示同时给多个选择器定义样式，用逗号给各个选择器分开，第二个人红框表示同时给两个状态伪类定义样式。
六 颜色
1 颜色-RGB
其数值都为0~255，有两种写法，其对应颜色为红绿蓝。
2 颜色-HSL
与颜色特征关联起来
- Hue的0为红色
- Saturation的0为灰色
- Lightness的0为黑色
3 颜色关键字
4 颜色alpha透明度
其范围为0~1，当为1时，则是不透明
七 字体
1 字体font-family
- 由于有些字体浏览器可能没有，所以一般会写多几个字体，会一层层匹配，若第一个字体没有，则匹配第二个若第二个也没有，则匹配第三个......最后一般写通用字体族，这是为了防止当我前面想要的字体都没有时。
- 若写的字体有中英文，把英文字体写在前面，中文字体写在后面（因为若中文字体写前面，英文的可能匹配到中文字体，而用不到英文字体；而中文用不到英文字体，所以可以在前面写英文字体。）这样子可以区分中英文字体。
2 通用字体族
是一种风格或者分类，不是一种特殊字体。
3 使用Web Fonts
浏览器从url去下载这个字体文件，再用这个字体进行渲染。
4 字体大小:font-size
- 关键字
-
small、medium、large - 长度
-
px、em - 百分数
-
相对于父元素字体大小
5 字体粗细font-weight
数字越大，字体越粗（要看字体是否支持）
6 字体行高
两行文字的基准线
7 white-space
定义元素内的空白应该如何处理
- normal：表示默认的，会把多个空格合并掉
- nowrap：表示强制不换行
- pre： 表示保留所有的，若代码里面有空格和换行，会保留下来
- pre-wrap：表示一行内显示不下时会换行，还会保留空格
- pre-line：表示需要合并空格，但是保留换行
八 调试CSS
右键点击页面，选择【检查】
使用快捷键
Ctrl+Shift+I（windows)
Cmd+Opt+I(Mac)
九 参考学习
CSS - 学习 Web 开发 | MDN (mozilla.org)
CSS相关文章Learn CSS (web.dev)
深入CSS（上）
一 选择器的特异度
特异度指选择器特殊程度，越特殊，选择器优先级越高。优先级高的可以覆盖掉优先级低的样式。
第一个的特异度更高（可以122>22这样子比出来）
二 CSS继承
某些属性会自动继承其父元素的计算值，除非显式指定某一个值。（一般字体可以，盒模型相关的元素不可以）
1 显式继承
若想让不能继承父元素的元素，继承其父元素，可以用到显式继承inherit
该红框表示让所有元素从父级去继承。
2 初始值
- CSS中，每个属性都有一个初始值
-
background-color的初始值为transparent -
margin-left的初始值为0 - 可以使用Initial关键字显式重置为初始值
-
background-color:initial
三 CSS求值过程解析
要特别区分一下计算值和使用值，如果继承父元素的话，是继承其计算值的。
四 CSS布局方式及相关技术
1 什么是布局
布局是确定内容的大小和位置的算法，是依据元素、容器、兄弟节点和内容等信息来计算的。
2 布局相关技术
- 常规流：也叫正常流，就按照正常的规则去行动，例如块级和行级规则，块级从上往下去摆，行级像文字一样一行行去书写。
- 浮动：可以把一些元素设置成浮动，例如图片
- 绝对定位：可以盖在常规流的上面，可以改变一些位置，不被常规流影响。
3 常规流的盒模型
把每个元素理解成如下的一个盒子容器，有外边距、边框、内边距，内容。
在CSS中指定宽度和高度默认是指定内容这部分的。
- Width
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的 content box 宽度
- height
- 指定 content box 宽度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对于容器的 content box 高度
- 容器有指定的高度时，百分数才生效。
- padding
- 指定元素的四个方向的内边距
- 百分数相对于容器宽度
- border
指定容器边框样式、粗细、颜色
当把该容器的宽度和高度设置为0时，得到下面只有边框的图
- margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度
当两个margin重合时，会取最大那个宽度，而不是二者合并
- box-sizing:border-box
其宽度和高度从border这里开始算起，包含border、padding、content这部分
例子如下：
此时a中的宽度100%，指的是content宽度的100%，也就是这段文字
而b中由于设置了 box-sizing:border-box，其宽度100%指包含了border、padding、content在内的这部分。
- overflow
对于溢出部分，用overflow控制其溢出部分如何展示
- visible：溢出部分如常展示（默认）
- hidden：把溢出部分截掉
- scroll：可以滚动，来展示这部分内容
深入CSS（下）
一 块级和行级的区别
块级：
- 不和其他盒子并列摆放
- 适用于所有的盒模型属性
- 生成块级盒子
- display:block
- 块级元素有body、article、div、main、section、h1-6、p、ul、li等。
行级：
- 和其他行级盒子一起放在一行或拆成多行
- 盒模型中的width、height不适用
- 生成行级盒子
- 内容分散在多个行盒（line box）中
- display:inline
- 行级元素有soan、em、strong、cite、code等。
display属性：
1 行级排版上下文
其全程为Inline Formattin Context(IFC)，只包含行级盒子的容器会创建一个IFC，IFC内的排版规则如下：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-algn决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
2 块级排版上下文
全称为Block Formatting Context(BFC),在某些容器会创建一个BFC，以下这些会创建BFC：
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root BFC内的排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会和外面的合并
- BFC不会和浮动元素重叠
3 Flex Box
Flex Box说一种新的排版上下文，它可以控制子级盒子的：
例子如下：
4 主轴与侧轴
通过justify-content来控制flex主轴布局
可以通过align-items来控制flex侧轴布局
5 Flexibility
Flexibility可以设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow：有剩余空间时的伸展能力
- flex-shrink：容器空间不足时收缩能力
- flex-basis：没有伸展或收缩时的基础长度
例子如下：
对于flex这些属性可以缩写，如下左边为缩写：
二 Flex Box布局与Grid布局
1 Flex Box布局与Grid布局区别
Flex布局是一维的，从左到右；而Grid布局是二维的
2 display:grid
3 如何划分网格
- colums表示列，划分的是每列的宽度
- rows表示行，划分的是每行的高度
4 grid line网格线
通过给每条线标上序号，可以通过线的标号来表示这条线
例子如下：
直接看看不到网格线，可以通过浏览器开发工具来检查，看到这个网格线
5 grid area网格区域
三 float浮动
可以实现文字环绕效果，例子如下
四 绝对定位
position属性
position:relative
position:absolute
若其父级为relative，则其的位置按该父级进行定位。若其父级不是relative，则一直向上看其父级的父级，若都不是relative，则其的位置直接按其根元素进行定位。
例子如下：
position:fixed
相对于视口绝对定位 例子如下：
课后个人总结
本节课复习了CSS基础概念，对于CSS的工作流程、原理、页面中CSS使用方法、CSS选择器的特异度、继承、求值过程、布局方式、盒模型的块级和行级等得到清楚的认识，对于CSS的认识更加深刻了。尤其是CSS选择器的特异度、布局方式和盒模型知识点比较重要，也容易搞混，这部分知识点要在平时中多实践，多点理解。
