css3-2

css读取顺序从右往左

3D学习

景深:指的是物体近大远小的效果
是一个不可继承属性，但他作用于它的后代元素（不做用于本身）
原理：景深越大，灭点越远，元素变形越小，反之
perspective:depth深度的意思用px perspective:100px 一定要在一个包裹器上
另一种写法作用于本身transform：perspective（）使用这种写法 perspective必须放在首位不然没有效果
//例子 transform：perspective（perspective rotate(360deg)）
：hover{transform：perspective（perspective rotate(0deg)）}//一般不会用
灭点：指的是三D图形各延申线所产生的相交点，透视点的消失点
perspective-origin(视角的位置，默认值为50% 50%)
transform只能用在块级元素
animation动画
/动画内的属性/
animation-name: demo;
animation-duration: 2s;/不能为负值 设置时间/
/animation-timing-function: ease;先加速后减速/ timing-function 作用于每两个关键帧之间，而不是整个动画 step
steps函数，它可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。
第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end
animation-timing-function: linear;/匀速/
animation-delay: 3s;/延迟时间 这个是动画外的属性/
/* transform: translate3d(-50%,-50%,0);设置垂直水平居中的*/
animation-iteration-count: 3;/转动次数，只管动画内的属性值 所以上面只执行延迟一次 重复的也是关键帧/
animation-direction: normal;/改变方向有四个属性 反转的是关键帧 默认值是normal alternate轮流反转/
/元素在动画外的状态 from之前 to之后/
animation-fill-mode: backwards;
/backwards from之前的状态与from的状态保持一致/
/foreards from之后的状态与to的状态保持一致/
/both backwards+forwards/
animation-play-state: paused;/控制动画是否暂停 默认值为running/
斯基兔的实现
#demo1{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 48px;
height: 48px;
background-image:url(animation.png);.8s执行from到to
animation:tjs .8s steps(12,end) infinite;/steps将from到to分成12个阶段来完成，而不是整个keyframes/
}
@keyframes tjs{
from{
background-position: 0 0;
}
to{
background-position: -576px 0;
}
}

flex弹性布局

		弹性盒模型，分老版（box）与新版(flex)
		要分清flex容器（就是包裹器）
		flex项目  项目永远在主轴的正方向上排列
		**老版主轴与侧轴分别是哪一根**以及**主轴排列方向**
		-webkit-box-orient:horizontal 主轴是水平方向上的那个
		-webkit-box-orient:vertical 主轴是垂直方向上的那个
		-webkit-box-direction：reverse//决定主轴方向(富裕空间跟他没关系)
		**新版主轴与侧轴分别是哪一根**
		给容器加上display:flex以及flex-direction:row 行就是水平上的
		flex-direction:column-reverse列垂直方向上的  决定主轴排列方向也是这个属性（在正方向上排列）reverse（从右往左）normal从左往右
		**老版富裕空间管理（主轴）****只决定富裕空间的位置，不会给项目分配空间**
		**-webkit-box-pack: justify;
			/*start 富裕空间在最右边（x） 最下边（y轴）
			 * end 富裕空间在最左边（x）	最上边（y轴）
			 * center 在两边
			 * justify 在项目之间
			 /**
			 **老版富裕空间管理（侧轴）**
			 -webkit-box-align:start 富裕空间在最下 富裕空间在最右边（主轴x） 最下边（主轴是y轴）
			 end		富裕空间在上面
			 center	富裕空间在两边

		**新版本富裕空间管理(主轴）**
			justify-content：flex-start 切记富裕空间在主轴的正方向
			justify-content：flex-end 富裕空间在主轴反方向
			center 富裕空间在两边
			space-between 富裕空间在项目之间
			space-around(box老版没有) 富裕空间在项目两边
			
			**新版本富裕空间管理(测轴）**
			align-items
			stretch拉伸所有行/列来填满剩余空间，剩余空间平均的分配给每一行/列
			flex-start 切记富裕空间在侧轴的正方向
			flex-end 切记富裕空间在侧轴的反方向
			center 富裕空间在项目两边（box没有）
			baseline 按基线对齐
			**富裕空间管理 只决定富裕空间的位置，不会给项目去分配空间**
			
			**弹性空间管理是项目上的属性**
			老版本-webkit-box-flex:0 弹性因子
			弹性空间管理是把主轴上富裕空间按比例分配到项目上
			#wrap{
			width: 300px;
			height: 400px;
			border: 1px solid;
			display: -webkit-box;
		}
		.item{
			width: 50px;
			height: 50px;
			background: pink;
			text-align: center;
			-webkit-box-flex: 1;//每个item分一个比例//老版本
		}
		
		**新版本**
		弹性空间管理flex:0默认值
		#wrap{
			width: 300px;
			height: 400px;
			border: 1px solid;
			display: flex
		}
		.item{
			width: 50px;
			height: 50px;
			background: pink;
			text-align: center;
			flex-grow: 1;//与上面方法一样 弹性因子
		}
		
		**flex容器新增版本**
		flex-wrap nowrap 默认值 规定灵活项目不拆行或不拆列（相当于无侧轴） wrap必要时拆行拆列 wrap-reverse 必要时拆行拆列但是以相反的顺序
		flex-flow 属性是设置“flex-direction”和“flex-wrap”的简写 默认值row nowrap 不可继承
		控制主轴和侧轴的位置和方向
		当单行单列时,align-items
		多行多列时，富裕空间的管理，会把所有行，列看成一个整体align-content
		
		**新版本项目新增**
		order将项目进行排序，数值越小越靠前
		flex-basis：伸缩规则计算的基准值（默认拿width或height的值）
		align-self自己管理自己的富裕空间 auto.....有六个值
		flex-shrink：收缩因子（默认值为1）


6.伸缩规则
	flex-basis（默认值为auto）
	flex-grow（默认值为0）
		可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)//当flex-basis指定值的时候富裕空间与可用空间不相同
		可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
		每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
	flex-shrink（默认值为1）
		   --.计算收缩因子与基准值乘的总和  
		   			var a = 每一项flex-shrink*flex-basis之和
		   --.计算收缩因数
		                     收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
		             var b =  (flex-shrink*flex-basis)/a
		   --.移除空间的计算
		                      移除空间= 项目收缩因数 x 负溢出的空间 
		             var c =    b * 溢出的空间      

7.侧轴富裕空间的管理
	单行单列
		align-items
		align-self（优先级高）
	多行多列
		align-content（优先级比上面的高）
练习 http://flexboxfroggy.com/
8.flex的简写属性
	flex:1  (flex-basis:0% flex-grow:1 flex-shrink:1)**建议初学者不要用语法糖**
	等分布局	

#wrap{
width: 100px;
height: 400px;
border:1px solid black ;
display: flex;

		}
		#inner{
			width: 50px;
			height: 50px;
			background:pink;
			flex-grow: 1;
			flex-basis: 0;/*将五个项目元素都等于0，此时富裕空间400，再一一分配给五个项目元素*/
			/*flex-shrink: 0;当flex-basis等于0时，他不起作用
		}

响应式布局

###响应式布局核心 CSS3媒体查询选择器
@media 媒体类型 and(关键字) 带条件的媒体属性 and 带条件的媒体属性 {
//规则
}

媒体类型
	all
	screen
	print
	
媒体属性
	
	width：浏览器的窗口尺寸
	device-width：设备尺寸
	device-pixel-ratio（必须加webkit前缀）：像素比
	pc端像素比为1
	手机端具体看参数
		---以上三个媒体属性可加 min 和 max 前缀
				min：最小值为谁
				max：最大值为谁
	
	横竖屏切换
		orientation：landscape（横屏）
		orientation：portrait （竖屏）
关键字
	only：处理浏览器兼容问题，让老的浏览器失效
	and：连接一条查询规则,一般连接媒体类型与媒体属性
	,：连接多条查询规则 两条数据的时候相当于或的意思
	not：取反
	多列布局
	#wrap{
			border: 1px solid;
			width: 600px;
			margin: 0 auto;
			/*column-width:100px;*/ 栏目宽度
			column-count:3;栏目列数
			column-gap:40px;栏目间距
			column-rule:1px solid red;栏目分割线
		}

预编译处理器less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量，MIxin,函数等特性，使css更维护和扩展
less既可以在客户端运行，也可以借助node.js在服务端运行
less编译工具-----koala
less注释
以//开头的注释，不会被编译到css的文件中
以/**/包裹的注释会被编译到注释中
less中的变量
使用@来申明一个变量：@pink:pink;
1.作为普通属性值来使用：直接使用@pink
2.作为选择器和属性名：@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载
.class{
@var:1;
.brass{
@var:2;
three:@var;//3,变量会延迟加载，等.brass执行完在加载
@var:3;
}
one:@var
}*/
less中的嵌套规则
1.基本使用规则
2.&的使用

less混合
混合是将一系列属性从一个规则集引用到另一个规则集
1.普通混合#XXX
2.不带输出的混合#XXX()
3.带参数混合#XXX(@X)
4.带参数且有默认值的混合#XXX(@X:10px)
5.带多个参数的混合
6.命名参数@X:10px
7.匹配模式：相同的放在一个结果集里面#triangle()，再定义相同的名字把不相同的放进去#triangle(参数)，
8.argument变量
.border(@1,@2,@3){
border:@arguments;
}
.wrap>.inner{
.border(10px,soild,black);
}
less运算
简单的加减乘除计算
less继承
继承实质上将.father选择器和#test组合成一个选择器，声明块使用.father的
all：继承所有和.father相关的声明块（切记父类不能定义混合）

#test{
&:extend(.father(一个父类))
}
性能比混合好，但没有混合灵活
.juzhong {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}

继承.less主文件
@import “mixin/conter-extend.less”;
.wrap{
position: relative;
border: 1px solid;
width: 300px;
height: 300px;
margin: auto;
.inner:extend(.juzhong){/继承不能不能用参数形式的/

    &:nth-child(1){
        width: 100px;
        height: 100px;
        background: red;
    }
    &:nth-child(2){
        width: 200px;
        height: 200px;
        background: yellow;
    }
}

}
2.less的避免编译
~“不会被编译的内容”,变量在less中属于块级块级作用域，延迟加载