字体引入
@font-face{} css3中一个模块，主要把自定义的web字体嵌入到你的网页之中
font-family: ;下载的字体名称
src:url( );字体文件
怪异盒模型
box-sizing:
border-box;怪异盒模型
content-box;标准
弹性盒
display: flex;
子元素默认横向排列
如果子元素是行内元素，行内元素会变成块元素
只有一个元素的时候，加上margin：auto 自动居中
flex-direction:弹性盒方向
row水平排列
column垂直排列
row-reverse反向水平排列
column-reverse反向垂直排列
主轴侧轴对齐方式
justify-content：；调整主轴对齐方向
flex-staet主轴靠左
flex-end主轴靠右
center主轴靠中间
space-between两端对齐方式
space-around自身左右两边相等
调整主轴水平垂直，justify-content:；也跟着调整
align-items：；调整侧轴对齐方式
flex-staet主轴靠左
flex-end主轴靠右
center主轴靠中间
折行与行间距
flex-wrap: wrap ;折行
align-content:；行间距
flex-staet主轴靠左
flex-end主轴靠右
center主轴靠中间
space-between两端对齐方式
space-around自身左右两边相等
项目对齐方式
align-self: ；
flex-start上
flex-end下
center中间
baseline
stretch拉伸（不设置高度）
项目调整顺序
order：；默认为零（数值越小越靠前支持负数）
项目剩余宽高
flex：1；占满剩余空间
滚动条消失
::-webkit-scrollbar{display: none;}
横向滚动
flex-shrink: 0;（可以让文字横着排)
加入其他css属性就可以实现横向滚动
多列布局
column-count: ;（填数值）显示的列数
column-gap: ;（填数值）调整列间距
column-rule: ;（和边框差不多）列边框
column-fill: ;（auto）列内容高度统一
column-width: ;（和宽度差不多）调整列宽度
column-span: ;（all）横跨所有列（一般写标题的时候用）
瀑布流
break-inside: avoid;（禁止盒子内部折行）
响应式布局-媒体查询
含义
媒体查询可以让我们根据设备显示器的特征（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定css样式
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、hright
和color……使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
@media all and （min-width：320px）{
body {background-color：blue；}
}
设备类型（默认为all）
media_type 设备类型说明
all 所有设备
aural 听觉设备
braille 点字触觉设备
handled 便携设备，如手机，平板电脑
print 打印预览图
projection 投影设备
screen 显示器，笔记本，移动端等设备
tty 如打字机或终端等设备
tv 电视机等设备类型
embossed 盲文打印机
screen是媒体类型里的一种，css2.1定义了10种媒体类型
and被称为关键字，其他关键字还包括not（排除某种设备），only（限定某种设备）
（min-width：400px）就是媒体特性，其被放置在一对圆括号中。
pc客户端或大屏幕设备：1028px 至更大
@media only screen and （min-width：1029px）{}
竖屏
@media screen and （orientation：portrait) ant（max-width：720px）（对应样式）
横屏
@media screen and（orientation：landscape）（对应样式）
em与rem
em：相对单位，相对于父元素的字体大小。div width：10em；
rem：相对单位，相对单位，相对于根元素（heml）字体大小，div width：10rem
