css3新增标签以及弹性盒子

景深（透视）

	可以实现近大远小的效果,让3d更加的逼真。

步骤

		1.给舞台找个大盒子
		2.在大盒子上写perspective，单位是px,值越大，
			    物体距离眼睛越远，看着就越小，如果之越小，物体距离眼睛越近，看着就越大。
			    景深的数值⼀般建议设置在900-1200px之间

背面不可见

	backface-visibility: hidden;

新增的标签

块元素

		header===可以写一些头部区域
		footer===写页面的尾部区域
		nav===写导航区域
		section===类似于div，用来划分板块的
		main====一般是用来划分页面的主要内容区域的
		article====一般可以用来写页面的文章区域
		aside=====侧边栏，一般可以划分侧边栏区域
		figure标签一个会结合figcaption标签一起使用，类似于自定义列表，可以用来写一些图文混排效果
		figcaption===一般是用来写解释性文字的
		hgroup====一般可以用来写标题组

行内：(以下的标签都有可能会出现兼容问题)

		mark====标记标签，自带黄颜色的背景色
		time====时间标签，一般里面可以写一些时间，比如新闻条后面的时间
		dialog====可以用来写一些对话框或者弹框之类的效果
		embed：定义外部的可交互的内容或插件、比如flash

多媒体标签

视频标签：vedio

			src属性：视频的路径
			        controls属性===播放控件 
			        autoplay属性===自动播放，要想自动播放，在谷歌里面必须要静音才可以
			        muted===静音
			        loop===循环播放
			        允许调整宽度和高度（可以在标签上写宽度和高度属性，也可以通过css调整）
			        poster===封面图

音频标签：audio

		同视频标签
		source标签：（source媒介元素，video和audio就是媒介资源）
			a)	允许可替换的视频、音频。提供给浏览器进行媒体类型的选择
			b)	type属性值：
				i.	视频的：video/ogg video/mp4 video/webm
				ii.	音频的：audio/ogg   audio/mpeg4(mp4)   audio/wav/mp3
			这种写法是为了解决浏览器的兼容问题的，因为有些浏览器可能不支持某一种视频格式，所以我们可以在source里写很多的视频格式供浏览器选择。

弹性盒子

		用来控制子元素的布局

新概念：

		容器：父元素（放子元素的盒子）
		项目：子元素（所有弹性盒子里面的子元素）
		形成弹性盒子的语句：display:flex；

特点：

		1.元素变成弹性盒子，子元素默认会横向排列
		2.当父元素变成弹性盒子。子元素无论是什么类型元素,都能设置宽高
		3.margin:auto是生效的
		4.如果子元素大于父元素的宽度,不会超出父盒子和换行,会让子元素挤压

轴的概念：

		主轴在哪个方向需要我们去设定
		如果主轴为横向，那么侧轴为纵向
		如果主轴为纵向，那么侧轴为横向
		元素默认沿主轴排列

父元素之上

主轴：

			1.设置主轴方向----flex-direaction
				row-将主轴设置为横向，元素从左到右---默认值
				row-reverse----元素从右向左
				column----将主轴设置为纵向，元素从上到下纵向排列
				column-reverse----元素从下到上排列
			2.设置子元素在主轴上的对齐方式justify-content
				flex-start---元素放在主轴的起点
				flex-end---元素放在主轴的终点
				center----元素放在主轴的中间 
				space-between------元素的两端对齐（第一个和最后一个贴边，中间元素自动分配间距）
				space-around------中间元素的间距是贴边元素的两倍
				space-evenly------每个元素间距完全一样

侧轴（交叉轴）：

			3.元素在侧轴的对齐方式align-items
				flex-start----元素放在侧轴的起点
				flex-end------元素放在侧轴的终点
				center------元素放在侧轴的中间
				stretch-----拉伸，要想看到效果子元素不能设置宽度或高度
					如果侧轴在纵向，就不能定高度
					如果侧轴在横向，就不能定宽度
			4.让子元素换行---flex-wrap
				nowrap---不换行，默认值
				wrap---换行
				wrap-reverse----反向换行
			5.设置元素的多行对齐方式（对于单行不起作用）align-content
				flex-start----多行元素统一放在起点，行与行之间没有间距
				flex-end----多行元素统一放在终点，行与行之间没有间距
				center----多行元素统一放在中间，行与行之间没有间距
				space-between------元素的两端对齐（第一个和最后一个贴边，中间元素自动分配间距）
				space-around------中间元素的间距是贴边元素的两倍

子元素之上

		1.align-self====控制自己在侧轴上的对齐方式（想当都调整谁，就给谁写）
			flex-start
			flex-end
			center
			baseline
			stretch
		2.order:排序，控制子元素的排列顺序，数字越大越往后排，默认0，支持负数
			注意：不带单位
			非必要不调整
		 3.flex:数字;   用来分配剩余空间的
		4.flex-shrink：======元素是否挤压，一般用于制作移动端的横向滚动。
			a)0=====不挤压
			b)1=====挤压（默认值）