web移动端常用知识点
字体图标
优点
- 灵活性：灵活地修改样式，例如：尺寸、颜色等
- 轻量级：体积小、渲染快、降低服务器请求次数
- 兼容性：几乎兼容所有主流浏览器
引入方式
-
Unicode编码引入
引入样式表：iconfont.css
复制粘贴图标对应的Unicode编码
设置文字字体
<!-- 引入字体图标样式表 --> <link rel="stylesheet" href="./iconfont-75/iconfont.css"> <style> span { /* 设置目标标签的字体家族 */ font-family: iconfont; color: orange; font-size: 50px; } .s1 { font-weight: 700; } </style> </head> <body> <!-- 复制粘贴图标的Unicode代码 --> <span class="s1"></span> <span></span> </body> </html> -
类名引入
引入字体图标样式表
- 可引入本地下载的样式表，
- 也可引入样式表在线地址，方便后期项目添加图标后引入，
调用图标对应的类名，必须调用2个类名
iconfont类：基本样式，包含字体的使用等
icon-xxx：图标对应的类名
<!-- 引入字体图标样式表 --> <link rel="stylesheet" href="../../iconfont/iconfont.css"> <style> /* 定义字体图标的其他属性 */ .iconfont { font-size: 50px; color: red; } </style> </head> <body> <!-- 引入iconfont 和 对应图标的class类名 --> <span class="iconfont icon-rmb"></span> </body> </html>
平面转换：transform
属性概述
描述：平面转换属性
代码：transform: transleta(5px,5px) rotate(360deg) scale（2）
| 属性值 | 功能 |
|---|---|
| translate(5px,5px),可单独translateX() translateY() | 水平+垂直偏移，可参照自身取百分比 |
| rotate(360deg), | 旋转，单位：dag（角度） |
| scale（数值） | 缩放的倍数 |
- translate：位移，以右/下为正方向
- translateX水平位移
- translateY垂直位移
- 不可同时设置translateX translateY
- rotate
- 角度单位是deg
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
- scale
- transform: scale(x轴缩放倍数, y轴缩放倍数)
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
- transform: scale(缩放倍数);
- scale值大于1表示放大, scale值小于1表示缩小
旋转原点：transform-origin
-
语法
- 默认原点是盒子中心点
- transform-origin: 原点水平位置 原点垂直位置;
-
取值
-
方位名词（left、top、right、bottom、center）
-
像素单位数值
-
百分比（参照盒子自身尺寸计算）
-
渐变
- 语法
background-image: linear-gradient( to right, black, red);
-
取值
- 方向：to bottom / to top / to left / to right
- 角度：45deg
- 颜色：可取多个颜色
- 百分比：用于多色分层依据
- 举例
- linear-gradient(black , red)
- linear-gradient(black 10% , red 50%)
- linear-gradient(to right , black 10% , red 50%)
- linear-gradient(30deg , black 10% , red 50%)
-
要点总结
- 要给 背景图片添加
- 设置 多种渐变色
- 设置 多种渐变色分层
- 设置 渐变颜色方向
- 方位名词（left、top、right、bottom、center）
- 100deg
- 渐变不能设置过渡效果，需做好目标渐变效果，通过opacity（透明度）从0-1，达成渐变的过渡效果
- 背景图片的过渡效果不完善，慎用
- 不能通过display：none；实现两个图片的过渡
- 最好通过两个图片的透明度（opacity）来实现渐变过渡
空间转换
位移
语法：transform：translate
取值：px（像素） ，%（以自身为参照对象）
方向/单位(px)
translateX 右正左反
translateY 下正上反
translateZ 屏幕向外为正，向里为反
默认情况下看不见元素在z轴上的变化
translate3d(x,y,z)
旋转
语法：transform，单位:deg
旋转正方向判断：左手握成点赞姿势，拇指方向指向旋转轴的正方向，此时其他手指的弯曲方向即为旋转的正方向
取值：
-
rotateX 绕X轴旋转
-
rotateY 绕Y轴旋转
-
rotateZ 绕Z轴旋转
-
rotate3d(x,y,z,角度)
缩放 - 3d缩放
语法：scale
立体坐标系
-
x轴
-
y轴
-
新 z轴！！
方向 由屏幕里面指屏幕外面
通过给父盒子添加scale3d(X deg, Y deg, Z deg ),实现整个3d元素在三维空间旋转，旋转轴为原点到定点的连线
其他
- 视距 perspective 看见元素 近大远小的效果
- 左手准侧：根据左手来判断物体旋转的方向 方便我们 判断代码如何执行 或者 根据效果图来反推代码
- 3d立方体
- 立体呈现 开启3d空间 ：transform-style: preserve-3d;
正方体制作小拓展
- 定义一个父盒子，并定义6个子盒子做正方体的6个面
- 将6个面通过3d旋转与3d位移放到合适的位置
- 给父盒子加上 视距 perspective 属性与 transform-style: preserve-3d;属性呈现盒子的3d效果
动画
语法规范
- 定义动画： @keyframes 动画名称（英文）
-
开始/结束
@keyframes ani-name { from{ width: 100px; background-color: pink; } to { width: 600px; background-color: orange; } } -
百分比
@keyframes ani-name { 50% { width: 500px; background-color: pink; } 100% { width: 800px; background-color: orange; } }
- 元素调用动画并定义相关属性值
.box2 {
width: 200px;
height: 100px;
background-color: tomato;
/* 2.调用动画 动画名称和持续时长为必须属性值 */
animation: ani-name 2s;
}
动画属性
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation-duration | 设置动画的播放时长 | |
| animation-timing-function | 设置动画的速度曲线 | linear 匀速 / steps() 逐帧动画 |
| animation-delay | 设置动画的延迟时间 | |
| animation-iteration-count | 设置动画的播放次数 | infinite 无限次 / 数值次数 |
| animation-direction | 设置动画方向 | normal 默认值 先正再正/alternate 先正再反 |
| animation-fill-mode | 设置延迟状态和结束状态 | backwards 设置延迟时间内元素变成第一帧的画面 / forwards 设置动画结束后 停留在最后一帧 |
| animation-play-state | 动画播放还是暂停 | 播放 默认值 running / 暂停 paused 通常配合：hover使用 |
注意点补充：
- 复合写法 animation：各属性的取值，以空格隔开，单个元素可调用多个动画，每个动画之间以英文逗号隔开 。
- 动画名称和动画时长为必须值
- 当简写中出现两个时间值，则第一个为动画时长，第二个为延迟时长
逐帧动画小案例
制作步骤：
- 准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
- 定义动画：改变背景图的位置（移动的距离就是精灵图的宽度）
- 添加速度曲线steps(N)，N与精灵图上小图个数相同
- 添加无限重复效果（infinite）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
/* 两个动画的调用，动画之间以逗号隔开 */
animation: run 1s steps(12) infinite,
translate 3s linear forwards;
}
/* 定义动画一 */
@keyframes run {
100% {
background-position: -1680px 0;
}
}
/* 定义动画二 */
@keyframes translate {
100% {
left: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
移动端小知识（了解）
移动端
- 屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量。
- 分辨率
- 物理分辨率：是生产屏幕时就固定的，它是不可被改变的；
- 逻辑分辨率：是由软件（驱动）决定的。
- 视口：当前窗口/移动端的像素大小
- 使用meta标签设置视口宽度，制作适配不同设备宽度的网页
- viewport：视口
- width=device-width：视口宽度 = 设备宽度
- initial-scale=1.0：缩放1倍（不缩放）
Flex布局
概念/组成：
Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
组成部分：
- 弹性容器（父项）
- 弹性盒子（子项）
- 主轴：默认情况下是X轴方向，可通过flex：column; 修改主轴方向为Y轴
- 侧轴/交叉轴：默认情况下是Y轴方向，当flex：column; 修改主轴方向为Y轴后，此时的侧轴则为X轴方向
作用/设置方式：
作用：
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
- Flex布局非常适合结构化布局
设置方式：
- 给父项添加：display:flex;
- 通过flex的各种属性调试子项与父项的样式效果
使用flex布局之后的子项的变化：
- 不分行内/行内块/块级元素，全部可以设置宽高
- 默认宽度由内容撑开，高度等于父项高度
- 子项使用 浮动 没有效果，但可使用 定位 ，margin， transform
- 默认情况下即使子项总宽度大于父项的宽，也不会换行！！！flex不会换行，只会压缩子项自身宽度，当子项由内容撑开的宽度也超过父项宽度，超出部分会溢出
父项属性（主轴/侧轴对齐方式等）
-
主轴对齐方式（给父项设置）
语法: justify-content : ;
取值：
属性值 效果 flex-start 靠主轴左侧/上方对齐 flex-end 靠主轴右侧/下方对齐 center 主轴方向居中对齐 space-between 先主轴方向两侧，剩余均匀放中间，类似于两侧的除去了靠边的内边距 space-around 间隔，主轴两侧间隔小于中间，类似多个有左右相同内边距的盒子排列 space-evenly 间隔绝对平分，两侧盒子距边缘的距离与中间各盒子之间的距离相等 -
侧轴单行/列对齐方式（给父项设置）
语法： align-items : ;
取值：
属性值 效果 center 居中 flex-start 单行：上方 / 单列：左侧 flex-end 单行：下方 / 单列：右侧 -
侧轴多行/列对齐方式
语法： align-content : ;
取值：
属性值 效果 start 往侧轴开始的方向（上方/左侧）对齐 cent 往侧轴居中的方向（侧轴中间）对齐 end 往侧轴结束的方向（下方/右侧）对齐 space-between 先侧轴方向两侧，剩余均匀放中间，类似于两侧的除去了靠边的内边距 space-around 间隔，侧轴两侧间隔小于中间，类似多个有左右相同内边距的盒子排列 space-evenly 间隔绝对平分，两侧距边缘的距离与中间各盒子之间的距离相等 -
应用举例：
-
设置换行：
- 换行需求的原因：子项盒子在父项中默认**（ flex-wrap:no wrap;）**不换行，即使所有子项宽度超过父项，也只会溢出而不换行
- 设置方式：给父项添加 **flex-wrap: wrap; ** 属性,设置后当多个子项总宽度超过父项时会自动换行排列。
-
设置主轴方向：
语法： flex-direction : ;
取值：
属性值 子项排列方式 row 默认值，左到右 row-reverse 右到左 column 上到下 column-reverse 下到上
子项属性
- 单个子项本身在侧轴上的对齐方式
语法： align-self : ;
取值：
| 属性值 | 效果 |
|---|---|
| center | 居中 |
| start | 左侧/上方 |
| end | 右侧/下方 |
-
子项 占父项剩余空间的宽度份数
语法/取值： flex: n；
补充： 设置子项占父项剩余空间的宽度份数，X个子项设置flex：1；则将父项的剩余空间均分成X份，各取其一。
移动适配（vw/rem）
VW/VH
概念：相对长度单位，100vw=视口的宽度，100vh=视口的高度
作用：能适应各种型号的移动端，且用户体验不错
屏幕适配计算公式 ： 要适配的元素宽度=屏幕的宽度 * 设计稿中元素的宽度/ 设计稿宽度
rem
概念：相对长度单位，1rem相当于根标签设置的字体大小，默认下是16px
应用场景：
- 用作移动端适配
- 步骤：
- 引入一段js 手淘开发 flexible.js
- 引入后可使10rem=屏幕宽度
屏幕适配计算公式 ： 要适配的元素宽度=屏幕的宽度 * 设计稿中元素的宽度/ 设计稿宽度
其他补充
- vacode中适配单位换算插件
- vw px2vw
- rem px to rem & rpx (cssrem)
注：工作中条件允许则首选vw做移动端适配
less（css预处理器）
概念：
一种能提高CSS编写效率的工具
less工作流程:
- 我们写样式代码 直接写在 less文件中
- 通过插件 来把 less文件 编译成 我们熟悉的 css文件
- 网页中 来引入 编译好的 css文件 ！！
语法
-
**变量,**可方便快速修改样式
// 变量 会变化的 数据即可 // 固定语法 @+任意的名称（有语义的英文） // 变量：作用 把一些css的属性设置在一个地方，实现一改全改 //定义变量： @theme-color:gray; @big-size:200px; //使用变量 div{ color: @theme-color; font-size: @big-size; } //CSS编译效果 div{ color:gray; font-size:200px; } -
运算**:加减乘除都可，使用 easy less 编译 除法 加上括号
@fontsize:18px; div{ width: 100px + 200px; height: 100px * 3; /* 使用 easy less 编译 除法 加上括号 */ height: (300px / 3); /* div 字体大小是 变量的两倍 */ font-style: @fontsize * 2; }编译后的CSS
div{ width: 300px; height: 300px; height: 100px; font-style: 36px; } -
mixin混合代码块
/* 需求 有三个 元素 想要使用 一张精灵图 1 A元素 图片位置 x y (-300px,30px) 1 B元素 图片位置 x y (-400px,60px) 1 C元素 图片位置 x y (-50px,100px) 使用 less的mixin来解决 （用法有点类似变量） */ /* 1 定义一个mixin */ .aaaaaa(@a1,@a2) { /* 存放你想要用到一坨代码 */ background-image: url(2.png); background-size: 100%; background-repeat: no-repeat; /* 背景图片的位置 */ background-position: @a1 @a2; } // 使用混合mixin div { .aaaaaa(-300px,30px); }编译后的CSS
div { background-image: url(2.png); background-size: 100%; background-repeat: no-repeat; /* 背景图片的位置 */ background-position:-300px,30px; } -
less 嵌套,参考对应的html标签结构来嵌套
.box { p { } > section { #header { button { color: #000; } } } a { img { width:100%; } } } div { height: 200px; background-color: lawngreen; // ::before{ 错误的 &::before { // 正确 要加上一个 & 连接 content: 'less实现的伪元素'; } }编译后的CSS
.box > section #header button { color: #000; } .box a img { width:100%; } div { height: 200px; background-color: lawngreen; } div::before { content: 'less实现的伪元素'; }
响应式布局
定义/原理
定义： 一套代码，实现PC端和移动端的布局，且体验不错
实现原理：媒体查询
媒体查询
定义：根据屏幕宽度或高度不同，去使用不同的CSS代码
/* 媒体查询语法1 ,表示当视口宽度等于400px时，渲染对应样式 */
@media (width:400px){
body{
background-color: red;
}
}
/* 常见和推荐的写法 */
@media screen and (width:600px) {
body{
background-color: yellow;
}
}
/* 媒体查询语法2，区间宽度，达到该区间即渲染对应样式 */
/* 当屏幕的宽度 小于 100px red（最大就是100px）*/
@media screen and (max-width: 100px) {
body {
background-color: red;
}
}
/* 当屏幕的宽度 大于 500px green (最小就是500px) */
@media screen and (min-width: 500px) {
body {
background-color: green;
}
}
/* 当屏幕的宽度 大于 300 小于 500px yellow */
@media screen and (min-width: 300px) and (max-width: 500px) {
body {
background-color: yellow;
}
}
bootstrap 栅格系统
定义：别人写好的 实现响应式布局的核心技术 框架
屏幕划分
- 大屏幕>1200px 简写： lg
- 中等屏幕 992-1200px 简写：md
- 小屏幕768-992px 简写：sm
- 极小屏幕<768px 简写：xs
使用步骤
- 先写版心 （二选一）
- container （居中）
- container-fluid(全屏)
-
写行 .row （盒子类名）
-
写栅格
-
栅格系统已将一行分为12份
-
区分当前在什么屏幕下 （lg / md / sm / xs）
-
每一列占几份 （类名举例：col-lg-3）,表示大屏幕下占每列3份（即一行放4个）
-
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" /> <title>01-模版</title> <!-- 1 要引入 bootstrap css文件 --> <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"> </head> <body> <!-- 栅格盒子的应用 --> <div class="container"> <div class="row"> <!-- 表示在 大屏幕下占每列3份（即一行放4个） 中等屏幕下每列4份（即一行放3个） 小屏幕下每列占6份（即一行放2个） --> <div class="col-lg-3 col-md-4 col-sm-6"></div> </div> </div> <!-- 字体图标的应用 --> <div class="container"> <span class="glyphicon glyphicon-search s1" aria-hidden="true"></span> <span class="glyphicon glyphicon-yen s2" aria-hidden="true"></span> </div> </body> <!-- 2 要引入 jquery.js --> <script src="./lib/jquery.js"></script> <!-- 3 引入 bootstrap.js --> <script src="./lib/bootstrap/js/bootstrap.js"></script> <!-- 引入屏幕状态提示 --> <script src="./lib/bootstrap/showScreen.js"></script> </html>其他补充（导航条轮播图等）
- 具体的代码组件等可实时在网站里面下载， 网址：v3.bootcss.com/
- 轮播图在JavaScript 插件模块
- 全局 CSS 样式中的辅助类，详细描述了定义的各种样式类，可多留意。
