移动web
1.文字阴影:text-shadow
text-shadow: 2px 5px 5px red,0px 0px 40px blue ,0px 0px 60px pink;
2.盒子阴影:box-shadow
box-shadow: 8px 9px 11px 6px rgba(0, 0, 0, .3);
3.位移:translate
transform:translateX/Y/Z(100px)
4.旋转:rotate
transform:rotateX/Y/Z(100deg)
rotate3d(x, y, z, 角度度数) /* x，y，z 取值为0-1之间的数字 */
左手法则:左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
z轴垂直屏幕向内是负值，垂直屏幕向外是正值
5.缩放:scale
transform: scale(1); /* 原始大小 */
6.渐变
background-image: linear-gradient()
background-image: linear-gradient(90deg,pink,orange);
background-image: linear-gradient(transparent,rgba(0,0,0,.6));
7.过渡
transition:all 时间+s;
8.立体呈现
transform-style: preserve-3d;
9.动画
步骤:
1.定义动画
@keyframes 动画名称 {
from {}
to {}
}
@keyframes 动画名称 {
0% {}
50% {}
100% {}
}
2.调用动画
animation: 动画名称 时间;
动画属性:
多个动画之间用逗号隔开
10.透视
perspective:800;
取值范围:800-1200
作用:空间转换时，为元素添加近大远小、近实远虚的视觉效果
11.flex布局
①主轴对齐方式
justify-content: ;
②侧轴对齐方式属性:
align-items: ; （添加到弹性容器）
align-self： ; （控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子））
③伸缩比
flex: 数字; ( 剩余份数 )
④修改轴向:
flex-direction: ;
⑤换行
flex-wrap: wrap;
12.移动适配
① rem
相对单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
(1)媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式
目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
@media (widet:375px) {
html {
font-size: 37.5px;
}
}
(2)rem单位尺寸
1.根据视口宽度，设置不同的HTML标签字号
2.书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
(3)flexible
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
②vw/vh
视口相对宽/高度,将视口等分为100份
例:1vw=3.75px(宽) 1vh=6.67px(高)
vw/vh不一起使用
13.less语法
(1)注释
单行注释: 语法：// 注释内容 快捷键：ctrl + /
块注释 : 语法：/* 注释内容 */ 快捷键： shift + alt + A
(2)运算：
加、减、乘直接书写计算表达式
除法需要添加 小括号 或 .
(3)变量
变量：存储数据，方便使用和修改。
语法：
定义变量：@变量名: 值;
使用变量：CSS属性：@变量名;
(4)导入: @import “文件路径”;
(5)导出: //out: ./CSS/
(6)禁止导出:在less文件第一行添加: // out: false
14.文字隐藏显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; (两行)
-webkit-box-orient: vertical;
15.文本不换行
white-space: nowrap;
