壹、❗❗ 移动Web
一、过渡
transition: property duration timing-function delay;
property : 规定过渡效果所针对的CSS属性名称
duration : 规定过渡所需要的时间
timing-function : 规定过渡的速度曲线
linear : 匀速
ease : 慢速开始，然后变快，慢速结束
delay : 规定过渡延迟多长时间开始执行
二、平面转换
- 行内元素添加 transform 不生效
- ⚠ 添加 transform 属性的元素，优先级 高于 其他元素
- 添加 transform 属性的元素不会影响其他盒子的位置
2.1 位移
- 正负 百分比（相对于盒子自身尺寸）、正负像素值
- 如果只给 一个值，表示 x轴方向 移动的距离
- ⚠ 添加 transform 属性的元素 不会影响 其他盒子的位置
- margin 会影响其他盒子的位置
- 定位不会影响其他元素的位置
transform: translate(水平移动距离, 垂直移动距离);
transform: translateX();
transform: trasnlateY();
- 拓展：
- 子盒子在父盒子中居中（三种方法：定位+margin、定位+transform、flex[justify-content、align-items]）
-
.son { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // 不影响其他盒子的位置 }
2.2 旋转
取值为 正，则表示 顺时针 取值为 负，则表示 逆时针
transform: rotate(度数);
正负度数（deg）
transform: translate() rotace(); --- 复合属性（旋转会改变坐标轴方向）
- 拓展：
- 旋转原点
-
transform-origin: 原点水平位置 原点垂直位置; 像素单位数值 方位名词 百分比（参照盒子自身尺寸）
2.3 缩放
给盒子加scale，盒子里的一切都会跟着变化 不会影响其他盒子的位置
transform: scale(X轴缩放倍数, Y轴缩放倍数);
scale > 1 =>放大，scale < 1 => 缩小
scale 只有一个值表示 X,Y轴等比例缩放
2.4 渐变
background-image: linear-gradient(to方向,颜色1,颜色2, ... ,颜色n);
transparent --- 透明
- 拓展：
- opacity --- 不透明度属性（ 0[ 完全透明 ] <= opacity <=1[ 不透明 ] ）
- 对图像，颜色或者页面中的其他元素都有效
- 给父元素设置 opacity ，所有的子元素都会继承 opacity 属性
- 当 opacity=0 的时候，完全透明，但是元素还是会占据原来的位置
三、空间转换
3.1 空间位移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ(); // Z轴的位移距离要依赖 透视属性 才能看见
像素单位数值
百分比
3.2 透视属性（添加给父级）
- 让 子元素 具有 透视属性，**元素本身 **默认还是 平面元素
perspective: 800px~1200px(建议取值);
空间转换时，为元素添加 近大远小 的效果
3.3 空间旋转
- 左手法则：
- 左手握住旋转轴, 拇指指向正方向, 手指弯曲方向为旋转正方向
transform: rotate3d(x, y, z, 角度度数); // x, y, z --- x, y, z取值为 0~1 之间的数字 自定义一个旋转轴转动
transform: rotateX(值);
transform: rotateY(值);
transform: rotateZ(值);
3.4 立体呈现 （添加给父级）
- 让 子元素 处于真正的 3D空间 内
transform-style: preserve-3d;
使子元素处于3d空间
3.5 空间缩放
transform: scale3d(x, y, z);
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
四、动画
4.1 定义动画
-
完成 --> 两个状态之间的变化
@keyframes 动画名称 {
from {}
to {}
}
-
完成 --> 多个状态间的变化
@keyframes 动画名称 {
0% {}
10% {}
15% {}
.
.
.
100% {} /* 这里的百分数表示这一段动画占总时间的多少 */
}
- 如果盒子默认状态和动画开始状态一样，可以省略初始状态
4.2 使用动画
动画名称 和 动画时间 必须 赋值 取值不分先后 如果有两个时间值，第一个表示 动画时长，第二个表示 延迟时间
animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;
infinite --- 无限循环
alternate --- 反向运动
linear --- 匀速
backwards --- 动画停留在最初的状态
forwards --- 动画停留在结束的状态
- 拆分写法：
- 拓展：
- 逐帧动画
- 速度曲线：steps(N)，把动画的过程等分成N份（N与精灵图小图片个数相等）
-
animation: figure 1s infinite steps(12);
- 能够使用 animation属性 给一个元素加多个动画
animation: 动画1, 动画2, 动画N; - 拓展：暂停动画
-
animation-play-state: paused;
-
五、❗❗ Flex布局
逻辑分辨率(1X1)px = 物理分辨率(2X2)px 制作网页参考的是逻辑分辨率 视口标签作用（移动端）：实现视口宽度与设备宽度保持一致，如果没有视口宽度标签，html的宽度是980px PC端视口 宽度为 设备的逻辑分辨率
- 布局：
- 百分比布局（流式布局）
- 宽度自适应，高度固定
- Flex布局（弹性布局）
- 避免浮动脱标的问题（避免浮动布局中脱离文档流现象发生）
- 组成：弹性容器（父元素）+ 弹性盒子（子盒子）
- 弹性盒子默认沿着主轴排列（主轴-水平方向 | 侧轴-垂直方向） 如果 弹性盒子 没有设置 宽度，它的 宽度 就是 内容 的 宽度。 如果 弹性盒子 没有设置 高度，或者取得是 stretch 属性值，它的 高度 就是 父元素 的 高度。 亲 父元素 开启 flex 布局，如果 子元素 是 行内元素 设置宽高 生效。
- 百分比布局（流式布局）
5.1 设置方式
给父元素添加 display: flex; （必须是紧挨着的上一级，亲父亲）
子元素可自动挤压或拉伸
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离。
5.2 主轴对齐方式（设置给弹性容器）
- 单行 弹性盒子 对齐方式
justify-content: 属性值;
flex-start --- 默认值，起点开始依次排序
flex-end --- 终点开始，依次排序
/* 常用 */
center --- 沿主轴居中排序
space-around --- 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between --- 弹性盒子沿主轴均匀排列，空白间距均分在相邻弹性盒子之间
space-evenly --- 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
5.3 侧轴对齐方式（设置给弹性容器）
align-items: 属性值;
flex-start --- 默认值，起点开始依次排序
flex-end --- 终点开始依次排序
/* 常用 */
center --- 沿侧轴居中排列
stretch --- 默认值，弹性盒子沿着主轴线被拉伸至铺满容器（前提是弹性盒子本身没有设置高度）
5.4 控制弹性盒子在侧轴的对齐方式（设置给弹性盒子）
align-self: 属性值;
flex-start --- 默认值，起点开始依次排序
flex-end --- 终点开始依次排序
/* 常用 */
center --- 沿侧轴居中排列
stretch --- 默认值，弹性盒子沿着主轴线被拉伸至铺满容器（前提是弹性盒子本身没有设置高度）
5.5 伸缩比（设置给弹性盒子）
使用 flex 属性修改弹性盒子伸缩比
flex: N;
N（整数）-> 将父级剩余尺寸分成N份，该弹性盒子占用父级剩余尺寸的N份
占用父盒子剩余尺寸
- 拓展：
- 当弹性盒子太多时，弹性盒子默认不会换行，弹性容器会自动压缩弹性盒子（弹性盒子变形），想要不变形添加
flex-shrink属性，属性值为 0 -
// 内容收缩的量 0表示不收缩 // 给弹性盒子添加 flex-shrink: 0;
- 当弹性盒子太多时，弹性盒子默认不会换行，弹性容器会自动压缩弹性盒子（弹性盒子变形），想要不变形添加
5.6 Flex修改主轴方向（加给弹性容器）
指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向
flex-direction: 属性值;
row --- 行，水平（默认值）
column --- 列，垂直 /* 常用 */
row-reverse --- 行，从右到左
column-reverse --- 列，从下到s
5.7 弹性盒子换行（加给弹性容器）
flex-wrap: wrap;
默认值：nowrap /* 不换行 */
5.8 调整行对齐方式（加给弹性容器）
- 弹性盒子 换行 之后，行与行之间 的 对齐方式
align-content: 属性值;
属性值和 justify-content 基本相同
flex-start --- 默认值，起点开始依次排序
flex-end --- 终点开始，依次排序
/* 常用 */
center --- 沿主轴居中排序
space-around --- 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between --- 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly --- 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
六、移动适配
网页元素的宽高都要随着设备的宽度等比缩放
6.1 rem
- 相对单位 ： rem单位 是 相对于 HTML标签的字号 计算结果 （网页的 根 是 html标签）
- 1rem = 1html标签字号大小
- 拓展：1em = 1个当前标签字体大小
- 要使用 rem 就必须先给 根标签(html标签) 添加 font-size
- 使用 rem 需要引入 flexble.js 文件
6.1.1 媒体查询
- 设置差异化CSS样式
- 媒体查询 能够 检测视口的宽度，然后编写差异化的CSS样式
- 使用媒体查询，根据不同的视口宽度，设置不一样的 根标签 字号
- 语法：
-
@media (媒体特性) { 选择器 { CSS属性 } } - eg：
<style> * { margin: 0; padding: 0; } /* @media (width: 375px) { html { font-size: 37.5px; } } */ .box { display: flex; width: 10rem; height: 1rem; margin: 0 auto; background-color: skyblue; } .left { width: 5rem; height: 1rem; background-color: pink; font-size: 1rem; line-height: 1rem; } .right { width: 5rem; height: 1rem; background-color: green; font-size: 1rem; line-height: 1rem; } /* 320 <= width <= 720 */ /* 视口宽度大于等于720的时候不变 */ @media (min-width: 720px) { html { font-size: 72px !important; } } /* 视口宽度小于等于320的时候不变 */ @media (max-width: 320px) { html { font-size: 32px !important; } } </style> <body> <div class="box"> <div class="left">白日依山尽</div> <div class="right">黄河入海流</div> </div> <script src="./js/flexible.js"></script> </body>
-
- 目前 rem 布局方案中，将 网页 等分 成 10份，HTML标签的字号 为 视口宽度 的 1/10
- rem适配方案分析：
-
设计稿：750px宽 一、以px为单位 1）在750px宽的设计稿中量数据，得到px数值 如：100px 2）量出来的px数值写入样式代码中 3）经过以上操作，就得到了 “样式文件A”，“样式文件A” 可以把页面宽度变成750px宽 结论：那么得到的样式可以把页面变成750px宽 问题1：页面的宽度会是多少？750px 问题2：页面中宽度会跟随窗口的变化而变化吗？不会，因为设置的都是确切的px数值 不合适 二、把单位由px换成rem “样式文件A”把页面变成10rem 把设计稿宽度假设为10rem，即 750px=10rem，那么 1rem = 75px 以此比例关系为准，把所有px都换成rem 1）在750px宽的设计稿中量数据，得到px数值 如：150px 2）将px数值转化为rem为单位，并设置到样式代码中 150/75 rem (把量出来的所有数值都除以75 把结果设置为rem单位) 得到一套可以把页面变成10rem宽的样式 —— “样式文件A” 结论：那么 “样式文件A” 可以把页面变成10rem宽 问题1：页面的宽度是固定的像素宽度吗？不是 10rem 问题2：页面的宽度受什么影响？html标签的字体大小影响 问题3：页面宽度跟随HTML标签字体大小变化时，页面内容是都等比例变化？是 终极目标：把页面（10rem）刚好放到移动端设备（10rem）中 三、把设备设置为10rem宽 “样式文件B”把移动端设备变成10rem宽 可以把html标签的字体大小设置为屏幕宽度的十分之一 “媒体查询”、“javascript” 通过媒体查询在不同设备宽度状态下设置HTML标签字体大小为屏幕宽度的10分之1 “样式文件B” 四、总结 现状： 页面被“样式文件A”设置为10rem宽 设备被“样式文件B”设置为10rem宽 则： 页面在设备中完美显示-
拓展：用户可拓展
-
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable">
-
-
6.2 vw / vh
- 相对单位（相对视口的尺寸）
- vw 和 vh 不可以一起使用（全面屏）
1vw = 1/100 视口宽度
1vh = 1/100 视口高度
6.3 rem适配方案的做法
- rem是相对与跟标签字号的大小，1rem是视口宽度的1/10；将视口宽度等分成10份，设置跟标签字号为1份，
- 假如拿到的是375px的设计稿，将375等分成10份，一份就是37.5px，也就是1rem=37.5px，将再设计稿中量取的数据由px全部转换成rem单位（按照37.5：1的比例），这样设备宽度不再是固定的像素值，而是固定的10rem
6.4 vw/vh适配方案的做法
- vw（vh）视口宽度的1/100（视口高度的1/10）
- 假如拿到的是375px的设计稿，将375等分成100份，1vw=3.75px，安扎这个1/100的比例曲江设计稿中量取的数据全部转换成vw单位。
❌七、Less语法
- Vs Code安装插件 Easy-LESS
- less 是一个CSS预处理器，Less文件后缀是.less
- 浏览器不识别Less代码，网页要引入对应的CSS文件
- 使用Less语法
- less 里面可以 定义变量、计算、嵌套、导入、导出
- &不生成后代选择器，表示当前选择器，通常配合伪元素使用
7.1 变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为：
#header {
width: 10px;
height: 20px;
}
7.2 混合
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）
7.3 导入
导入 的 文件名 必须要用 引号包裹 ，且以 分号结尾
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import 'library'; // library.less
@import 'typo.css';
7.4 导出
// 不是注释 ，必须写
// out: ../a.css
// out: ./abc/
7.5 禁止导出
// 不是注释， 必须写 ， 必须以 引号结尾
// out: false;
八、响应式
- 随着屏幕大小的不同，有着不同的布局（同一套代码，适配不同的屏幕宽度）
8.1 媒体查询（核心）
- 根据设备宽度的变化，设置差异化样式
语法：
@media (媒体特性) {
选择器 {
样式
}
}
媒体特性常用方法： max-width（从大到小写）
min-width（从小到大写）
媒体查询完整写法（了解）
@media 关键词 媒体类型 （媒体特性） { CSS代码 }
link写法
<link rel="stylesheet" href="路径" media="(媒体特性)">
8.2 BootStrap前端UI框架
栅格系统
版心类名： .container 默认已被指定宽度且居中
.container-fluid ， 所有应用该类名的盒子，宽度均为 100%
.row 自带 -15px 的间距
BootSrrap3 默认将网页分成12等份，默认将所有的视口分成四种
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | |
|---|---|---|---|---|
| 响应断点（视口宽度） | < 768px | >= 768px | >= 992px | >= 1200px |
| 别名 | xs | sm | md | lg |
| 容器宽度 | 100% | 750px | 970px | 1170px |
| 类前缀 | col-xs-* | col-sm-* | col-md-* | col-lg-* |
| 列数 | 12 | 12 | 12 | 12 |
| 列间隙 | 30px | 30px | 30px | 30px |
* ： 占12份里的几份
hidden - 屏幕状态
在指定屏幕状态下隐藏，其他屏幕状态下显示
/* 中屏 和 超小屏 隐藏 */
<span class="hidden-md hidden-xs"></span>
九、❗❗ 网格布局
网格容器 + 网格项目 + 网格轨道
9.1 开启网格布局
display: gird;
display: inline-gird;
9.2 网格轨道
9.2.1 设置列宽
grid-template-columns: ;
取值：写每一列的宽度，中间用逗号隔开
eg：
/* 设置3列，第一列宽度100px，第二列宽度50px，第三列宽度60px */
grid-template-columns: 100px, 50px, 60px;
如果 每一列 的 宽度相等，可以使用 repeat() 函数
grid-template-columns: repear(几列, 宽度);
eg：
/* 设置3列，每一列的宽度是100px */
grid-template-columns: repear(3, 100px);
9.2.2 设置行高
设置几行，每一行的高是多少
gird-template-rows: ;
取值：写每一行的高度，中间用逗号隔开
eg：
/* 设置3行，第一行高度100px，第二行高度50px，第三行高度60px */
grid-template-rows: 100px, 50px, 60px;
如果 每一行 的 高度相等，可以使用 repeat() 函数
grid-template-columns: repear(几行, 高度);
eg：
/* 设置3行，每一行的高度是100px */
grid-template-rows: repear(3, 100px);
9.3 网格项目之间的距离
grid-gap: 像素值;
