1
------------恢复内容开始------------
box-sizing
box-sizing = content-box;（默认值）
css设置的宽度是容器内容的宽度（不包含边框或内边距），当改变border或padding的时候会搞乱布局。
box-sizing = border-box;（推荐清除默认样式时用）
css设置的宽度为容器整体的宽度（包括边框或内边距等内容），怎么操作都不会搞乱布局。
图标字体
阿里巴巴矢量图标库：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
1、搜索想要的图标加入购物车
2、完成后点击购物车添加至项目
3、使用方法有很多，这里使用Font class 下载到本地的方式。（在css3中学过Unicode方式）
4、解压，选择用到的东西复制到自己的font目录
5、在自己的html中引入iconfont.css
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
6、在阿里巴巴图标库 -> 我的项目中，选择要的图标字体，复制class名
7、在i标签的class中粘贴使用，第一个class名iconfont不能更改。
<i class="iconfont 粘贴到这里"></i>
8、在css中可以对iconfont类进行更改，如字体大小、字体颜色等。
Flex布局
//Flex 是 Flex Box 的缩写，意为“灵活的盒子”或“弹性的盒子”，所以flex布局一般称为弹性布局。
flex容器：所有含有 display:flex | inline-flex; 的容器都是flex容器。
flex项目：flex容器的所有子元素都是flex项目。（不包括孙元素）
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
display属性
display:flex;
沿主轴方向，作为弹性伸缩盒显示，有固定宽度。
display:inline-flex;
沿主轴方向，作为弹性伸缩盒显示，宽度由内容撑开。
//类似display:block与display:inline-block
flex-direction属性
//决定主轴的排列方向，默认 flex-direction:row ，起点在左边
row-reverse
主轴为水平方向，起点在右边
column
主轴为垂直方向，从上往下排
column-reverse
主轴为垂直方向，从下往上排
flex-wrap属性
//决定是否换行和怎样换行，默认flex-wrap:nowrap; 默认不会换行，所有东西都压缩到一行显示。
wrap
自动换行，不会压缩，第一行在上面，依次往下换行
wrap-reverse
自动换行，不会压缩，第一行在最下面，依次往上换行。
flex-flow属性
//是flow-direction 与 flow-wrap的组合写法，默认flex-flow:row nowrap;
justify-content属性
//决定项目的对齐方式，默认 justify-content:flex-start 默认左对齐
flex-end
项目右对齐
flex-center
项目居中对齐
space-between
------------恢复内容结束------------