字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片

字体图标的优点

灵活性：灵活地修改样式，例如：尺寸、颜色等。
轻量级：体积小、渲染快、降低服务器请求次数。
兼容性：几乎兼容所有主流浏览器。
使用方便：

下载字体包

Iconfont：https://www.iconfont.cn/
l. 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标

Unicode编码:

类名:

引入样式表：iconfont.css

<link rel="stylesheet" href="./iconfont.css">

复制粘贴图标对应的Unicode编码:

<span>&#xe601;</span>

设置文字字体:

span{
font-family:'iconfont';
}

调用图标对应的类名，必须调用2个类名:

iconfont类：基本样式，包含字体的使用等
licon-xxx：图标对应的类名

<span class="iconfont icon-***"> </span>

上传矢量图

如果图标库没有项目所需的图标怎么办？
IconFont网站上传矢量图生成字体图标。
1.与设计师沟通，得到SVG矢量图。
2.IconFont网站上传图标，下载使用。

上传矢量图步骤：
l.上传→上传SVG图标。
2.浏览本地图标→去除颜色提交l加入购物车→下载使用。

平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果。

平面转换

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换

平面转换属性：transform

位移

目标：使用translate实现元素位移效果

语法
transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位移-基本使用</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: rgb(129, 160, 248);
            transition: all 0.5s;
        }

        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateX(300px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果。
核心代码

position:absolute;
left:50%;
top:50%;
transforrm:translate(-50%,-50%);

原理:位移取值为百分比数值，参照盒子自身尺寸计算移动距离

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位元素居中效果</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: rgb(121, 176, 238);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

旋转

目标：使用rotate实现元素旋转效果。
语法：transform: rotate(角度)
注意：角度单位是deg
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转效果</title>
    <style>
        img {
            width: 251px;
            transition: all 2s;
        }
        img:hover {
            /* 顺 */
            transform: rotate(360deg);

            /* 逆 */
            /* transform: rotate(-360deg); */
        }
    </style>
</head>
<body>
    <img src="./images/windmill.png" alt="">
</body>
</html>

转换原点

目标：使用transform-origin属性改变转换原点。
语法：默认圆点是盒子中心点
transform-origin: 原点水平位置原点垂直位置;
取值：
方位名词（left、top、right、bottom、center） Ø 像素单位数值
百分比（参照盒子自身尺寸计算）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/windmill.png" alt="">
</body>
</html>

多重转换

目标：使用transform复合属性实现多形态转换。
多重转换技巧

transform:translate() rotate();

多重转换原理:

旋转会改变网页元素的坐标轴向。
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果。
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多重转换</title>
    <style>
        .box {
            width: 1800px;
            height: 200px;
            border: 1px solid #000;
        }

        img {
            width: 200px;
            transition: all 8s;
        }

        .box:hover img {
            /* 边走边转 */
            transform: translate(1600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */

            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/cl.png" alt="">
    </div>
</body>
</html>

缩放

目标：使用scale改变元素的尺寸
语法：transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧：
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放。
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小。
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放效果</title>
    <style>
        .box {
            width: 300px;
            height: 250px;
            margin: 100px auto;
            background-color: rgb(121, 163, 252);

        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }

        .box:hover img {
            /* width: 150%; */

            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/it1211.png" alt="">
    </div>
</body>

</html>

渐变

渐变背景

目标：使用background-image属性实现渐变背景效果。
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

background-image:linear-gradient{
颜色1；
颜色2；
};

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            background-image: linear-gradient(
                transparent,
                rgba(111, 135, 240, 0.6)
            );
        }
    </style>
</head>

<body>

    <div class="box"></div>

</body>

</html>

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform

空间位移

目标：使用translate实现元素空间位移效果。
语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）
像素单位数值
百分比

透视

目标：使用perspective属性实现透视效果。
属性（添加给父级）：
perspective: 值;
取值：像素单位数值，数值一般在800 – 1200。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
      /* perspective: 800px; */
      /* perspective: 1200px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: rgb(128, 150, 247);
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

空间旋转

目标：使用rotate实现元素空间旋转效果。
语法：
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/it1211.png" alt="">
    </div>
</body>
</html>

立体呈现

目标：使用transform-style: preserve-3d呈现立体图形。
实现方法：
添加 transform-style: preserve-3d;
使子元素处于真正的3d空间

呈现立体图形步骤:

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）

注意:空间内，转换元素都有自已独立的坐标轴，互不干扰

动画

目标：使用animation添加动画效果。
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

动画实现步骤

目标：使用animation添加动画效果

定义动画

@keyframes 动画名称{
from{}
to{}
}

@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}

使用动画

animation： 动画名称 动画花费时长；

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: rgb(126, 154, 245);

            /* 使用动画 */
            animation: change 10s;
        }
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

动画属性

目标：使用animation相关属性控制动画执行过程

animation： 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

注意：

动画名称和动画时长必须赋值。
取值不分先后顺序。
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间。

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

目标：使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
将动画过程等分成N份

精灵动画制作步骤

准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度） Ø 使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同 Ø 添加无限重复效果

多组动画
精灵动画的同时添加盒子位移动画。

animation:
动画1，
动画2，
动画N；

animation：
run 1s steps(12) infinite,
move 3s linear forwards;

案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/paobu.png);
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

跑马灯效果

目标：使用animation实现逐帧图片位移效果。
案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }

      .box {
        width: 600px;
        height: 150px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {
        width: 2000px;
        animation: move 19s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/it1211.png" alt="" /></li>
        <li><img src="./images/qdkf.png" alt="" /></li>
        <li><img src="./images/it1211.png" alt="" /></li>
        <li><img src="./images/qdkf.png" alt="" /></li>
        <li><img src="./images/it1211.png" alt="" /></li>
        <li><img src="./images/qdkf.png" alt="" /></li>
        <li><img src="./images/it1211.png" alt="" /></li>
        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/it1211.png" alt="" /></li>
        <li><img src="./images/qdkf.png" alt="" /></li>
        <li><img src="./images/it1211.png" alt="" /></li>
      </ul>
    </div>
  </body>
</html>

移动端特点

移动端和PC端网页不同点

PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

谷歌模拟器

使用谷歌模拟器调试移动端网页

分辨率

屏幕尺寸

屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量

分辨率
PC分辨率
1920 1080
1366 768
……
缩放150%
（1920/150%）*（1080/150%） l
总结
硬件分辨率（出厂设置）
缩放调节的分辨率（软件设置）

分辨率分类
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

主流设备分辨率

手机型号	物理分辨率	逻辑分辨率	比例关系
iPhone3GS	320*480	320*480	1:1
iPhone4	640*960	320*480	2:1
iPhone5	640*1136	320*568	2:1
iPhone6/7/8	750*1334	375*667	2:1
iPhone6/7/8 Plus	1080*1920	414*736	2.6:1
iPhone11Pro/X/XS	1125*2436	375*812	3:1
iPhone11/XR	828*1792	414*896	2:1
iPhone11 Pro Max/XS Max	1242*2688	414*896	3:1
iPhone12 mini	1080*2340	360*780	3:1
iPhone12/iPhone12 Pro	1170*2532	390*844	3:1
iPhone12 Pro Max	1284*2778	428*926	3:1

视口

目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport：视口
width=device-width：视口宽度 = 设备宽度
initial-scale=1.0：缩放1倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸
现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
二倍图设计稿尺寸：750px。

百分比布局(流式布局)

目标：能够使用百分比布局开发网页
百分比布局，也叫流式布局。
效果：宽度自适应，高度固定。
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极品好物</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .toolbar {
            position: fixed;
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            width: 100%;
            height: 50px;
            background-color: rgb(253, 251, 251);
            border-top: 1px solid #ccc;
        }

        .toolbar li img {
            height: 100%;
        }

        .toolbar li {
            float: left;
            width: 20%;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="toolbar">
        <ul>
            <li>
                <a href="#"><img src="./images/index.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/classify.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/jphw.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/car.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/login.png" alt=""></a>
            </li>
        </ul>
    </div>
</body>

</html>

展示：

Flex布局

目标：能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局：
是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: space-between;
            /* height: 200px; */
            border: 1px solid #000;
            color: #fff;
        }

        .box div {
            /* float: left;
            margin: 10px; */
            width: 100px;
            height: 100px;
            background-color: rgb(144, 186, 250);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

作用:
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

设置方式:
父元素添加 display: flex，子元素可以自动的挤压或拉伸
组成部分:

弹性容器
弹性盒子
主轴
侧轴 / 交叉轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex组成</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 视觉效果: 子级一行排列/水平排列 */
            /* 水平排列: 默认主轴在水平, 弹性盒子都是沿着主轴排列 */
            display: flex;
            height: 200px;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: rgb(108, 152, 248);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

展示：

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式
修改主轴对齐方式属性: justify-content

属性值	作用
flex-start	默认值，起点开始排列
flex-end	终点依次开始排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 居中 */
            justify-content: center;

            /* 间距在弹性盒子(子级)之间 */
            justify-content: space-between;

            /* 所有地方的间距都相等 */
            justify-content: space-evenly;

            /* 间距加在子级的两侧 */
            /* 视觉效果: 子级之间的距离是父级两头距离的2倍 */
            justify-content: space-around;

            height: 100px;
            margin: auto;
            border: 1px solid #000;
        }

        .box div {
            width: 60px;
            height: 100px;
            background-color: rgb(155, 194, 247);
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

</html>

展示：

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值, 弹性盒子沿着主轴线被拉伸至铺满容器

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 居中 */
            /* align-items: center; */

            /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
            /* align-items: stretch; */

            height: 300px;
            margin: auto;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: rgb(194, 216, 248);
        }

        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;
        }

    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

展示：

伸缩比

目标：使用flex属性修改弹性盒子伸缩比
属性
flex : 值;

取值分类:数值(整数)
注意 : 只占用父盒子剩余尺寸
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伸缩比</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            height: 200px;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 21px;
            background-color: rgb(141, 178, 247);
        }

        .box div:nth-child(1) {
            width: 60px;
        }

        .box div:nth-child(2) {
            /* 占用父级剩余尺寸的份数 */
            flex: 2;
        }

        .box div:nth-child(3) {
            flex: 3;
        }

    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

展示：

主轴方向

目标：使用flex-direction改变元素排列方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

属性值	作用
row	行, 水平(默认值)
column	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            margin: 6px 6px;
        }

        .box li {
            display: flex;
            /* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
            /* 修改主轴方向: 列 */
            flex-direction: column;

            /* 视觉效果: 实现盒子水平居中 */
            align-items: center;

            /* 视觉效果: 垂直居中 */
            justify-content: center;
            width: 100px;
        }

        .box img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/qdkf.png" alt="">
                <span>前端开发网</span>
            </li>
        </ul>
    </div>
</body>

</html>

展示：

弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子换行</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /* 默认值, 不换行 */
            /* flex-wrap: nowrap; */

            /* 弹性盒子换行 */
            flex-wrap: wrap;

            /* 调节行对齐方式 */
            /* align-content: center; */
            /* align-content: space-around; */
            align-content: space-between;
            height: 210px;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: rgb(157, 180, 245);
            margin: 0 6px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

展示：

rem

目标：能够使用rem单位设置网页元素的尺寸
网页效果:屏幕宽度不同，网页元素尺寸不同（等比缩放）

px单位是绝对单位,不能等比缩放。
rem单位是相对单位
rem单位是相对于HTML标签的字号计算结果：1rem = 1HTML字号大小
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem基本使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 1rem = 1html标签字号大小 */
        html {
            font-size: 21px;
        }
        .box {
            width: 5rem;
            height: 3rem;
            background-color: rgb(155, 177, 252);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

rem移动适配媒体查询

目标：能够使用媒体查询设置差异化CSS样式
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

语法：

@media （媒体特性）{
选择器{
CSS属性}
}

@media （width：320px）{
html{
font-size：32px；
}
}

设备宽度不同，HTML标签字号设置方法：

设备宽度大，元素尺寸大
设备宽度小，元素尺寸小

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10
案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem适配</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }

        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: rgb(129, 160, 245);
        }

    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

rem适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
rem单位尺寸

根据视口宽度，设置不同的HTML标签字号
书写代码，尺寸是rem单位
2.1 确定设计稿对应的设备的HTML标签字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
2.2 rem单位的尺寸
N * 37.5 = 68 → N = 68 / 37.5
rem单位的尺寸 = px单位数值 / 基准根字号
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem适配原理</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <style>
        /* 移动适配 */
/* 1. HTML标签加字号 1/10; 2. 写rem单位的尺寸 */
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}

.box {
    /* 68 * 29 */
    /* width: 68px; height:29px*/
    /* 设计稿375, HTML 37.5   68/37.5  29/37.5*/
    width: 1.813rem;
    height: 0.773rem;
    background-color: rgb(141, 169, 243);
}
    </style>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>

flexible

目标：使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

<body>
   <div class="box"></div>
    <script src="../js/flexible.js"></script>
</body>

Less

Less语法

目标：使用Less运算写法完成px单位到rem单位的转换
Less是一个CSS预处理器, Less文件后缀是.less
Less扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

Easy Less : vscode插件
作用：less文件保存自动生成css文件

注释

单行注释
语法：// 注释内容
快捷键：ctrl + / l 块注释
语法：/ 注释内容 /
快捷键： shift + alt + A

运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .
注意：表达式存在多个单位以第一个单位为准

.box{
width:100+50px;
height:5*32px;

width:(100/4px);
height:100./4px;
}

Less语法:使用Less嵌套写法生成后代选择器

Less嵌套

作用：快速生成后代选择器。
语法：


父级选择器{
       //父级样式
      .子级选择器{
            //子级样式
}
}

.father{
      color:blue;
      .son{
      width:100px;
}
}

.father{
   color:blue;
}
.father .son{
   width:100px;
}

注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

.father{
    color:blue;
    &:hover{
color:black;
}
}

.father{
     color:blue;
}
.father:hover{
     color:black;
}

less变量

方法二：把颜色提前存储到一个容器，设置属性值为这个容器名 l 变量：存储数据，方便使用和修改。
语法：
定义变量：
@变量名: 值;
使用变量：
CSS属性：@变量名;

//1.定义
@foontColor:blue;

//2.使用
.box{
   color:@fontColor;
}

a{
   color:@fontColor;
}

导入: @import “文件路径”;
//如果是less文件，可以省略后缀.less
@import 'base.less' ;
@import '体验less'；

导出CSS文件
方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

方法二：控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /

//  out:  ./css/
//  out:  ./css/common.css

禁止导出
在less文件第一行添加:

// out: false

vw / vh

目标：能够使用vw单位设置网页元素的尺寸
相对单位
相对视口的尺寸计算结果
vw：viewport width
1vw = 1/100视口宽度
vh：viewport height
1vh = 1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vw适配</title>
</head>
<body>
    <style>
     * {
  margin: 0;
  padding: 0;
}
 /* 68 * 29  -- vw */
.box {
    /* width: (68 / 3.75vw);
    height: (29 / 3.75vw); */
  width: 18.13333333vw;
  height: 7.73333333vw;
  background-color: rgb(243, 104, 104);
}
    /* width: (68 / 6.67vh);
    height: (29 / 6.67vh); */
.box1 {
  width: 10.19490255vh;
  height: 4.34782609vh;
  background-color: rgb(152, 179, 252);
}
    </style>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

vh适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果
vh单位尺寸

确定设计稿对应的vh尺寸（1/100视口高度）
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸（1/100 视口高度）

vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vh</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
.box {
/* 68  vw * 29 vh */
width: 18.13333333vw;
height: 4.34782609vh;
background-color: rgb(154, 175, 247);
}
</style>
<div class="box"></div>
</body>
</html>

rem 和 vw / vh 的区别

市场比较常见：

需要不断修改html文字大小
需要媒体查询media
需要 flexible.js

将来(马上)趋势

省去各种判断和修改
代表：b站

媒体查询

基本语法

目标：能够根据设备宽度的变化，设置差异化样式

开发常用写法

媒体特性常用写法
max-width
min-width

@media (媒体特性) {
        选择器{
              样式
         }
}

完整写法：
@media 关键字 媒体类型 and （媒体特性）{CSS代码}

关键字：and only not

外链css引入：
<link rel="stylesheet"  media="逻辑符 媒体类型  and （媒体特性）" href=“xx.css”>
**例如**：
 <link rel="stylesheet"  media="(min-width: 992px)" href="./index.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 视口宽度小于等于768px， 网页背景色是蓝色 */
        @media (max-width: 768px) {
            body {
                background-color: rgb(113, 160, 247);
            }
        }
        /* 视口宽度大于等于1200px， 网页背景色是紫色 */
        @media (min-width: 1200px) {
            body {
                background-color: rgb(227, 135, 245);
            }
        }
    </style>
</head>
<body>
</body>
</html>

书写顺序

min-width（从小到大）
max-width（从大到小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询 书写顺序</title>
    <style>
        /*
            视口宽度 >= 768px，网页背景色是 蓝色
            视口宽度 >= 992px，网页背景色是 黄色
            视口宽度 >= 1200px，网页背景色是 紫色
         */
        @media (min-width: 768px) {
            body {
                background-color: rgb(149, 195, 255);
            }
        }
        @media (min-width: 992px) {
            body {
                background-color: rgb(245, 221, 142);
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: rgb(245, 147, 237);
            }
        }
    </style>
</head>
<body> 
</body>
</html>

需求：

默认网页背景色是灰色
屏幕宽度在768-992之间, 网页背景色是粉色
屏幕宽度在992-1200之间, 网页背景色是skyblue
屏幕宽度大于1200, 网页背景色是绿色

媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称	属性	值
视口的宽和高	width、height	数值
视口最大宽或高	max-width、max-height	数值
视口最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait: 竖屏 landscape: 横屏

媒体查询隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询 手机端左侧隐藏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 100%;
        }

        .left {
            width: 300px;
            min-height: 500px;
            background-color: rgb(250, 136, 136);
        }

        .main {
            flex: 1;
            min-height: 500px;
            background-color: rgb(170, 208, 250);
        }

        /* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */
        @media (max-width: 768px) {
            .left {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">媒体查询 手机端左侧隐藏</div>
    </div>
</body>
</html>

BootStrap

BootStrap简介

目标：使用 BootStrap框架快速开发响应式网页
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/

BootStrap使用步骤

下载： https://v3.bootcss.com/getting-started/#download
首页 → BootStrap3中文文档 → 下载BootStrap

使用
使用步骤：
引入： BootStrap提供的CSS代码
调用类：使用BootStrap提供的样式
container：响应式布局版心类

BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>= 768px	>=992px	>=1200px
别名	xs	sm	md	lg
容器宽度	100%	750px	970px	1170px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
列数	12	12	12	12
列间隙	30px	30px	30px	30px

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:

container类自带间距15px
row类自带间距-15px

全局样式

目标：掌握BootStrap手册用法，使用全局CSS样式美化标签
分类：

布局样式
内容美化样式
手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

<button class="基本样式类 具体样式类" >提交</button>

布局类：表格
table : 基本类名, 初始化表格默认样式
table-bordered : 边框线
table-striped : 隔行变色
table-hover : 鼠标悬停效果
table-responsive : 表格宽溢出滚动

美化内容类：按钮
btn : 基准样式
btn-info; btn-success : 设置按钮背景色
btn-block : 设置按钮为块元素
btn-lg; btn-sm; btn-xs : 设置按钮大小

布局类：表单
form-control : 设置表单元素input, select, textarea的样式
checkbox 和 radio : 设置复选框和单选框的样式
form-inline : 设置表单元素水平排列
disabled : 设置表单禁用状态样式
input-lg; input-sm, input-sm : 设置表单元素的大小

美化内容类：图片
img-responsive: 图片自适应
img-rounded : 图片设置圆角
img-circle : 图片设置正圆
img-thumbnail : 图片添加边框线

布局类：辅助类
pull-right : 强制元素右浮动
pull-left : 强制元素左浮动
clearfix : 清除浮动元素的影响
text-left文 : 本左对齐
text-right : 文本右对齐
text-center : 文本居中对齐
center-block : 块元素居中

布局类：响应式工具（不同屏幕尺寸隐藏或显示页面内容）

组件

目标：使用BootStrap组件快速布局网页
组件
BootStrap提供的常见功能，包含了HTML结构和CSS样式。
使用方法:

引入BootStrap样式

复制结构，修改内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  Dropdown
  <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li role="separator" class="divider"></li>
  <li><a href="#">Separated link</a></li>
</ul>
</div>

  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>
</body>
</html>

Glyphicons字体图标

目标：使用Glyphicons字体图标实现网页中的图标效果
Glyphicons字体图标的使用步骤
HTML页面引入BootStrap样式文件
准备字体文件 (注意路径) Ø 空标签调用对应类名
glyphicon
图标类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-th-large"></i>
</body>
</html>

插件

目标：了解插件的概念及使用方法
插件的使用步骤:
1.引入BootStrap样式
2.引入js文件：jQuery.js + BootStrap.min.js

<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

3.复制HTML结构, 并适当调整结构或内容

定制

目标：能够根据项目需求定制bootstrap框架
定制步骤:

导航菜单 → 定制
输入目标变量值
编译并下载，使用定制后的框架

字体图标

字体图标的优点

下载字体包

使用字体图标

上传矢量图

平面转换

平面转换

位移

位移-绝对定位居中

旋转

转换原点

多重转换

缩放

渐变

渐变背景

空间转换

空间位移

透视

空间旋转

立体呈现

动画

动画实现步骤

动画属性

跑马灯效果

移动端特点

移动端和PC端网页不同点

谷歌模拟器

分辨率

屏幕尺寸

视口

二倍图

百分比布局(流式布局)

Flex布局

主轴对齐方式

侧轴对齐方式

伸缩比

主轴方向

弹性盒子换行

rem

rem移动适配 媒体查询

rem适配原理

flexible

Less

Less语法

注释

运算

Less嵌套

less变量

vw / vh

vw适配原理

vh适配原理

rem 和 vw / vh 的区别

媒体查询

基本语法

开发常用写法

书写顺序

媒体类型

媒体特征

媒体查询 隐藏

BootStrap

BootStrap简介

BootStrap使用步骤

BootStrap栅格系统

全局样式

组件

Glyphicons字体图标

插件

定制

HTML5CSS3

已是最早文章

为您推荐

HTML5CSS3

rem移动适配媒体查询

媒体查询隐藏