CSS3的文件引入、新的盒子模式

1、外部文件引入
引入字体文件

<style>
	@font-face{
		src:url(地址)
		font-family:fontname<!-- 这里是定义引入的字体名称 -->
	}
</style>

2、怪异盒模型
怪异盒是指更改计算盒子的方式：
之前是设置了盒子的宽高后，如果设置了边框厚度、内边距后，盒子就会相应的扩大，盒子里面的内容的宽高不变；
怪异盒是盒子宽高不变，盒子里面的内容的宽高相应减小；
通过属性box-sizing，默认值是content-box，表示标准盒，border-box表示怪异盒
这个怪异盒一般用于多布局，为了防止因为设置了边框、内边距的原因导致空间不够，内部的盒子会挤压下去，通过怪异盒进行控制

3、弹性盒
弹性盒的目的是改变内部元素的排列方式，用的是disaply属性，值为flex；
造成的影响：设置了disaply=flex的内部元素默认是横向排列，且行内元素变为块状元素；
如果需要内部元素纵向排列，可以在弹性盒中设置flex-direction为column，row是默认值，row-reverse表示横向反向排列，column-reverse表示纵向反向排列；
调整内部元素对齐方式用justify-content属性，默认值flex-start表示正常排列，flex-end表示反向对齐，center表示居中，space-between表示两边对齐，元素均匀分散，space-around表示内部元素之间和边框平均显示距离；
侧轴方向的对齐方式用align-items，值除了space类不支持，其它都一样；
如果一行的元素过多，会相应的挤压内部元素的尺寸，不会换行，可以通过flex-wrap=wrap设置自动换行，这个换行是等间距排列，可以通过align-content控制行间距，值跟justify-content的一样

4、项目
项目是指设置了flex盒子内部的小盒子，针对内部单个盒子的设置属性是align-self，值有flex-start、flex-send、center、baseline、stretch（默认值，侧轴拉伸），设置这些属性时不影响其它小盒子的位置，其中值为stretch时，不能设置该小盒子的侧轴长度，否则不生效；
调整单个盒子的排列顺序属性order，值为数字，数字越大，越在后面，默认是0；
主轴长度自适应属性flex，值为数字，默认是0，如果同轴多个小盒子都有flex属性，那么这些属性按照值的比例占满剩余的空白