CSS进阶及移动端开发

移动端开发知识点

字体图标
展示的是图标，本质是字体
引入字体图标的样式表
调用图标对应的类名、必须调用两个类名
iconfont类：基本样式，包含字体的使用等
cion-xxx：图标对应的类名
平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
改变盒子在平面内的形态（位移、旋转、缩放）
2D转换
位移
语法
transform：translate（水平移动距离，垂直移动距离）
取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正为右，Y轴正为下
技巧：
translate（）如果只给出一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translateX（）或者translateY（）
旋转
使用rotate实现元素旋转效果
语法
transform：rotate（角度）
注意：角度单位是deg
技巧：取值正负均可
取值为正，则顺时针旋转
取值为负，则逆时针旋转
转换原点
使用transform-origin属性改变转换原点
添加到标签本身，不要加到hover
语法
默认原点是盒子中心点
transform-origin：原点水平位置 原点垂直位置；
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
多重转换
使用transform复合属性实现多形态转换
多重转换技巧
transform：translate（） rotate（）；
注意：旋转会改变坐标轴方向，先旋转改变了坐标轴方向，位移方向会受影响，多重转换如果涉及到旋转往最后书写
缩放
使用scale改变元素的尺寸
语法
transform：scale（x轴缩放倍数，y轴缩放倍数）
技巧：
一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
transform：scale（缩放倍数）
scale值大于1表示放大，scale值小于1表示缩小
渐变
使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
代码：
background-image：linear-gradient（颜色1，颜色2）；
工作中常用半透明渐变；透明transparent-rgba（）
代码：
background-image：transparent，rgba（0，0，0，.6）
空间转换
空间：是从坐标轴角度定义的。x、y、z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
空间位移
使用translate实现元素空间位移效果
语法：
transform：translate3d（x，y，z）
transform：translateX（值）
transform：translateY（值）
transform：translateZ（值）
取值（正负均可）
像素单位数值
百分比
使用perspective属性实现透视效果
属性（添加给父级）
perspective：值；
取值：像素单位数值，数值一般在800-1200
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
空间旋转
使用rotate实现元素空间旋转效果
语法：
transform：rotateZ（值）
transform：rotateX（值）
transform：rotateY（值）
左手法则
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
拓展
rotate3d（x，y，z，角度度数）：用来设置自定义旋转轴的位置及旋转的角度
x，y，z取值为0-1之间的数字
立体呈现
使用transform-style：preserve-3d呈现立体图形
实现方法
添加transform-style：preserve-3d
使子元素处于真正的3d空间
默认值flat，表示子元素处于2D平面内呈现
3D导航
使用立体呈现技巧实现3D导航效果
搭建立方体
li标签
添加立体呈现属性transform-style:preserve-3d;
添加旋转属性（为了便于观察效果，案例完成后删除即可）
a标签
调节a标签的位置
a标签定位（子绝父相）
英文部分添加旋转和位移样式
中文部分添加位移样式
空间缩放
使用scale实现空间缩放效果
语法：
transform：scale3d（x,y,z）
transform：scaleZ（倍数）
transform：scaleX（倍数）
transform：scaleY（倍数）
动画
使用animation添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
过渡是实现两个状态间的变化过程
动画的本质是快速切换大量图片时再人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
实现步骤
定义动画
1.完成两个状态间的变化
@keyframes 动画名称{
from{}
to{}
}
2.完成多个状态间的变化（百分比指的是动画总时长的占比）
@keyframes 动画名称{
0% {}
10%{}
15%{}
100%
}
使用动画
animation：动画名称 动画花费时长；
动画属性
使用animation相关属性控制动画执行过程
animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
速度曲线：linear匀速动画 steps（）分步动画
重复次数：无限循环infinite
动画方向：反复方向alternate
执行完毕时状态：默认值，返回初始状态backwards 最终状态forwards
注意：
动画名称和动画时长必须赋值
取值部分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个表示延迟时间
animation拆分写法

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后状态 backwards:初始状态
animation-timing-function	速度曲线	steps（数字）：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合：hover使用

​ 逐帧动画：帧动画，开发中，一般配合精灵图实现动画效果
​ animation-timing-function：steps（N）
​ 将动画过程等分成N份
​ 精灵动画制作步骤
​ 准备显示区域
​ 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
​ 定义动画
​ 改变背景图的位置（移动的距离就是精灵图的宽度）
​ 使用动画
​ 添加速度曲线steps（N），N与精灵图上小图个数相同
​ 添加无限重复效果

移动端特点

PC端和移动端不同
PC端屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%
屏幕尺寸指的是屏幕对角线的长度，一般用英寸来度量
视口
使用meta标签设置视口宽度，制作适配不同设备宽度的网页
手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同
目标：网页宽度和设备宽度（分辨率）相同
解决办法：添加视口标签
百分比布局
能够使用百分比布局开发网页
百分比布局，也叫流式布局
效果：宽度自适应，高度固定
Flex布局
使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题
作用
基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生
Flex布局非常适合结构化布局
设置方式
父元素添加display：flex，子元素可以自动的挤压或拉伸
组成部分
弹性容器
弹性盒子
主轴
侧轴/交叉轴
主轴（默认是水平方向）对齐方式
使用justify-content调节元素在主轴的对齐方式
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始一次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴（默认是垂直方向）对齐方式
使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性：
align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排序
flex-end	终点开始依次排序
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比
使用flex属性修改弹性盒子伸缩比
属性
flex：值
取值分类
数值（整数）
注意：只占用父盒子剩余尺寸
主轴方向
使用flex-direction改变元素排列方向
主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性：flex-direction

属性值	作用
row	行，水平（默认值）
column	* 列，垂直
row-reverse	行，从右向左
column-reverse	列，从下向上

​ 注意：先确定主轴方向，再选择对应的属性实现主轴或侧轴的对应方式
弹性盒子换行
​ 使用flex-wrap实现弹性盒子多行排列效果
​ 弹性盒子换行显示：flex-wrap：wrap
​ 调整行对齐方式:align-content
​ 取值与justify-content基本相同
文字内容多的时候，末尾显示省略号：
​ 父标签添加：
​ flex：1
​ width：0
​ 标签自己添加：
​ text-overflow：ellipsis
​ white-space：nowrap
​ overflow：hidden
移动适配
​ rem：目前多数企业在用的解决方案
​ vw/vh：未来的解决方案
rem
​ 能够使用rem单位设置网页元素的尺寸
​ 网页效果
​ 屏幕宽度不同，网页元素尺寸不同（等比缩放）
​ px单位是绝对路径
​ 百分比布局特点宽度自适应，高度固定
​ 适配方案
​ rem单位
​ 相对单位
​ rem单位是相对于HTML标签的字号计算结果
​ 1rem=1HTML字号大小
媒体查询
​ 能够使用媒体查询设置差异化CSS样式
​ 媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
​ 写法
​

@media （媒体特性）{
			选择器{
				CSS属性
			}
		}

​ 例如：
​

@media （width:375px）{
			HTML{
				font-size:40px
			}
		}

​ 目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10
flexible
​ 使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放
​ flexible.js是手机淘宝开发出的一个用来适配移动端的js框架
​ 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
Less语法
​ 使用Less运算写法完成px单位到rem单位的转换
​ 运算：
​ 加、减、乘直接书写计算表达式
​ 除法需要添加小括号或.
​ 例如：
​ width：（100/4px）
​ height：100./4px
​ 使用Less语法快速编译生成CSS代码
​ Less是一个CSS预处理器，Less文件后缀是.less
​ 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
​ 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
​ 单行注释
​ 语法：//注释内容
​ 快捷键：ctrl+/
​ 块注释/多行注释
​ 语法：/注释内容/
​ 快捷键：shift+alt+A
​ 能够使用Less嵌套写法生成后代选择器
​ 嵌套：
​ 作用：快速生成后代选择器
​ 语法：
​ .父选择器{
​ //父级样式
​ .子选择器{
​ //子级样式
​ }
​ }
​ &符表示当前选择器
​ 能够使用Less变量设置属性值
​ 变量：
​ 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
​ 变量：存储数据，方便使用和修改
​ 语法：
​ 定义变量：@变量名：值；
​ 使用变量：CSS属性：@变量名；
​ 能够使用Less导入写法引用其他Less文件
​ css：书写link标签
​ Less：导入
​ 导入：@import“文件路径”
​ 如果是less文件，可以省略后缀.less
​ 使用less导出全局css文件
​ 方法一：
​ 配置easyless插件，实现所有less有相同的导出路径
​ 配置插件：设置→搜索easyless→在setting.json中编辑→添加代码（注意，必须是双引号）
​ 要添加的代码：在less.compile里面加“out”：“导出的路径”
​ 导出单独css文件
​ 在当前less文件的第一行写//out：路径
​ 禁止导出
​ 在less文件第一行添加：//out：false
vw/vh
​ 能够使用vw单位设置网页元素的尺寸
​ 相对单位
​ 相对视口的尺寸计算结果
​ vw：viewport width
​ 1vw=1/100视口宽度
​ vh：viewport height
​ 1vh=1/100视口高度
vw适配原理
​ vw单位尺寸
​ 确定设计稿对应的vw尺寸（1/100视口宽度）
​ 查看设计稿宽度→确定参考设备宽度（视口宽度）→确定vw尺寸（1/100视口宽度）
​ vw单位的尺寸= px单位数值/（1/100视口宽度）
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

响应式
媒体查询
能够根据设备宽度的变化，设置差异化样式
开发常用写法
媒体特性常用写法
max-width（从大到小）
min-width (从小到大)
@media （媒体特性）{
选择器{
样式
}
}
完整写法
@media 关键词 媒体类型 and （媒体特性） {CSS代码}
关键词：and、only、not
媒体类型
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情况

媒体特征
媒体特征主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口做小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait：竖屏 landscape:横屏

外链式CSS引入
​
视口到一定程度隐藏某标签内容
@media （媒体特性）{
选择器{
display：none
}
}
所有的CSS属性都有层叠性
BootStrap简介
使用BootStrap框架快速开发响应式网页
引入：BootStrap提供的CSS代码

调用类：使用BootStrap提供的样式
container：响应式布局版心类
BootStrap栅格系统
使用BootStrap栅格系统布局响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成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

container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中
container-fluid也是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
分别使用.row类名和.col类名定义栅格布局的行和列
注意：
container类名自带间距15px
row类自带间距-15px
row类作用就是抵消container类的15px内边距
全局样式
掌握BootStrap手册用法，使用全局CSS样式美化标签
手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
网站首页→BootStrap3中文文档→全局CSS样式→按分类导航查找目标类
布局：表格
Ø table : 基本类名, 初始化表格默认样式
Ø table-bordered : 边框线
Ø table-striped : 隔行变色
Ø table-hover : 鼠标悬停效果
Ø table-responsive : 表格宽溢出滚动
美化内容类：按钮
Ø btn : 基准样式
Ø btn-info; btn-success : 设置按钮背景色
Ø btn-block : 设置按钮为块元素
Ø btn-lg; btn-sm; btn-xs : 设置按钮大小
布局：表单
Ø form-control : 设置表单元素input, select, textarea的样式
Ø checkbox 和 radio : 设置复选框和单选框的样式
Ø form-inline : 设置表单元素水平排列
Ø disabled : 设置表单禁用状态样式
Ø input-lg; input-sm, input-sm : 设置表单元素的大小
美化内容：图片
Ø img-responsive: 图片自适应
Ø img-rounded : 图片设置圆角
Ø img-circle : 图片设置正圆
Ø img-thumbnail : 图片添加边框线
布局：辅助类
Ø pull-right : 强制元素右浮动
Ø pull-left : 强制元素左浮动
Ø clearfix : 清除浮动元素的影响
Ø text-left文 : 本左对齐
Ø text-right : 文本右对齐
Ø text-center : 文本居中对齐
Ø center-block : 块元素居中