CSS

ps:之前学过一遍css,但是学的是最基础的的语法；在听了本次CSS课程中后发现好多之前没学过，所以这篇笔记很多课程中PPT的图片。

00_为什么要学习CSS

更丰富的交互行为和视觉效果，承载和展现更多的信息量，更精准的传递信息。

01_基础知识（层叠规则、选择器、继承、值和单位、盒模型）

01.1_层叠、优先级

层叠的三大规则：

1.样式表的来源 2.选择器的优先级 3.源码位置

————————————————————>

优先程序递减

1.样式表来源的重要排序

用户代理样式（浏览器默认样式）、用户样式表（很少有）、作者样式表

————————————————————>

优先程序递增

但是如果加上！important，则顺序改变，即：

作者样式表中的！important、用户样式表中的！important、用户代理样式中的！important

————————————————————>

优先程序递增

2.选择器的优先级

选择器的种类：

屏幕截图 2023-05-01 100159.png

选择器的优先级：

内联>id>class=attribute=pseudo-class(伪类选择器)>type=pseudo-elememt

*逻辑选择器本身不计入优先级，以参数最高的优先级为准，where（）优先级为0

3.源码顺序

按照源码出现的顺序，即最后出现的代码的优先级最高

*对于@import的样式，根据@import的顺序

*对于link和style标签的样式，根据其在document中的顺序决定

根据优先级引申出来的good practice

*选择器尽量少用id（不好复用）

*尽量不要用！important（灵活性会被压缩）

*自己的样式加载在引用库样式的后面

01.2_继承

屏幕截图 2023-05-01 101444.png

01.3_CSS的值和单位

屏幕截图 2023-05-01 101639.png

01.4_盒模型

屏幕截图 2023-05-01 102619.png

屏幕截图 2023-05-01 102706.png

负外边距

屏幕截图 2023-05-01 102723.png

margin负值最终减少的是外界可感知的宽高

02_布局(常规流、弹性布局、Grid、定位)

02.1_常规流

屏幕截图 2023-05-01 104314.png

屏幕截图 2023-05-01 110348.png 块级格式化上下文

屏幕截图 2023-05-01 110410.png

外边距塌陷

屏幕截图 2023-05-01 110442.png

屏幕截图 2023-05-01 110454.png 内联级格式化上下文

屏幕截图 2023-05-01 110512.png

02.2_弹性盒子布局

屏幕截图 2023-05-01 151601.png

屏幕截图 2023-05-01 151630.png 例1.灵活的文件长度省略

屏幕截图 2023-05-01 151705.png

例2.骰子

屏幕截图 2023-05-01 151720.png

02.3_网格布局（Grid）

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占用其中的一个单元格，也可以占据多行或者多列

屏幕截图 2023-05-01 152157.png

屏幕截图 2023-05-01 152211.png

例

屏幕截图 2023-05-01 152225.png

比较

屏幕截图 2023-05-01 152246.png

02.4_position

作用：为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。

当position的取值取非static时，可以使用top、right、bottom、left对其进行定位

屏幕截图 2023-05-01 152840.png

屏幕截图 2023-05-01 152857.png

03_层叠上下文（Stacking Content)

层叠上下文是对HTML元素的三位构想，将元素沿着垂直屏幕的虚构的Z轴排开

屏幕截图 2023-05-01 153831.png

形成层叠上下文的条件

屏幕截图 2023-05-01 153846.png

层叠上下文优先级图

屏幕截图 2023-05-01 153930.png

例1.

屏幕截图 2023-05-01 154056.png 例2.

屏幕截图 2023-05-01 154108.png

编写z-index的建议：

1.使用CSS变量或者预处理语言的变量，管理z-index的值；

2.将预设间隔设置为10或者100，方便后续的插入

04_变形、过渡、动画

04_1.transform变形

2D相关的：

transform：translate（移动），rotate（旋转）、scale（放缩）、matrix（变形矩阵）等

transform-origin：right top、center等，表示变形时依据的原点

3D相关：

屏幕截图 2023-05-01 155159.png

04.2_transition过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种节奏变化，过渡到终止状态

div{
transition:<property><duration><timing-function><delay>;
}
<!--其中timing-function一般有三种用法；线性（line）、贝塞尔曲线（cubic—bezier或ease—in等）、step（阶跃）  -->

04.3animation动画

屏幕截图 2023-05-01 155655.png

04.4_transform、transition、animation——性能相关

屏幕截图 2023-05-01 155750.png

05_响应式设计（响应式设计原则、媒体查询长度、相对长度、绝对长度和视口）

响应式遵循的原则

屏幕截图 2023-05-01 155914.png

05.1_媒体查询的使用

屏幕截图 2023-05-01 161545.png

05.2_设备像素、移动设备视口

设备像素（物理像素）：显示器上绘制的最小单位，显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。

*设备像素与设备相关，从出厂即固定。

dpi&&ppi

屏幕截图 2023-05-01 162042.png

CSS像素

屏幕截图 2023-05-01 162113.png

DRP设备像素比

屏幕截图 2023-05-01 162205.png

移动端的viewport

布局视口（viewport）是页面中html元素（根元素）的包含块，默认情况下，window.document.documentElement.clientWidth就是viewport的宽度。在移动设备中，默认的布局视口由于历史兼容PC屏幕的原因，并不符合需求，我们经常使用标签对viewport进行设置，来完成移动端的适配。

屏幕截图 2023-05-01 162225.png