1-私有前缀
谷歌、苹果浏览器：-webkit- -webkit-transform: rotate(45deg);
火狐浏览器：-moz- -moz-transform: rotate(45deg);
IE浏览器：-ms- -ms-transform: rotate(45deg);
欧朋浏览器：-o- -o-transform: rotate(45deg);
2-元素选择器
id id选择器
class 类选择器
标签 标签选择器
* 通配符
3-关系选择器
E F
父代选择器
E > F
子代选择器
E+F
相邻选择器
E~F
兄弟选择器 E后面的所有F的兄弟
4-属性选择器
li[skill]
选中有skill属性的元素
li[skill='j']
选中有skill属性，且值为j的元素
li[skill^='j']
选中有skill属性，且值以j开头的元素
li[skill$='j']
选中有skill属性，且值以j结尾的元素
li[skill*='j']
选中有skill属性，且值任意位置存在j的元素
li[skill~='j']
选中有skill属性，且以空格隔开存在值为j的元素
li[skill|='j']
选中有skill属性，且以j开头，以-连接，的元素
5-伪类选择器
child系列：
E：first-child
E的父级元素的第一个子级元素
E：last-child
E的父级元素的最后一个子级元素
E:nth-child(index)
E的父级元素的任意下标的子级元素
index的值从1开始
E：nth-last-child(index)
从后往前，E的父级元素的任意下标的子级元素
index从1开始，1代表最后一个元素
E:only-child
选中E的父级只有唯一的子集元素
E是独生子女
of-type系列
E:nth-of-type(index)
查找E的父级元素的任意下标的子级元素，注意必须是E同类型的元素
E:nth-last-of-type(index)
查找E的父级元素的任意下标的子级元素，注意必须是E同类型的元素
E:first-of-type
查找E的父级元素的第一个的子级元素，注意必须是E同类型的元素
E:last-of-type
查找E的父级元素的最后一个的子级元素，注意必须是E同类型的元素
E:only-of-type
选中E的父级只有唯一的子集元素，注意必须是E同类型
E是独生子女
其他
input：focus()
获得焦点的时候
p:not(:last-child)
除了最后一个元素之外
input:checked
单选或者复选被选中
input:enabled
输入框启用
6-伪元素选择器
div::after
在div内部最后面添加一个伪元素
div::before
在div内部前面添加一个伪元素
div::first-letter
选中第一个文字
div::first-line
选中第一行
div::selection
被选中的文字
div::placeholder
占位文本
7-查看文档
[] 表示全部可选项
||表示或者
| 表示多选一
? 表示0个或者1个
* 表示0个或者多个
{2,3} 表示范围，最多3个，最少2个
8-文字阴影
text-shadow
语法 text-shadow(参数1 参数2 参数3 参数4，参数1
参数2 参数3 参数4...)
参数1 水平偏移，自左往右为正，单位px
参数2 垂直偏移，自上往下为正，单位px
参数3 羽化值(模糊值)，单位px
参数4 颜色，取值十六进制，英文表示法，rgba
可以同时写多组
9-边框阴影(盒子阴影)
box-shadow
语法 box-shadow(inset，参数1，参数2，参数3，参数4，参数5);
inset 可选，写上代表内部盒子阴影渲染
参数1 水平偏移，自左往右为正，单位px
参数2 垂直偏移，自上往下为正，单位px
参数3 羽化值(模糊值)，单位px
参数4 总体延伸值
参数5 颜色，取值十六进制，英文表示法，rgba
可以同时写多组
10-盒子模型
标准盒子模型
box-sizing = content-box
，默认值
盒子的大小=width+padding+border
如果盒子的内容或者padding，或者border发生改变，那么盒子的大小也会发生改变
怪异盒子模型
box-sizing = border-box
自动內减
盒子的大小=width
如果盒子的padding或者border发生改变，盒子的大小不变，内容大小发生改变
/***************************************************/
1.背景图片的大小 background-size：百分比/像素/contain/cover
2.背景裁切 background-clip ：border-box / padding-box / content-box / text
3.设置原点的位置 background-origin ：border-box /padding-box/content-box
4.线性渐变
background-image：linear-gradient（）
取值：to right/left/top/bottom
默认值to bottom
例如：background-image：linear-gradient(to right ,red 50% , pink 50%)
5.径向渐变
background-image:radial-gradient()
语法格式background-image:radial-gradient(半径 at 方向，颜色1，颜色2，....)
半径取值像素
6.过渡
transition
过渡效果：transition-property
过渡时间：transition-duration
延迟时间：transition-delay
设置动画类型：transition-timing-function
7.2d转换
transform：scale
取值scaleX(倍数)/scaleY(倍数)/scale(倍数1)
整体的缩放
transform：translate
平移
translateX(值)/translateY(值)/translate(水平，垂直)
子主题 3
transform：rotate
旋转
rotateX/rotateY/rotate(水平，垂直)
注意点：
如果取值为正，那么是沿着顺时针的方向，负值沿着逆时针的方向
transform：skew
斜切
skewX/skewY/skew(水平，垂直)
2d合写问题
1.transform只能写一个
2.如果要实现多个旋转，要使用空格隔开
3.有顺序问题，rotate会改变坐标轴方向
/******************************************************/
3d转换
1.perspective
视距，能够实现近大远小的效果
值越大效果越不明显，值越小效果越明显
一般设置值为1000px
2. 3d必不可少的属性 transform-style:preserve-3d
3. perspective和transfor-style的区别
perspective的属性能实现视距上的近大远小的效果，但不是必须的
只有设置了transform-style才能使当前元素为3d元素
4. 过渡结束时事件 transitionend
/*******************************************************/
声明单个动画：@keyfrmes 动画名称{
from{}
to{}
}
声明多个动画 @keyfrems 动画名{
0%{}
50%{}
100%{}
}
使用动画：
选择器{
animation：动画名称 时长 次数
}
animation的属性
动画名称 animation-name
动画效果时间 animation-duration
动画延迟时间 animation-delay
动画效果 animation-timing-function
取值 linear ease steps
动画次数 animation-iteration-count
取值 infinite 无穷， 数值
动画方向 animation-direction
取值 normal from--->to
reverse to--->from
alternate from-->to-->from-->to.....
动画的状态 animation-play-state
取值 paused 暂停
结束时状态 animation-fill-mode
取值 forwards 停留在结束状态（to/100%）
backwards 停留在开始状态
both 停留在动画结束状态
如果动画序列为from ->to 且没有设置其他的参数 both的值和forwards一致
both的值和forwards的值可能一致，看情况而定
2.字体图标的使用
字体图标的原理
在字体图标的css文件中，使用@font-face定义一个字体，然后又将相应的字体文件和css文件放在一起，这样用户不需要下载和安装字体就能够直接使用了
优点
将字体打包成字体库，减少字体的请求
具有矢量性，不容易失真
使用灵活，便于维护
3.flex布局
弹性布局
给一个盒子设置display：flex属性，这个盒子被称为弹性盒子，就有了主轴和侧轴之分，可以对其子元素实现弹性布局
主轴 默认水平向右的方向
侧轴 默认垂直向下的方向
flex-direction（父） 调整主轴的方向，默认是水平向右
取值 row 水平向右 默认
row-reverse 水平向左
colum 垂直向下
colum-reverse 垂直向上
justify-content（父）用来设置子元素在主轴上的位置
取值 flex-statr 从左往右
flex-end 从右往左
center 主轴居中
space-around 主轴均分对齐，两端不贴边
sapce-between 主轴分散对齐，两端贴边
align-items（父）用来设置单行子元素在侧轴上的位置
取值 flex-statr 最上面
flex-end 最下面
center 中间
lign-content（父）用来设置多行行子元素在侧轴上的位置
取值 flex-statr 向上对齐
flex-end 向下对齐
center 居中对齐
space-around 均分对齐不贴边
space-between 均分对齐，贴边
flex换行（父） flex盒子默认不换行，只会在主轴上排成一行
flex-wrap： wrap 换行
nowrap默认不换行
align-self（子）设置元素自身的侧轴对齐方式，优先级高于父级设置的
取值 flex-statr /flex-end/center/space-around/sapce-between
flex（子） 设置当前子元素，分配主轴的剩余空间
取值：数字
order（子）设置排序，值越小越靠前
取值：数字
/*****************************************/
1. ie的条件注释
<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->
2.classList操作类名
添加一个类 div.classList.add('类名');
移除一个类 div.classList.remove('类名');
切换一个类 div.classList.toggle('类名');
是否包含一个类 div.classList.contains('类名');
3.自定义属性获取的方法
语法：元素.dataset.名称
单杠 <div data-url='www.baidu.com'></div>
div.dataset.url
多杠 <div data-document-get-element ="chang" ></div>
获取方式：div.dataset.documentGetElement
4.网络状态
online 无网到有网触发
window.addEventListener('online', function() {
div.innerText = "你已经回来了"
})
offline 有网到无网
window.addEventListener('offline', function() {
div.innerText = "你已经进入了没有网络的空间"
})
5.地理位置
navigator.geolocation.getCurrentPosition(function(position) {
console.log('恭喜你，获取成功了', position)
}, function(error){
console.log('获取地理位置失败', error)
});
6.web存储的三种方式
cookie
设置 document.cookie=“name=changjie”；
获取 var name = document.cookie('name'); console.log(name);
sessionStorage
设置 window.sessionStorage.setItem('age','18');
获取 window.sessionStorage.setItem('age');
移除 window.sessionStorage.removeItem('age');
清空 window.sessionStorage.clear('age');
localStorage
设置 window.localStorage.setItem('age','18');
获取 window.loaclStorage.setItem('age');
移除 window.loaclStorage.removeItem('age');
清空 window.loaclStorage.clear('age');
网友评论