H5-flex布局&字体图标

1.常见的布局方式【面试题】

1.浮动布局：一般用于图文环绕的页面结构；缺点是浮动后会导致父获取不到子的高度，页面塌陷，浮动后父元素要反复去清除浮动。

2.定位布局：一般用于网页web页面进行位置上面的修饰和布局，缺点是会反复设置定位导致页面结构混乱，难以维护。

3.流式布局（百分比布局）: 通过给元素设置百分比来实现响应式布局，缺点是小像素单位不好计算百分比。

4.瀑布流布局：一般用于照片墙的展示。

5.栅格布局：将页面按一定等份进行分配，再借助媒体查询实现响应式。--bootstrap

6.弹性布局：将父容器设置为弹性盒子，子项目设置为弹性项目，通过属性快速实现响应式。一般用于移动端布局。优点：代码量少，便于维护。

2.transition 过渡属性

transition：[transition-property ]过渡属性 || [ transition-duration ]过渡执行时间 || [ transition-timing-function ]过渡运动函数 || [ transition-delay ]过渡延迟时间

3.flex布局

    flex布局，弹性盒布局,将父容器设置为弹性盒子，子项目设置为弹性项目，通过属性快速实现响应式。

    1.开启弹性盒子
        display:flex
    2.设置父容器的属性
    3.设置子项目的属性

3.1 flex布局基本概念

父容器、伸缩容器、弹性盒子容器（flex-container）：开启弹性布局的容器

子项目、伸缩项目、弹性盒子项目(flex-item)：弹性布局受控的项目

主轴(main-axis)：默认水平位置，从左至右，有无数条主轴

侧轴(cross-axis)：默认垂直位置，从上往下，有无数条侧轴，侧轴始终垂直相交与主轴

主轴起点(main-start)：主轴进入容器时接触的点

主轴终点(main-end)：主轴离开容器时接触的点

主轴长度(main-size)：主轴起点到主轴终点的直线距离

侧轴起点(cross-start)：侧轴进入容器时接触的点

侧轴终点(cross-end)：侧轴离开容器时接触的点

侧轴长度(cross-size)：侧轴起点到侧轴终点的直线距离

3.2 容器属性

1. flex-direction 控制主轴方向
    row：【默认】主轴水平位置，从左往右;
    row-reverse：主轴水平位置，从右往左;
    column：主轴垂直方向，从上往下;
    column-reverse：主轴垂直方向，从下往上;

2. flex-wrap 控制项目是否换行
    nowrap：【默认】子项目不换行;
    wrap:子项目沿着侧轴方向换行;
    wrap-reverse：子项目沿着侧轴相反方向换行;

3. flex-flow：flex-direction flex-wrap

4. justify-content 控制项目在主轴上的排列方式
    flex-start：【默认】项目沿着主轴起点对齐;
    flex-end: 项目沿着主轴终点对齐;
    center: 项目沿着主轴中间位置对齐;
    space-between: 两侧项目对齐，中间项目均分主轴空间;
    space-around: 项目左右各分配一份主轴空间，项目两侧距离是中间距离的一半;
    space-evenly: 所有项目均分主轴空间;

5. align-items 控制项目在侧轴上的排列方式
    stretch:【默认】子项目拉伸高度均分侧轴空间，子项目设置定高后会失效，设置定高后相当于flex-start;
    flex-start:子项目沿着侧轴起点对齐;
    flex-end:子项目沿着侧轴终点对齐;
    center:子项目沿着侧轴中间位置对齐;
    baseline:子项目沿着基线对齐;

6. align-content 控制项目在侧轴上的堆叠排列方式
    stretch: 【默认】项目拉伸后均分侧轴空间，当项目设置定高后会失效，相当于flex-start;
    flex-start: 项目向侧轴起点堆叠;
    flex-end: 项目向侧轴终点堆叠;
    center: 项目向侧轴中间位置堆叠;
    space-between: 两侧项目向侧轴两侧对齐，中间项目均分侧轴空间;
    space-around: 项目两侧各分配一份侧轴空间，项目两侧距离是项目中间距离的一半;
    space-evenly: 所有项目均分侧轴空间;

3.3 项目属性

1. order 控制项目出现的顺序
    默认0，整数；

2. flex-shrink 控制项目的收缩比率
    默认1，正整数；0为最小即不收缩

3. flex-grow 控制项目的扩展比率
    默认0，正整数；0为最小即不扩展

4. flex-basis 相当于width
    非负数、百分比、auto、content
    区别 width为0，不会被内容撑开，flex-basis为0，仍然会被内容撑开

5. flex：flex-grow flex-shrink flex-basis
    默认        0 1 auto
    flex:none  0 0 auto
    flex:1     1 1 0%
    flex:auto  1 1 auto

4.图标字体

优点：
1.将所有图标打包成字体库，减少请求；
2.具有矢量性，可保证清晰度；
3.使用灵活，便于维护；

1.百度搜索 阿里图标字体库 https://www.iconfont.cn/
    => 搜索对应素材加入购物车
    => 购物车中下载代码
2.解压文件 => 将文件放入项目
3.
<!-- 1.引入字体图标库 -->
<link rel="stylesheet" href="./font_iysuojan2xi/iconfont.css" />
<!-- 2.使用对应的类名 -->
<span class="iconfont icon-password"></span>
<span class="iconfont icon-user"></span>
<span class="iconfont icon-xindiantu"></span>
<!-- 设置样式 -->
.icon-password {
    font-size: 56px; // 设置字体图标大小
    color: #f00; // 设置字体图标颜色
}