## 字体

### 字体族

font-family: Microsoft YaHei, Heiti SC, sans-serif;font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体族（Sans-Serif）。

通用字体族：

- Serif衬线体
- Sans-Serif无衬线体
- Cursive手写体
- Fantasy夸张体
- Monospace等宽字体

使用Web Fonts： @font-face { font-family: 'CustomFont'; src: url(https://example.com/CustomFont.woff2) format('woff2'); }

### font复合属性

复合属性连写的font格式：`font:font-style font-weight font-size/line-height font-family;`

必须按顺序书写，并且字号和字体值（后两个）必须书写，否则font属性不生效。

## 文本

### 行高

p { line-height: 1.6; }

### 空白符

white-space属性设置如何处理元素内的空白，默认空白会被浏览器忽略。

值为nowrap：文本不会换行，会在同一行上继续，直到遇到
标签为止。

值为pre：空白会被保留，其行为方式类似 HTML 中的

标签。

值为pre-wrap：保留空白符，正常换行。

值为pre-line：合并空白符，保留换行符。

## 复合选择器

### 后代选择器

选中某元素的所有后代（包含儿子、孙子、重孙子），选择器之间用空格隔开。 /* 选中div下的a元素 */ div a { color: #000; }

### 子代选择器

选中某元素的子代元素（最近的子级），选择器之间用>隔开。 div > a { color: #000; }

### 并集选择器

选中多组标签设置相同的样式，选择器之间用逗号,隔开。 div, a { color: #000; }

### 交集选择器

选中同时满足多个条件的元素，选择器之间连写，没有任何符号。 div.box { color: #000; }

### 兄弟选择器

/* 选中div后相邻的兄弟p元素 */ div + p { color: green; } /* 选中div后的所有兄弟p元素 */ div ~ p { color: green; }

### 属性选择器

/* 选中具有title属性的元素 */ [title] { color: green; } /* 选中title属性值为hello的元素 */ [title="hello"] { color: green; } /* 选中title属性值以a开头的元素 */ [title^="a"] { color: green; } /* 选中title属性值以a结尾的元素 */ [title$="a"] { color: green; } /* 选中title属性值包含a的元素 */ [title*="a"] { color: green; }

## 伪类选择器

伪类很像类，但不是类，是元素特殊状态的一种描述。伪类表示元素状态，选中元素的某个状态设置样式。

### 状态伪类

超链接一共有4个状态，给超链接设置状态时，需要按LVHA（LV哈）顺序书写。

- :link访问前
- :visited访问后
- :hover鼠标悬停
- :active点击时（激活）

### 结构伪类

根据元素的结构关系查找元素。

- E:first-child查找第一个E元素
- E:last-child查找最后一个E元素
- E:nth-child(N) 查找第N个E元素（第一个元素N值为1）
- :first-of-type所有同类型兄弟元素中的第一个
- :last-of-type所有同类型兄弟元素中的最后一个
- :nth-of-type(n) 所有同类型兄弟元素中的第n个

nth-child(公式)用法：

- 2n：偶数标签
- 2n+1：奇数标签（或2n-1）
- 5n：找到5的倍数的标签
- n+5：找到第5个以后的标签（-n+5为第5个以前的标签）

下面了解即可：

1. :nth-last-child(n) 所有兄弟元素中的倒数第n个
2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
3. :only-child选择没有兄弟的元素（独生子女）
4. :only-of-type选择没有同类型兄弟的元素
5. :root根元素
6. :empty内容为空元素（空格也算内容）

### 否定伪类

:not(选择器) 排除满足括号中条件的元素。

### UI伪类

1. :checked 被选中的复选框或单选按钮
2. :enable 可用的表单元素（没有 disabled 属性）
3. :disabled 不可用的表单元素（有disabled 属性）

### 目标伪类（了解）

:target 选中锚点指向的元素。 <style> div { background: gray; height: 300px; } div:target { background: green; } </style>

<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>

<div id="one">第1个</div>
<br />
<div id="two">第2个</div>

### 语言伪类（了解）

:lang()根据指定的语言选择元素（本质是看lang属性的值）。

## 伪元素选择器

作用：选中元素中的一些特殊位置。创建虚拟元素（伪元素），用来摆放装饰性的内容。

- E::before在E元素里面最前面添加一个伪元素
- E::after在E元素里面最后面添加一个伪元素
- ::first-letter选中元素中的第一个文字
- ::first-line选中元素中的第一行文字
- ::selection选中被鼠标选中的内容
- ::placeholder选中输入框的提示文字

必须设置`content: "内容";`属性，用来设置伪元素内容，如果没有内容，则内容留空即可。伪元素默认是行内显示模式，权重和标签选择器相同。

## CSS三大特性

### 继承性

子级默认继承父级的文字控制属性。

### 层叠性

相同的属性会覆盖，即后面的属性覆盖全面的属性。不同的属性会叠加，即不同的属性都生效。

### 优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

#### 叠加计算

如果是复合选择器，则需要权重叠加计算。

公式：(行内样式，id选择器个数，类选择器个数，标签选择器个数)

规则：从左往右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。!important权重最高，继承权重最低。

## 显示模式

块级（block）：独占一行；宽高属性生效；默认宽度是父级的100%

行内（inline）：一行共存多个；宽高属性不生效；宽高由内容撑开

行内块（inline-block）：一行共存多个；宽高属性生效；宽高默认由内容撑开

## 盒子模型

### 盒子尺寸

盒子尺寸=内容尺寸+内边距尺寸+border尺寸。外边距margin不会影响盒子的大小，但会影响盒子的位置。

给盒子加border/padding会撑大盒子，解决方法有二：

- 手动做减法，减掉border/padding的尺寸
- 启动内减模式：box-sizing: border-box;

### 外边距问题

#### 合并现象

垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效。

#### 塌陷问题

父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。

解决方法：

- 取消子级margin，父级设置padding（推荐）
- 父级设置overflow: hidden;
- 父级设置border-top

### 行内元素边距问题

行内元素添加margin和padding，无法改变元素垂直位置。

解决方法：给行内元素添加行高（line-height）来改变垂直位置。

### 圆角

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%。 div { width: 200px; height: 200px; background-color: red; border-radius: 100px; /* border-radius: 50%; */ }胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半。

### 布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。 即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。例如：text-align、line-height、text-indent等。
2. 如何让子元素，在父亲中水平居中： 若子元素为块元素，给父元素加上：margin: 0 auto; 。 若子元素为行内元素、行内块元素，给父元素加上：text-align:center 。
3. 如何让子元素，在父亲中垂直居中： 若子元素为块元素，给子元素加上：margin-top ，值为：(父元素content －子元素盒子总高) / 2。 若子元素为行内元素、行内块元素：让父元素的height = line-height ，每个子元素都加上：verticalalign: middle; 。 补充：若想绝对垂直居中，父元素 font-size 设置为0。

### 元素之间的空白问题

产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。 解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置 font-size: 0 ，再给需要显示文字的元素，单独设置字体大小（推 荐）。

### 行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。 解决方案： 方案一：给行内块设置vertical，值不为baseline即可，设置为 middel、bottom、top均可。 方案二：若父元素中只有一张图片，设置图片为 display: block。 方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置fontsize。

## 浮动（了解）

布局相关技术有：

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

清除浮动推荐使用双伪元素法： /* before解决外边距塌陷问题 */ .clearfix::before, .clearfix::after { content: ''; display: table; }

/* after清除浮动 */
.clearfix::after {
clear: both;
}

## Flex布局

给父元素设置`display: flex;`，子元素可以自动挤压或拉伸。

### 组成

Flex组成部分：

- 弹性容器（创建容器：display: flex;）
- 弹性盒子
- 主轴（默认在水平方向，对齐方式：justify-content）
- 侧轴/交叉轴（默认在垂直方向，对齐方式：align-items所有弹性盒子、align-self某个弹性盒子）

### 其他属性

- 修改主轴方向：flex-direction属性
- 弹性伸缩比：flex属性（控制弹性盒子主轴方向的尺寸，表示占用父级剩余尺寸的份数，属性值：整数数字）
- 弹性盒子换行：flex-wrap属性（属性值：wrap换行，nowrap不换行）
- 行对齐方式：align-content属性（对单行弹性盒子不生效）

## 定位

灵活改变盒子在网页中的位置，属性：position。设置盒子的位置用边偏移属性：left、right、top、bottom。

### 相对定位

改变位置的参照物是自己原来的位置，不脱标（占位），标签显示模式不变。 div { position: relative; top: 100px; left: 100px; }

### 绝对定位

- 脱标（不占位）
- 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视区改位置
- 显示模式会改变：宽高生效，具备了行内块的特点

工作中一般不单独使用相对或绝对定位，都是配合着使用：子级绝对定位，父级相对定位（子绝父相）。

### 定位居中

首先设置绝对定位，水平垂直边偏移为50%，最后transform: translate(-50%, -50%)。 div { position: absolute; left: 50%; top: 50%; /* 50% 就是自己宽高的一半 */ transform: translate(-50%, -50%); }

### 固定定位

元素的位置在网页滚动时不会改变。

- 脱标（不占位）
- 参照物：浏览器窗口
- 显示模式特点：宽高生效，具备了行内块的特点

### z-index

即堆叠层级，默认按照标签书写顺序，后来者居上。

z-index默认是0，取值越大显示顺序越靠上。

### 总结
定位模式属性值是否脱标显示模式参照物相对定位relative否保持标签原有显示模式自己原来位置绝对定位absolute是行内块特点已经定位的祖先元素；浏览器可视区固定定位fixed是行内块特点浏览器窗口
## 实用代码

### 清除默认样式

* { margin: 0; padding: 0; }

### 版心

/* 版心 */ .wrapper { margin: 0 auto; width: 1200px; }

## CSS精灵

即CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再精确定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

实现步骤：

- 创建盒子，盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加background-position属性，改变背景图位置 div { width: 100px; height: 100px; background-color: pink; background-image: url(./123.jpg); background-position: -50px -50px; }

## 字体图标

展示的是图标，本质是字体。作用是在网页中添加简单的、颜色单一的小图标。

字体图标下载：[https://www.iconfont.cn/](https://www.iconfont.cn/)

## 垂直对齐方式

属性名：vertical-align，默认是基线对齐（baseline），其他属性值：top（颈部对齐）、middle（居中对齐）、bottom（顶部对齐）。

浏览器把行内块、行内标签当做文字处理，默认按基线对齐。

## 过渡transition

可以为一个元素在不同状态之间切换的时候添加过渡效果。 img { width: 100px; height: 100px; transition: all 1s; }

img:hover {
width: 200px;
height: 200px;
}

## 移动

### 平面转换transform

平面转换又叫2D转换，改变盒子在平面内的形态（平移translate()、旋转rotate()、缩放scale()、倾斜skew()），一般与过渡配合使用，为元素添加动态效果。

### 线性渐变

属性：`background-image: linear-gradient();`background-image: linear-gradient( 渐变方向（to 方位名词 或 角度度数）, 颜色1 终点位置, 颜色2 终点位置, ...... );如果不指定方向，默认从上到下渐变：

- to right：从左侧开始的线性渐变
- to bottom right：从左上角到右下角的线性渐变
- 45deg：45°的线性渐变

/* 蓝色渐变到红色 */ linear-gradient(blue, red); /* 蓝色占80%渐变到红色 */ linear-gradient(blue 80%, red); /* 多个终止色 */ linear-gradient(blue, red, yellow, green, orange); /* 透明色 */ linear-gradient(transparent, rgba(0, 0, 0, 0.5));

### 径向渐变

属性：`background-image: radial-gradient();`background-image: radial-gradient( 半径 at 圆心位置（半径可以是2条，则为椭圆）, 颜色1 终点位置, 颜色2 终点位置, ...... );

### 空间转换

#### 视距perspective

指定了观察者与Z=0平面的距离，为元素添加透视效果（近大远小、近实远虚）。

perspective属性要添加给直接父级，取值范围800-1200（经验值）。

.father { perspective: 1000px; } .son { width: 100px; height: 100px; margin: 100px auto; background-color: rebeccapurple; transition: all 0.5s; } .son:hover { transform: translateZ(-300px); }

#### 旋转

左手法则：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

- rotateX(60deg)
- rotateY(60deg)
- rotateZ(60deg)

#### 立体呈现

作用是设置元素的子元素是位于3D空间还是平面中，属性名：transform-style，属性值：preserve-3d（子级处于3D空间），flat（子级处于平面中）。

## 动画

动画animation是加强版的过渡。实现步骤：

1. 定义动画
2. 使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态。 .box { width: 100px; height: 100px; background-color: pink; /* 使用动画 */ animation: change 1s; } /* 定义动画：宽度从100变化到800 */ @keyframes change { from { width: 100px; } to { width: 800px; } } /* 定义动画 另一种写法 */ @keyframes change2 { 0% { width: 100px; height: 100px; } 20% { width: 300px; height: 200px; } 100% { width: 800px; height: 300px; } }

## 屏幕分辨率

- 物理分辨率：即硬件分辨率，出厂设置好的
- 逻辑分辨率：缩放调节的分辨率，由软件/驱动设置（写代码参考逻辑分辨率）

## 长度单位

1. px：像素
2. em：相对于当前元素或其父元素font-size的倍数
3. rem：相对于根元素font-size的倍数，html标签就是根，1rem = 1HTML字号大小
4. %：相对父元素计算

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

### vw与vh

是相对单位，相对视口的尺寸（viewport width，viewport height）计算结果。

1vw = 1/100视口宽度，1vh = 1/100视口高度。

## 媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。当某个条件成立，执行对应的CSS样式。

@media (width: 500px) { body { background-color: red; } }

### 完整写法（了解）

@media 媒体类型 and (媒体特性) { CSS代码 }

媒体类型用来区分设备类型：

- 屏幕 - screen - 带屏幕的设备
- 打印预览 - print - 打印原来模式
- 阅读器 - speech - 屏幕阅读模式
- 不区分类型 - all - 默认值，包括以上3种情形

媒体特性用来描述媒体类型的具体特征：

- 视口宽高 - width、height
- 视口最大/最小宽高 - max-width、max-height、min-width、min-height
- 屏幕方向 - orientation（portrait竖屏、landscape横屏）

逻辑操作符：and、only、not。

CSS 资源：

- MDN：[https://developer.mozilla.org/zh-CN/](https://developer.mozilla.org/zh-CN/)
- W3C CSS 规范：[https://www.w3.org/Style/CSS/](https://www.w3.org/Style/CSS/)


CSS3基础知识学习笔记

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码。
![Vue生命周期函数](https://thumbsnap.com/i/ojP1dPcT.jpg)
## 创建阶段（准备数据）

beforeCreate()、created()

## 挂载前阶段（渲染模板）

beforeMount()、mounted()

## 更新阶段

beforeUpdate()、updated()

## 卸载阶段

beforeDestroy()、destroyed()


Vue生命周期函数（钩子函数）

## tldraw

是一款开源在线画板，支持多人协作数字白板，具有手绘风格和智能箭头、捕捉和便签等便捷功能，开箱即用，并且可以导出 svg 等图片格式，可以作为组件嵌入到其他应用中，它的编辑器、用户界面和其他底层库都是开源的，可以自行搭建。

三大优点：

- 界面非常简洁，且有设计感
- 手绘风格很好看，不枯燥
- 可以共享协作

## 网站地址

tldraw：[https://www.tldraw.com/](https://www.tldraw.com/)


tldraw-开源在线画板 多人协作数字白板

## 科普中国网

是中国科学技术协会主办的科普网站，致力于科技知识的传播和普及。网站内容涵盖科教、健康、生活、军事、科幻、人物等多个方面,系统全面地介绍各类科普知识。

平台上聚集大量优秀的科普作者，创作生动活泼、通俗易懂的科普文章，让科学走进大众生活。用户可以在分类栏目中找到感兴趣的科普内容，网站也提供科普视频、专题等丰富形式，平台还设有科普号，发布科普动态。

## 网站地址

科普中国网：[https://www.kepuchina.cn/](https://www.kepuchina.cn/)


科普中国网-科学技术协会主办的科普网站

## 盘友圈

是一个在线网盘搜索引擎，阿里云盘、百度网盘、夸克网盘资源搜索工具，支持百度网盘、阿里云盘和夸克网盘资源搜索，使用无需注册登录，即可搜索主流网盘的资源，收录非常丰富，需要找什么网盘资源直接搜索即可。

## 网站地址

盘友圈：[https://panyq.com/](https://panyq.com/)


盘友圈-在线网盘搜索引擎 百度阿里夸克资源搜索

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。