1 Web字体

1.1 web 字体基本语法

/*引入web字体*/
@font-face {    
    font-family:"字体的名字";
    src:url(字体地址1) format(字体格式1),
        url(字体地址1) format(字体格式1),
        url(字体地址1) format(字体格式1);
}
/*使用*/
.box {
    font-family:"字体的名字";
}

• 字体放在服务器上，用户需下载
• 不同浏览器支持不同格式的字体，为了保证兼容性，一种字体需要设置多种格式，因此web字体基本语法中有多个url。
• 字体格式转换工具：
  • https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
  • https://www.fontke.com/tool/fontface/ 字客网
• 优点：图片放大不清晰，字体放大仍然清晰。
• 缺点：字体文件太大，下载需要时间，因此不用做大篇幅的字体，常用作定制字体。

1.2 定制字体

实际中，一般会针对具体几个文字，单独定制几个字体。

字体定制工具：

• https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
• http://www.youziku.com/ 字体库网站
• https://www.ziti163.com/webfont/create.aspx 字体网

1.3 字体图标

字体图标比位图更清晰，易于改变大小、颜色、风格等，兼容性好。

字体图标库：

• 阿里图标：http://www.iconfont.cn/
• font-awesome：http://fontawesome.dashgame.com/

字体图标制作工具 icoMoon： http://icomoon.io/app/#/select

2 多列布局

2.1 设置给包裹元素的 CSS 属性（共 8 个属性）

2.2 设置给子元素的 CSS 属性（共 4 个属性）

3 弹性布局（flex 伸缩盒布局）

3.1 伸缩容器和伸缩项目

① 伸缩容器：

设置了 CSS 属性 display:flex （独占一行）或者 display:inline-flex（不独占一行，可设宽高）的元素。

② 伸缩项目：

伸缩容器的子元素。

特点：

1、伸缩项目会在伸缩容器中默认水平排列。

2、伸缩项目可以设置宽高、内外边距，且不存在外边距塌陷， 不会脱离文档流，具有伸缩性。

3、一个元素可以同时是伸缩项目和伸缩容器。

3.2 设置主轴方向和换行方式

主轴：伸缩项目沿主轴排列，默认方向为水平从左到右。

侧轴： 与主轴垂直的轴叫侧轴，侧轴方向随主轴方向变化。

① 设置主轴方向

给伸缩容器设置 CSS 属性 flex-direction ，值：

row             水平从左到右，默认值
row-reverse      水平从右到左
column           垂直从上到下
column-reverse    垂直从下到上

② 设置换行方式

给伸缩容器设置 CSS 属性 flex-wrap 可以设置伸缩项目在主轴方向上的换行方式，值：

nowrap          不换行，默认值
wrap            换行
wrap-reverse     自动换行，行翻转

③ 同时设置主轴方向和换行方式

flex-flow：flex-direction和flex-wrap的复合属性，设置给伸缩容器即可同时设置主轴方向和换行方式，值无数量和顺序要求。

3.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置 justify-content 属性，值：

flex-start      靠主轴开始方向对齐
flex-end        靠主轴结束方向对齐
center          居中
space-between    两端对齐，两端没有空隙，中间有空隙
space-around     两端空隙是中间空隙的一半
space-evenly     两端空隙与中间空隙相等

3.4 设置伸缩项目在主轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置 align-items 属性，值：

stretch         伸缩项目在侧轴方向的长度在侧轴方向拉伸，默认值（不设置伸缩项目在侧轴方向的长度，才会生效）
flex-start      侧轴起点对齐
flex-end        侧轴终点对齐
center          居中对齐
baseline        文本基线对齐

② 多条主轴线（伸缩项目在主轴上发生换行）

给伸缩容器设置 align-content 属性，值：

stretch         伸缩项目在侧轴方向的长度在侧轴方向拉伸，默认值（不设置伸缩项目在侧轴方向的长度，才会生效）
flex-start      侧轴起点对齐
flex-end        侧轴终点对齐
center          居中对齐
space-between    两端对齐，两端没有空隙，中间有空隙
space-around     两端空隙是中间空隙的一半
space-evenly     两端空隙与中间空隙相等

注：

• align-content 实际上设置的是多条主轴之间如何对齐。
• align-items 属性不论一条主轴线还是多条主轴线都会起作用；align-content 只在多条主轴线的情况下起作用。

3.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

给伸缩项目设置CSS属性flex-basis，可以设置伸缩项目在主轴上的基准长度，值为长度。如果设置了flex-basis，则伸缩项目在主轴上的长度按照基准长度，不按设置的宽高显示；如果不设置 flex-basis，伸缩项目在主轴上的长度取决于所设置的 width 或者 height。

② 扩展比率 flex-grow

给伸缩项目设置CSS属性flex-grow 可定义伸缩项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

• 扩展前提：伸缩容器在主轴方向向上有富余的长度。
• 扩展时考虑因素：伸缩项目的扩展比率

③ 收缩比率 flex-shrink

给伸缩项目设置CSS属性flex-shrink 可定义伸缩项目的收缩比例，默认为1，即按收缩项目在主轴上的长度比例收缩。

• 收缩前提：伸缩容器在主轴方向上长度不足。
• 收缩时考虑因素：伸缩项目的收缩比率、收缩项目原来在主轴上的长度。

④ 复合属性 flex

给伸缩项目设置CSS属性flex可同时设置扩展比率、收缩比率、主轴基准长度。

flex: grow shrink basis;/*顺序固定：扩展比率 收缩比率 基准长度*/
flex: 0 1 auto;   /* 扩展比率是0，收缩比率是1，基准长度是auto */

flex: 1;      /* flex: 1 1 0; */
/*basis设为0，伸缩项目主轴上的长度为0，伸缩容器整个富余，需均分至各伸缩项目，扩展比率为1，伸缩项目可以扩展，因此该设置可显示伸缩项目沿主轴平均铺满伸缩容器的效果。*/
flex: auto;   /* flex: 1 1 auto; */
flex: none;   /* flex: 0 0 auto;不伸不缩 */
flex: 0 auto; /* flex: 0 1 auto;只缩不伸，默认值 */

3.6 伸缩项目排序

给伸缩项目设置CSS属性order可以设置伸缩项目的排序，值为数字，数字越小排序越靠前，可以是负值。默认值是 0。

3.7 单独设置某个伸缩项目在侧轴上的对齐方式

给某个伸缩项目设置属性 align-self 可以单独设置该伸缩项目在侧轴上的对齐方式，值与 align-items 一致，但多一个默认值auto，即继承其父元素的align-items属性。

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

② 设置给伸缩项目的属性