Css 层叠样式表 (Cascading Style Sheets)，定义了如何显示HTML元素
*padding不可设置为负值
1.animation 动画
摘自：https://www.jianshu.com/p/ed11f8c26992
·animation-name @keyframes的名字
·animation-duration 动画持续时间，默认0表示无动画，单位可以设s或ms
·animation-timing-function 动画播放方式，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。
·animation-delay
延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s或ms,允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s动画开始，但前两秒动画被跳过。
·animation-iteration-count
动画循环播放的次数，默认值是1，即放完一遍后不循环播放。初数字外也可以设关键字infinite表示无线循环播放。
·animation-direction
动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次正常播放，偶数次反响播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。
·animation-play-state
动画的状态，可设running，paused。默认值running表示正在播放动画，paused表示暂停动画，通常在js端使用该属性。
·animation-fill-mode
动画的时间外属性，可设none,forwards,backwards,both。默认值none表示动画播完后，恢复到初始状态。forwards当动画播完后，保持@keyfremes里最后一帧的属性。backwards表示开始播动画时，应用@keyframes第一帧的属性，both 表示两者都应用
·@keyframes
动画帧是区别animation和transition的关键，在transition中无法更细致的控制时间段内执行的动作，在animation中用@keyframes可以细致的指定。@keyframes开头，后接animation-name.实体内可以创建百分比来划分时间段，关键字from等于0%，to等于100%。
浏览器前缀
@-moz-keyframes Firefox
@-webkit-keyframes Chrome和Safari
@-o-keyframes Opera
@-ms-keyframes IE9
2.transition
详细介绍：https://www.jianshu.com/p/56f8ddafc63f
本质是在线性时间内将属性从开始值过渡到结束值，指定在某时间段内将属性值平滑过渡，增强用户体验。
·tansition-property
指定需要过渡的css属性。只有能数量化的css属性才能过渡。
例如颜色系：color,background-color,border-color,outline-color
数字系：width,height,top,right,bottom,left...
all:所有属性都将获得过渡效果
·tansition-duration
过渡需要的时间，单位可指定s,也可指定ms,默认值是0，表示立刻变化，如果设置了多个过渡属性，但每个属性过渡时间一样，没必要为它设置多个值，只需设一个即可，该值会应用到所有过渡属性上
·tansition-timing-function
过渡函数，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其实它们都是贝赛尔曲线。
·tansition-delay
延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作，单位是s或ms
3.transform 变形函数，分别是translate位移，scale缩放，rotate旋转，skew倾斜，matrix矩阵
2D转换
translate(x,y) 横向移动长度x,竖向移动长度y，平移不变形，角度不变
translateX(x)
translateY(y)
rotate(angle) 旋转角度，参数为正值，顺时针旋转，参数为负值则逆时针旋转，不变形，角度变
scale(x,y) 宽度变为原来尺寸的x倍，高度变为原来的y倍，放大或缩小，角度不变
scaleX(x)
scaleY(X)
skew(x,y) 围绕x轴翻转x,围绕y轴翻转y,往X轴方向倾斜，往Y轴方向倾斜，正值表示向正方向倾斜，负值表示往负方向倾斜，变形，角度也变
skewx(X)
skewy(X)
matrix() 把所有的2D转换方法组合在一起，需要6个参数，允许旋转，缩放，移动以及倾斜
3D转换
translate3d(x,y,z) x轴移动x，y轴移动y，z轴移动z
translateX(x)
translateY(y)
translateZ(z)
rotate3d(x,y,z,angle)
rotateX(x)
rotateY(y)
rotateZ(z)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
matrix3d()
4.position 元素定位
position: absolute;
绝对定位，脱离标准文档流，标准文档流的性质（暂时理解为不按原来的样式排列）绝对定位之后都不遵循了，元素位置通过'left','top',;'bottom','right'属性进行规定
position: fixed;
绝对定位，相对于浏览器窗口进行定位，脱离标准文档流 ,页面如何滚动，这个盒子的位置不变。元素通过'left','top',;'bottom','right'属性进行规定
position: relative;
相对定位，相对于其正常位置进行定位，'left:-20px'就是在正常位置基础上往左偏移20像素
position: static;
默认值，没有定位，元素出现在正常的流中
position: inherit;
从父元素继承position属性
*标准文档流 元素排版过程中，自动从左往右，从上到下流式排列。并在每行中从左到有的顺序排放元素。
标准文档流等级：
块级元素 （p,div,h,ul,ol,dl,li,dt,dd）
霸占一行，不与其它元素并列
能接受宽、高
如果不设置宽，则默认继承父元素的宽度
行内元素 (span, strong, em, br,img,input,label,select,textarea)
与其它元素并排
不能设置宽高。默认的宽度就是文字的宽度
行内元素与块级元素可以相互转换
display:inline 行内元素 display: block; 块级元素
文本级：p、span、a、b、i、u、em
容器级：div、h系列、ul、dl、ol、li、dt、dd
5.top与margin-top区别
margin-top会给相对定位的父元素增加边框距离，top是移动块元素
6.浮动
float脱离文档流
float实现浮动 clear清除浮动
7.伪元素 向某些选择器设置特殊效果
::before 可以在元素的内容前面插入新内容
::after 可以在元素的内容之后插入新内容
:first-line 用于向文本的首航设置特殊样式
: first-letter 用于向文本的首字母设置特殊样式
8.伪类 向选择器增加特殊效果
伪类名称对大小写不敏感
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到连接上 a:hover必须位于a:link和a:visited之后，才是有效的
a:active {color: #0000FF} 选定的链接 必须位于a:hover之后
:focus 获取焦点 输入框
:first-child 向元素的第一个元素添加样式
: lang 向带有指定lang的元素指定样式
9.opacity 透明度
opacity 1照常显示
10.@media规则
媒介类型名称对大小写不敏感
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
