css3
live 设置快捷键
常见设计稿：
640 iphone5 320分辨率 DPR 2.0
750 iphone6 375分辨率 DPR 2.0
1242 iphon6p 414*3分辨率 DPR3.0
720 小米
border-radius
border-radius:50%;
圆形，方形 边长的一半
前面是水平半径，后面是垂直半径
四个数字方向分别是左上 右上 右下 左下 顺时针
线性渐变
linear-gradient
linear-gradient([<起点> |
| <角度>,]? <点>, <点>…)
只能用在背景上
颜色是沿着一条直线轴变化
参数
起点：从什么方向开始渐变
left
、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
red 50%，位置可选
重复线性渐变
css3选择器
:nth-child(n) 第几个元素 从1开始设置
:nth-child(2n) 偶数元素 从0开始设置
:nth-child(2n+1) 奇数元素
:nth-child(event) 根据奇偶数
:nth-of-type(n)
:first-child ->nth-child(1) 第一个子元素
:first-of-type ->nth-of-type(1)
:last-child 最后一个子元素
:last-of-type
:only-child 仅有一个子元素
:only-of-type 同种类型的子元素只有一个
:div:empty{}查找作为父元素的空div给他设置样式
径向渐变
radial-gradient([[ || ] [at ]?,| at ,]?[,]+);
从“一个点”向多方向颜色渐变
shape形状 ： ellipse椭圆、circle 圆形 或设置水平半径,垂直半径
size:渐变的大小，即渐变到哪里停止，有如下关键词:
closest-side：最近边
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角 (默认值)
position ：关键词|数值|百分比
重复的径向渐变
背景
background-size:cover ;背景图不一定显示完整，铺满整个容器
background-size:100% 100%;相对于元素宽高的百分比 ；
background-size:contain;背景图显示完整，但是不一定铺满整个容器
background-origin
background-origin: padding-box; 从padding区域显示 针对边框内部开始定位
background-origin: border-box;从border区域显示 针对边框外部开始定位
background-origin: content-box; 从content区域显示 针对内容区域的左上角定位
background-clip
background-clip: padding-box;从padding区域往外裁剪
background-clip: border-box;/*从边框区域往外裁剪 默认*/
background-clip: content-box;/*从内容区域往外裁剪*/
text 文本裁剪
盒子阴影
box-shadow: h v blur spread color inset;
h :水平方向偏移 x轴
v : 垂直方向偏移 y轴
blur : 模糊度
spread : 厚度
color : 颜色
inset :加上这个表示内阴影 默认是外阴影
第一个参数是x轴方向 第二个是y轴方向 第三个是模糊度 第四个是厚度 第五个是颜色
文字阴影
text-shadow : x y blur color
x轴偏移 y轴偏移 模糊度 颜色
多层阴影制作文字立体效果 ,设置多种颜色,中间以逗号隔开
text-stroke: 2px blue
通过设定1px的透明边框，可以让文字变得平滑
颜色设成透明能创建镂空字体
css3
`
transform
transition过渡动画属性
语法：当CSS属性时发生改变时，在一定时间内由起始值向结束值之间实现平滑过渡的动画效果
特点：1.只有两种状态，起始状态和结束状态
2.需要触发条件，例如js,伪类，媒体查询等
细分属性：
transition-property 过渡属性 all(默认值)
transition-duration 动画执行的时间 （必须设置）
transition-timing-function 动画类型（动画运行的速度）：ease（默认值）|linear|ease-in(进入时减速)|ease-out（出去时加速）|ease-in-out（先减速后加速）|贝赛尔曲线
transition-delay 延迟时间
复合写法
transition:all s linear s;
过渡动画效果的分析步骤：
1.确定过渡属性
2.找到过渡属性的起始值和结束值
3.在合适的位置上添加transition属性
transform
transform
2D变型方法
transform:rotate(45deg) 正（从前往后）->顺时针 负->逆时针 旋转
transform:scale(x,y) 默认值是1 <1缩小 >1放大 缩放
transform:skew(x,y) x:正->左 负->右 y: 正->下 负->上
transform:translate(tx,ty) tx：正->右 负->左 ty:正->下 负->上 平移
上述方法可以组合一起用，但是注意顺序问题,通常情况下，把translate()放在最后
transform-origin:center(默认在元素的中心点) 变型的基准点
rotate,skew,scale可以改变变型的基准点，但是translate()不能改变基准点，永远是元素的中心点
animation
animation调用声明的帧动画
1：animation-name:move;帧动画名称 （必写）
2：animation-duration:1s;动画执行的时间 （必写）
3：animation-timing-function：ease(默认值)|linear... 运行的速度（运动曲线）
- linear：线性过渡
- ease：匀速
- ease-in ：由慢到快
- ease-out:由快到慢
- steps(函数被划分为几步，start/end)默认值是end
- start忽略第一帧 end忽略最后一帧
4：animation-delay:1s 延迟时间
5：animation-iteration-count :1|infinite(无数次) 动画执行的次数
6：animation-direction:normal(默认值)|reverse|alternate|alternate-reverse 动画运行的方向
7：animation-play-state:running(默认值)|paused(停止) 动画运行的状态
8：animation-fill-mode:none(默认值:动画运行结束后回到起始状态)|backwards(从第一帧开始运行)|forwards（动画运行结束后停留在最后一帧）|both（开始运行时从第一帧开始，结束时停留在最后一帧）
背景类有8个属性
复合写法：
animation:move 1s linear 1s 2 reverse both;
有些属性就设置默认值，则有时可简写成如下这样：
animation:move 1s 1 1s both;
帧动画弥补了过渡动画的缺陷
特点：1.可以设置多种状态，可以制作复杂的动画效果
2.不需要触发条件，浏览器加载时直接可运行
语法：实现帧动画需要两个步骤：
@keyframes move{
form{
初始值
}
to{
}
}
1.通过@keyframes 动画名 设置动画运行的轨迹
@keyframes move{
0%{百分比指相对于时间的百分比
设置CSS样式
}
50%{
}
100%{
}
}
3D变型效果
在3D空间里展示必须设置如下两个属性：
transform-style:preserve-3d (3D空间里展示) 作用在变形元素的父标签上
perspective:800px 景深效果 （近大远小的效果）作用在祖先标签上,到Z轴0坐标位置的距离
perspective-origin:center (透视点位置，默认是在物体的中心位置上)
translate3d(tx,ty,tz);
translateX() translateY()
translateZ() 先找到正面，往正面的前面移动是正值，则看到的物体变大，往正面的后面移动，则看到的物体变小
scale3d(sx,sy,sz)
scaleX() scaleY()
scaleZ() 单个使用不起作用，必须配合着其他变型方法一起使用才起作用
rotate3d(rx,ry,rz,a)rx,ry,rz向量坐标 a角度
rotateX(15deg) 正->前翻 负->后翻
rotateY(45deg) 正->往右 负->往左
rotateZ() 效果等同于rotate()效果，但是这个是在Z上旋转
媒体查询
@media screen and
@media 媒体 媒介
媒体类型 all 所有类型
screen 设备类型
print 打印机类型
TV 电视机类型
连接符 and
only
not
条件（）
min-width
max-width
大括号 {
选择器{
属性名:属性值；
属性名：属性值
}
}
页面布局的方式有多少种
1：固定布局 宽高写死 px pc端
2：流失布局 百分比布局+媒体查询+px单位 常用pc和移动端公用一套页面结构
3：流式布局+rem单位 常用在移动端项目
4：flexbox 弹性布局 弹性盒模型 主要在移动端
响应式查询
meta:vp 快捷键
viewport：视口；
width:可视宽度
height：可视宽度
device-width物理设备宽度
user-scalable：是否允许用户缩放
initial-scale=1.0：初始缩放比例 1.0 是没有缩放 比1.0大的话，就是放大
maximum-scale=1.0：准许用户缩放到最大比例 1.0默认
minimum-scale=1.0：准许用户缩放到最小比例
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
媒体类型
screen 电脑 移动端 屏幕
print:打印机
all:所有设备
max-width: 小于等于
min-width:大于等于
orientation: portrait 检测竖屏
orientation: landscape 检测横屏
小于等于
@media screen and (max-width: 414px){
#box{
background: green;
}
}
大于等于
@media screen and (min-width: 415px){
#box{
background: red;
}
}
在800 -1000中改变
@media screen and (min-width:800px) and (max-width: 1000px){
#box{
background: #F82D2D;
width: 300px;
height: 300px;
}
}
检查竖屏
@media all and (orientation: portrait) {
#box{
background: red;
height: 400px;
}
}
检查横屏
@media all and (orientation: landscape){
#box{
background: green;
width: 500px;
}
}
流式布局
流式布局，又称佰分百布局
width:设置成百分比 一行五个每个设置百分之二十
rem
window.devicePixelRatio 像素比
像素比=设备物理像素/设备独立像素（css像素）
rem相对于根元素字体的单位 html
font-size=50px
1rem=50px
640/320=100/x
em 是根据上级父级
font-size=50px
1em=50px
动态计算根元素字体
var desW = 640;
function resfreshRem() {
var winW = document.documentElement.clientWidth;
document.documentElement.style.fontSize = winW / desW * 100 + 'px';
}
/*resize 事件 窗口改变事件*/
window.addEventListener('resize', resfreshRem)
audio 音频路径地址
autoplay自动播放 loop循环
src 音频的路径
autoplay 自动播放
loop 循环播放
preload 音频是否有预加载的效果
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
play(); 音频播放
pause(); 音频暂停
paused; 暂停的状态
canplay 缓冲到音频可以播放的状态
css3动画库
bounceInLeft 从左边飞入
bounceInRight 从右边飞入
bounceInUp 从下面飞入
zoomIn 从中间向两边展开
产品形态
1：
- pc跟移动端公用一套页面结构 - 域名地址同一个，有一个人独立完成猎豹，华为，mobike
2：
- pc和移动端分离开 - 域名地址不同- 由不同的人开发京东 淘宝 网易 腾讯 新浪
display: -webkit-box;/*控制他的方位*/
display: -ms-flexbox;
display: -webkit-flex;
-webkit-box-orient:vertical ;/*垂直方向
