浏览器内核
IE Trident
firefox Gecko
Safari Webkit
Chrome/Opera Blink //Blink其实是Webkit的一个分支
前缀
-ms- 兼容IE浏览器
-moz- 兼容firefox
-webkit- 兼容chrome 和 safari
-o- 兼容opera
//注意带兼容的要写在最前面
100vh 就是百分百窗口高
100vw 百分百窗口宽
@keyframes 动画名字{
0% {}
100%{}
} //这里的%是时间的百分比
animation: move 2s liner 0s 1 alternate forwards; //alternate过去算一次，回来算一次 前面2个属性必写
简写属性里面不包括animation-play-state
暂停动画 animation-play-state:paused 经常和鼠标经过等配合使用
alternate 去回
forwards 在结束位置停住
backwards 回到开始位置（默认）
除来liner 还可以用步长
animation: move 2s steps(5);
过渡
transition: all/width 0.3s liner 3s; //哪个需要过渡写在哪个上面 通常与hover搭配使用
渐变
background: linear-gradient(right,red,blue); //逗号分隔 top bottom left right
background: linear-gradient(0deg,red 0%,blue 100%); //0deg是向上方向为顺时针
属性选择器
input[type]
input[type=text]
伪类选择器
:first-child 第一个子元素
:last-child 最后一个
:nth-child(n) 第n个 n从0开始
:nth-child(1) 第一个子元素
:nth-child(-n+3) 前面3个
:nth-child(n+3) 从第3个开始往后
:nth-child(3n+1) 3个为一组
:nth-child(even) 偶数
:nth-child(odd) 奇数
:first-of-type 指定类型第第一个
:nth-of-type(n) 指定类型第第n个
权重为10
伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的末尾插入内容
//注意这个权重为1
transform
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);
文档流会占位，不会影响其他元素的位置
对行内标签没有效果
translate中对百分比单位是相对于自身元素的
transform: rotate(45deg);
角度为正时，是顺时针，负时为逆时针
默认旋转的中心点是元素的中心点
transform: scale(x,y);
transform: scale(x);
两个参数一样的话可以只写一个
默认以中心点缩放
文档流会占位，不会影响其他元素的位置
transform-orgin: x y; //注意不用逗号隔开
可以使用方位名字和像素还有百分比
transform-orgin: left top;
transform-orgin: 50% 50%;
//注意
transform: translate() rotate() scale()
当同时有位移和其他属性的时候，要把位移放到最前面，因为先旋转会改变坐标轴方向
background-position:left top; //背景图片设置 可以是px也可以是方位名词
background-size:100px 100px; //设置图片的尺寸
cover: 按比例等比填满
contain: 完整显示，有一边到了就不拉伸了
background-attachment:scroll //默认值
background-attachment:fixed // 参照物都为窗口
vertical-align:默认与基线对其
通常是左边有一张图，右边文字。需要垂直居中对齐vertical-align: middle;
注意: 对块级元素无效