Day one
字体图标
使用字体图标技巧实现网页中简洁的图标效果。
字体图标展示的是图标，本质是字体。处理简单的、颜色单一的图片。
字体图标的优点：
➢ 灵活性：灵活地修改样式，例如：尺寸、颜色等
➢ 轻量级：体积小、渲染快、降低服务器请求次数
➢ 兼容性：几乎兼容所有主流浏览器
使用方法：
下载字体包，使用字体图标。
图标库：Iconfont：https://www.iconfont.cn/
下载字体包：登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地；
使用字体图标 – 类名：
<link rel="stylesheet" href="./iconfont.css"
调用图标对应的类名，必须调用2个类名:iconfont类：基本样式，包含字体的使用等;icon-xxx：图标对应的类名。代码如下：
<span class="iconfont icon-xxx"></span>
如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传矢量图生成字体图标。与设计师沟通，得到SVG矢量图，IconFont网站上传图标，下载使用。
上传矢量图：上传 → 上传SVG图标，浏览本地图标 → 去除颜色提交，加入购物车 → 下载使用。
平面转换：transform
1 平面转换–位移
平面转换：改变盒子在平面内的形态（位移、旋转、缩放）。
语法：transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
➢ 像素单位数值
➢ 百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下。
translate()如果只给出一个值, 表示x轴方向移动距离；单独设置某个方向的移动距离：translateX() & translateY()。
2 平面转换–旋转
语法:transform: rotate(角度); (注意：角度单位是deg)
角度取值为正, 则顺时针旋转；取值为负, 则逆时针旋转。
转换原点：默认圆点是盒子中心点。
语法： transform-origin: 原点水平位置 原点垂直位置;
取值：
➢ 方位名词（left、top、right、bottom、center）
➢ 像素单位数值
➢ 百分比（参照盒子自身尺寸计算）
多重转换：
transform：translate() rotate();
注意：旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。
3 平面转换–缩放
使用scale改变元素的尺寸。
语法： transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放。transform: scale(缩放倍数); scale值大于1表示放大, scale值小于1表示缩小。
渐变
渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景。
语法：
background-image:linera-gradient(
transparent,
rgba(0,0,0,0.6)
);
Day two
空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换。
1 空间位移
属性：transform
语法：
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）：
像素单位数值，百分比
2 透视：perspective
生活中，同一个物体，观察距离不同，视觉上近大远小、近清楚远模糊。
Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果。
属性（添加给父级）：
➢ perspective: 值;
➢ 取值：像素单位数值， 数值一般在800 – 1200。
作用：
➢ 空间转换时，为元素添加近大远小、近实远虚的视觉效果。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
3 空间旋转
语法：
➢ transform: rotateZ(值);
➢ transform: rotateX(值);
➢ transform: rotateY(值);
方向的判断：左手法则
➢ 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。（负值顺时针旋转，正值逆时针旋转）
拓展：（基本不用，仅了解）
➢ rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度。
➢ x，y，z 取值为0-1之间的数字。
4 立体呈现
使用perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。
立体的实现方法：
➢ 给父元素添加 transform-style: preserve-3d;
➢ 按需求设置子盒子的位置（位移或旋转）。
5 空间缩放：scale
语法:
➢ transform: scaleX(倍数);
➢ transform: scaleY(倍数);
➢ transform: scaleZ(倍数);
➢ transform: scale3d(x, y, z);
CSS3动画
过渡可以实现什么效果？
实现2个状态间的变化过程。
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，构成动画的最小单元：帧或动画帧。
动画的实现步骤：
- 定义动画
两个状态间的变化
多个状态间的变化
- 使用动画
animation: 动画名称 动画花费时长;
动画的复合属性：
注意：
➢ 动画名称和动画时长必须赋值
➢ 取值不分先后顺序
➢ 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
动画的拆分属性：
使用steps实现逐帧动画：
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
- animation-timing-function: steps(N)；
- 将动画过程等分成N份
精灵动画制作步骤
➢ 准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图。
➢ 定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）。
➢ 使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同；
添加无限重复效果。
Day Three
移动端基本知识
PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心；手机屏幕小， 网页宽度多数为100%。
如何在电脑里面边写代码边调试移动端网页效果？谷歌模拟器。
屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量。
分辨率分类：
物理分辨率是生产屏幕时就固定的，它是不可被改变的。
逻辑分辨率是由软件（驱动）决定的。
制作网页参考逻辑分辨率。
视口：使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
手机屏幕尺寸都不同， 网页宽度为100%；网页的宽度和逻辑分辨率尺寸相同。
默认情况下，网页的宽度和逻辑分辨率相同吗？不同， 默认网页宽度是980px。
目标：网页宽度和设备宽度(分辨率)相同。
解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport：视口，width=device-width：视口宽度 = 设备宽度，initial-scale=1.0：缩放1倍（不缩放）。
Flex布局
思考：
1.多个盒子横向排列使用什么属性？浮动
2.设置盒子间的间距使用什么属性？margin
3.需要注意什么问题？浮动的盒子脱标
Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
1 Flex布局模型构成
作用：
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。Flex布局非常适合结构化布局。
设置方式：
父元素添加 display: flex，子元素可以自动的挤压或拉伸。
组成部分：
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴
2 主轴对齐方式
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
修改主轴对齐方式属性: justify-content
修改侧轴对齐方式属性:align-items
- align-items（添加到弹性容器）
- align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
3 伸缩比
只占用父盒子剩余尺寸份数。
属性： flex : 值;
取值分类：数值(整数)；
4 主轴方向
Flex布局模型中，弹性盒子默认沿着水平方向排列。
如何实现内容垂直排列？使用flex-direction改变元素排列方向。
主轴默认是水平方向, 侧轴默认是垂直方向。
修改主轴方向属性: flex-direction。
5 弹性盒子换行
目标：使用flex-wrap实现弹性盒子多行排列效果。
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content；取值与justify-content基本相同。
rem移动端适配
rem ： 目前多数企业在用的解决方案。
vw / vh：未来的解决方案。
rem，类似于px，是个尺寸单位，用来设置网页元素的尺寸。
网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）。
px单位或百分比布局：
- px单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
适配方案：rem和vw/vh。
rem单位：
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小
手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。
当某个条件成立, 执行对应的CSS样式。
使用媒体查询设置差异化CSS样式：
写法。例如
@media (width:320px) {
html {
font-size: 32px;
}
}
其中width:320px是媒体特征，检验视口的宽度。font-size: 32px;是根字号。
设备宽度不同，HTML标签字号设置多少合适？
- 设备宽度大，元素尺寸大
- 设备宽度小，元素尺寸小
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
工作中，书写代码的尺寸要参照设计稿尺寸，设计稿中是px还是rem？px
确定设计稿对应的设备的HTML标签字号：
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
rem单位的尺寸：
N * 37.5 = 68 → N = 68 / 37.5（例如68px宽度）
rem单位的尺寸 = px单位数值 / 基准根字号
使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果。
flexible.js是手淘开发出的一个用来适配移动端的js框架。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
代码图：
Less
使用Less运算写法完成px单位到rem单位的转换。
在px单位转换到rem单位过程中，除法运算是最麻烦的。CSS不支持计算写法，可以通过Less实现。
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
Easy Less : vscode插件， 作用：less文件保存自动生成css文件。
注释：
单行注释：
语法：// 注释内容
快捷键：ctrl + /
块注释：
语法：/* 注释内容 */
快捷键： shift + alt + A
运算：
加、减、乘直接书写计算表达式，除法需要添加 小括号 或 . 。
注意：
表达式存在多个单位以第一个单位为准。
例如：
.box {
width: 100 + 50px;
height: 5 * 32px;
width: (100 / 4px);
height: 100 ./ 4px;
}
嵌套：
作用：快速生成后代选择器。
语法：
注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用。
语法：
Less变量
网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？
方法一：逐一修改属性值（太繁琐）；方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名。
变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值;
@fontColor: pink;
使用变量：CSS属性：@变量名;
.box {
color: @fontColor;
}
a {
color: @fontColor;
}
Less导入
开发网站时，网页如何引入公共样式？
- CSS：书写link标签
- Less：导入
导入: @import “文件路径”;
@import 'base.less';
@import '01-体验less';
如果是less文件， 可以省略后缀.less。
使用Less语法导出CSS文件
方法一：
配置EasyLess插件， 实现所有Less有相同的导出路径。
配置插件： 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）。
方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /。
禁止导出
并不是所有的Less文件都需要导出CSS文件。
在less文件第一行添加: // out: false。
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
