C3动画+H5+Flex布局使用总结

2019-11-18 本文已影响0人艾曼大山

概览

Html5和CSS3就是在原有的基础上新加的一些特性，在前面的博客中已经用很多新特性了，Flex弹性布局大大的减少css代码，今天再总结一下工作中会用到的一些常用知识点。

demo地址: https://github.com/pengjunshan/WebPJS

其它Web文章
HtmlCss基础学习第一章
 CSS基础学习第二章
 CSS浮动的使用和解决浮动的五种方法
 CSS定位relative、absolute、fixed使用总结
 原生开发WebApi知识点总结
 开发中常用jQuery知识点总结
待续......

本编文章会讲到的知识点

CSS3动画
- 过渡、线性渐变、径向渐变动画
- 2D动画
- 3D动画
- animation动画
Html5
- H5新增类名操作、自定义属性操作
Flex布局

CSS3动画

过渡、线性渐变、径向渐变

1.过渡

transition过渡，两种抒写方式，一种是分开写每项属性、一种是合写。

方式一：分开写四个属性
1.transition-property 设置过渡属性可以单写属性也可以用all代替全部
2.transition-duration 设置过渡时间单位s
3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速
4.transition-delay 设置过渡延时单位s
方式二：合写只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序
transition: all 1s linear 0.2s; //过渡全部属性、执行1秒钟、匀速执行、延迟0.2秒钟

2.线性渐变

linear-gradient线性渐变主要是围绕三步来做，1. 需要渐变方向; 2. 渐变颜色; 3. 渐变范围;
background-image: linear-gradient(方向, 颜色范围, 颜色范围...);
方向角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转;
to right === 90deg to bottom === 180deg 默认 180deg to bottom;

方式一：角度，颜色范围，颜色范围，颜色范围，颜色范围

/**
*  右方向，0%-20%之间是red颜色、50%-100%之间是blue颜色、其它是渐变颜色
*/
background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%);

方式二：角度，颜色范围，颜色范围，开始和结尾默认0% 100%

/**
*  右方向，开始和结尾默认0% 100%
*/
background-image: linear-gradient(to right,red 20%,blue 50%);

方式三：颜色范围，颜色范围，不写角度，角度默认180deg

background-image: linear-gradient(red 20%, blue 50%);

3.径向渐变

radial-gradient径向渐变主要是围绕着半径、圆心位置X Y, 颜色范围, 颜色范围...来设置值的；

方式一：半径 at 圆心位置X Y, 颜色范围, 颜色范围

/**
* 半径100px、 圆心坐标100px 100px、50%是red颜色、50%是yellow颜色，超出渐变范围的用最外面的颜色填充（也就是yellow）
*/
background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%);

方式二：半径 at 圆心位置X Y, 颜色范围, 颜色范围 .....

/**
*  不写范围, 平均分配范围
*/
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);

4.案例

本案例包含过渡、线性渐变、径向渐变、扫光效果，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

过渡渐变案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clearfix {
            clear: both;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: block;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
        .box,
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            margin: 10px 30px;
            border: 1px solid #000;
            float: left;
        }


        /* 过渡CSS */
        .box {
            opacity: 0.5;
            color: white;
            background-color: blue;
            /* 方式一：分开写四个属性 */
            /* 1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部 */
            /* transition-property: width,height; */
            transition-property: all;
            /* 2.transition-duration 设置过渡时间 单位s */
            transition-duration: 2s;
            /* 3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速 */
            transition-timing-function: ease;
            /* 4.transition-delay 设置过渡延时 单位s */
            transition-delay: 0.5s;

            /* 方式二：合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序 */
            transition: all 1s linear 0.2s;
        }

        .box:hover {
            width: 250px;
            height: 250px;
            opacity: 1;
            background-color: red;
        }

        /* 线性渐变 */
        .box1 {
            /* 三步骤：1. 需要渐变方向 2. 渐变颜色 3. 渐变范围 */
            /* background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...) */
            /* 方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转 */
            /*  to right === 90deg  to bottom === 180deg  默认 180deg to bottom */

            /* 方式一：角度，颜色 范围，颜色 范围，颜色 范围，颜色 范围 */
            /* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */
            /* 方式二：角度，颜色 范围，颜色范围  开始和结尾默认0% 100%*/
            /* background-image: linear-gradient(to right,red 20%,blue 50%); */
            /* 方式三：角度默认180deg */
            background-image: linear-gradient(red 20%, blue 50%);
        }

        /* 径向渐变 */
        .box2 {
            /* 步骤： 半径, 圆心,颜色, 颜色范围  */
            /* 1. 半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 ..... */
            /* 2. 超出渐变范围的用最外面的颜色填充 */
            /* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */
            /* 3.如果不写范围, 平均分配 */
            background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
        }

        .sbox {
            width: 600px;
            height: 360px;
            margin: 10px 50px;
            position: relative;
            overflow: hidden;
        }

        .sbox img {
            width: 600px;
            height: 360px;
        }

        .sbox:hover::before{
            /* transform只能设置一次 后面的会把前面的覆盖掉 */
            /* 鼠标移到图片 斜切平移 */
            transform: translateX(1000px) skew(-45deg);
            transition: all 1s;
        }
        .sbox:hover::after{
              /* 鼠标移到图片 延迟0.2s斜切平移 */
            transform: translateX(1000px) skew(-45deg);
            transition: all 1s 0.2s;
        }
        
        .sbox::before , .sbox::after{
            content: "";
            width: 20px;
            height: 360px;
            position: absolute;
            top: 0px;
            left: -210px;

            /*设置斜切 */
            transform: skew(-45deg);

            /* 设置线性渐变 */
            background-image: linear-gradient(90deg,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 1),
                    rgba(255, 255, 255, 0));
        }

    </style>
</head>

<body style="background-color: black;">

    <div class="pbox clearfix">
        <!-- transition:过渡 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。并不仅仅局限于hover状态,也可以通过修改class -->
        <div class="box">过渡属性讲解</div>

        <!-- linear-gradient：线性渐变 -->
        <div class="box1">线性渐变</div>

        <!-- radial-gradient: 径向渐变 -->
        <div class="box2">径向渐变</div>
    </div>

    <!-- 扫光效果 -->
    <p style="color: white;margin-left: 50px;">我是扫光效果案例</p>
    <div class="sbox">
        <img src="../img/2.jpg" alt="">
    </div>

</body>

</html>

2D动画

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1.移动 translate(x, y)

1.移动 translate(x, y) 可以改变元素的位置，x、y可为负值,
transform: translate(300px,300px);
2.除了可以像素值，也可以是百分比，相对于自身的宽度或高度,
transform: translate(100%, 100%);
3.常用到居中使用，
transform: translate(-50%,-50%);

2.缩放 scale(x, y)

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，
transform: scale(1,2);
2.一般情况下x y值都是一样的值，
transform: scale(2);

3.旋转 rotate(deg)

旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针,
transform: rotate(45deg);

4.斜切 skew(x, y)

斜切 skew(x, y) 单位deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果,
transform: skew(20deg,20deg);

5.案例

此案例包含了移动、缩放、旋转、斜切动画，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

2D转换

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 140px;
            height: 140px;
            line-height: 140px;
            background-color: blue;
            transition: all 2s;
            margin: 20px 50px;
            color: white;
            text-align: center;
        }

        .tl:hover {
            /* 移动 translate(x, y) 可以改变元素的位置，x、y可为负值 */
            /* transform: translate(300px,300px); */
            /* transform: translate(-100px,-100px); */

            /* 除了可以像素值，也可以是百分比，相对于自身的宽度或高度 */
            transform: translate(100%, 100%);
            /* transform: translate(-50%,-50%); 常用到居中使用 */
        }

        .se:hover {
            /* 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数； */
            transform: scale(1.5);
            /* transform: scale(1,2); */
        }

        .rt:hover {
            /* 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针 */
            /* transform: rotate(45deg); */
            transform: rotate(-60deg);
        }

        .sk:hover {
            /* 斜切 skew(x, y)deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果 */
            transform: skew(20deg, 20deg);
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 给 body 添加径向渐变 */
        body {
            background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);
        }

        img {
            position: absolute;
            left: 0px;
            bottom: -190px;
        }

        body:hover img {
            transition: all 4s;
            transform: translate(1400px, -800px) scale(0) rotate(45deg);
        }
    </style>
</head>

<body>
    <!-- 平移 translate 移动位置相当于从自身原来位置 -->
    <div class="tl">平移 translate</div>

    <!-- 缩放 scale -->
    <div class="se">缩放 scale</div>

    <!-- 旋转 rotate -->
    <div class="rt">旋转 rotate</div>

    <!-- 斜切 skew -->
    <div class="sk">斜切 skew</div>

    <!-- 飞机飞向太阳案例 -->
    <img src="../img/rocket.png" alt="">

</body>

</html>

3D动画

transform:不仅可以2D转换，还可以进行3D转换。
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

三维坐标轴

1.translate平移

1.transform: translateX(100px)， x轴移动100px,可以为负值；
2.transform: translateY(100px)，y轴移动100培训，可以为负值；
3.transform: translateZ(50px),z轴移动50px，可以为负值；
4.transform: translate3d(x, y, z) xyz是三轴移动的距离

/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);
/*xyz是三轴移动的距离*/
transform: translate3d(100px, 100px, 100px);

2.rotate旋转

值可以是正值或负值可以连写多个旋转角度;
1.translateX() 伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向;
2.translateY() 伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向;
3.rotateZ(*) 伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向;
4.transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度;

            /* 值可以是正值或负值 可以连写多个旋转角度 */
            /* 1.transform: rotateX(*deg);让元素在平面2D中旋转 */
            /* 心中自有3个轴 */
            /* transform: rotate(45deg); */

            /* 1.伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向 */
            /* transform: rotateX(45deg); */
            /* 2.伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向 */
            /* transform: rotateY(45deg); */
            /* 3.伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向*/
            /* transform: rotateZ(45deg); */
            /* transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */
            /*  transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度*/
            transform: rotate3d(1,0,0,45deg);

3.perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果，单位是px;
设置了perspective属性后，就有了近大远小的效果了，在视觉上，有3d透视的效果;
当为元素定义 perspective 属性时，其子元素会获得透视效果。(给父元素加);

  body {
            /* perspective 给父元素加, 让子元素拥有近大远小的透视效果 */
            /* 1. 没有 perspective, 就没有近大远小的效果 */
            /* 2. perspective 可以辅助我们查看3d效果 */
            /* 3. 1000px 指观察者离屏幕的距离 */
            perspective: 1000px; 
        }

4.transform-style

透视：透视只是相当于设置了一个距离，实现了近大远小的效果, 辅助我们查看3D效果的工具，preserve-3d:给父盒子添加，让子元素3D的空间布局，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。
一个3d元素可以没有perspective，但是不能没有transform-style

  body {
            transform-style: preserve-3d;
        }

5.案例

此案例用 transform-style: preserve-3d;来展示3d效果。代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

3d效果

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

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

        body {
            /* 一般设置给整个3d整体的父级 */
            /* perspective: 1000px; */
            transform-style: preserve-3d;
        }

        .father {
            width: 120px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto;
            position: relative;
            /* 父元素Y轴偏移一点 否则看不出效果 */
            transform: rotateY(26deg);

            /* perspective 只是使子盒子拥有近大远小的视觉效果 */
            /* perspective: 1000px; */

            /* 真正实现3d transform-style: preserve-3d 实现的 */
            /* 默认值 flat 表示平面布局 */
            /* preserve-3d 是我们真正使得子盒子按三维立体进行布局, 一定要加给父元素 */
            transform-style: preserve-3d;
        }

        .son1,
        .son2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: 200px;
        }

        .son1 {
            background-color: blue;
        }

        .son2 {
            background-color: red;
            transform: rotateX(45deg);
        }


        .lt {
            width: 180px;
            height: 180px;
            border: 1px solid #000;
            margin: 60px auto;
            position: relative;
            transition: all 5s;
            transform-style: preserve-3d;
        }

        .lt:hover {
            /* XYZ都旋转 */
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }

        .lt li {
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 180px;
        }

        .lt li:nth-child(1) {
            background-color: blue;
            transform: translateZ(90px);
        }

        .lt li:nth-child(2) {
            background-color: blueviolet;
            transform: rotateX(90deg) translateZ(90px);
        }

        .lt li:nth-child(3) {
            background-color: brown;
            transform: rotateX(180deg) translateZ(90px);
        }

        .lt li:nth-child(4) {
            background-color: chartreuse;
            transform: rotateX(270deg) translateZ(90px);
        }

        .lt li:nth-child(5) {
            background-color: pink;
            transform: rotateY(-90deg) translateZ(90px);
        }

        .lt li:nth-child(6) {
            background-color: purple;
            transform: rotateY(90deg) translateZ(90px);
        }

        .fg {
            width: 600px;
            height: 50px;
            border: 1px solid black;
            margin: 20px auto;
        }

        .fg li {
            width: 100px;
            height: 50px;
            float: left;
            position: relative;
            transition: all 1s;
            /* 真正实现 3d 效果, 不一定需要加上 perspective */
            /* 由于是span做的3d变换, 所以 transform-style: preserve-3d; 加给父盒子li*/
            transform-style: preserve-3d;
        }

        .fg li:hover {
            transform: rotateX(-90deg);
        }

        .fg li span {
            width: 100px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            text-align: center;
        }

        .fg li span:nth-child(1) {
            background-color: blue;
            transform: translateZ(25px);
        }

        .fg li span:nth-child(2) {
            background-color: pink;
            transform: rotateX(90deg) translateZ(25px);
        }
    </style>

</head>

<body>

    <!-- transform-style -->
    <!-- transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性也是给父元素添加。 -->
    <!-- 一个3d元素可以没有perspective，但是不能没有transform-style -->
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

    <!-- 立体案例 -->
    <ul class="lt">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- 翻滚 -->
    <ul class="fg">
        <li>
            <span>吃饭了吗</span>
            <span>红烧猪蹄</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>鱼香肉丝</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>可乐鸡翅</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>山东煎饼</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>天津包子</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>欧洲牛排</span>
        </li>
    </ul>

</body>

</html>

animation动画

animation是一个复合属性，一共有8个参数;
一般是由@keyframes先定义动画，然后animation使用动画。

1.animation-name:动画名称，由@keyframes定义的
2.animation-duration：动画的持续时间
3.animation-timing-function：动画的过渡类型
4.animation-delay：动画的延迟时间
5.animation-iteration-count：动画的循环次数
6.animation-direction：设置动画在循环中是否反向运动
7.animation-fill-mode：设置动画时间之外的状态
8.animattion-play-state:设置动画的状态。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            box-shadow: 0px 0px 4px 4px #fff;
            /* 使用动画 */
            /* animation: myAnimaiton 2s infinite; */
            /* 1. 动画名称 */
            animation-name: myAnimaiton;
            /* 2. 动画执行时间 */
            animation-duration: 2s;
            /* 3. 动画执行次数 */
            /*animation-iteration-count: 2;*/
            /* infinite 无限次 */
            animation-iteration-count: infinite;
            /* 4. 延迟时间 */
            /*animation-delay: 1s;*/

            /* 5. 动画效果 */
            /* animation-timing-function: linear; */
            /* steps(n) 按照步数执行, 可以用来实现帧动画 */
            /* animation-timing-function: steps(3); */

            /* 6. 动画方向 */
            /* alternate 交替执行, 可以让动画序列来回交替执行 */
            /* animation-direction: alternate; */

            /* 7. 动画最终状态 forwards 停留在最终动画状态 */
            /*animation-fill-mode: forwards;*/

        }

        div:hover {
            /* 8. 动画播放状态 */
            animation-play-state: paused;
        }

        /* 自定义动画 */
        @keyframes myAnimaiton {
            0% {
                transform: scale(1.0)
            }

            100% {
                transform: scale(1.5)
            }
        }
    </style>
</head>

<body>
    <div>奔跑吧, 兄弟！</div>
</body>

</html>

动画库的使用

俗话说的好不会偷懒的程序员不是个好程序员，工作中手写动画比较麻烦，可以用第三方动画库来帮我们实现，我们只需引用第三方库就行了；
一个用的比较多的动画库animate.css；

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 引入动画函数库 -->
    <link rel="stylesheet" href="animate.css">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box {
            animation: bounceInRight2 2s infinite alternate;
        }

        /* 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 */
        @keyframes bounceInRight2 {

            from,
            60%,
            75%,
            90%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            from {
                opacity: 0;
                transform: translate3d(3000px, 0, 0);
            }

            60% {
                opacity: 1;
                transform: translate3d(-25px, 0, 0);
            }

            75% {
                transform: translate3d(10px, 0, 0);
            }

            90% {
                transform: translate3d(-5px, 0, 0);
            }

            to {
                transform: none;
            }
        }
    </style>

</head>

<body>
    <!-- 2. 直接使用设计好的动画库, 直接加类, animated, 选择想要的动画效果 添加效果类 -->
    <div class="animated bounceInRight">我是引用animate库动画</div>

    <!-- 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 -->
    <div class="box">我是修改animate库动画</div>

</body>

</html>

Html5

H5新增类名操作、自定义属性操作

html5 新增一个非常简单的操作类样式的api:classList;
html5新增一个操作属性样式的api:dataset;

classList：四个操作样式类的方法, 很简单

添加类: dom.classList.add
移除类: dom.classList.remove
判断类: dom.classList.contains
切换类: dom.classList.toggle

dataset：自定义属性添加、修改、获取

存的时候, 在属性名前面加上 data-, <div class="pp" data-uage="18" data-uname="鹏鹏" data-sex="男"></div>
取的时候, 通过 dataset.属性名取, 例如: box.dataset.uage 或者 box.dataset["uage"]
修改添加, 直接通过对象属性操作方式操作即可例如: box.dataset.uage=12

案例

代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
</head>

<body>
    <div class="">李小璐</div>
    <div id="pgone" data-title="大家好，我是PGone" data-job="专业戴帽子">PGone</div>
    <input type="button" value="切换">

    <script>
        $(function () {

            let $div = $("div");
            var div = document.querySelector("div");
            //原生className操作类名
            div.className = "aa bb";

            //juery操作类名
            // $div.addClass("cc dd")

            /*
            *   html5 新增一个非常简单的操作类样式的api 
            */
            //1.添加类, 给当前元素添加一个类 dom.classList.add("类名")
            div.classList.add("cc")

            //2.移除类, 移除当前元素的一个类 dom.classList.remove(类名)
            div.classList.remove("aa")

            //3. 判断类 dom.classList.contains("类名") 返回值布尔类型
            let isHave = div.classList.contains("bb")
            console.log(isHave)

            //4. 切换类 dom.classList.toggle("类名"); 有就删除类名 没有就添加类名
            div.classList.toggle("aa")

            let pg = document.getElementById("pgone")

            /*
            *   在之前的工作, 我们都是通过 getAttribute setAttribute 来操作自定义属性的 
            *   html5 提供一个解决方案: dataset
            */
            //原生getAttribute
            console.log(pg.getAttribute("data-title"))

            //h5通过dataset
            console.log(pg.dataset.job);

            //添加或者修改属性
            pg.dataset.love = "lxl"

        })
    </script>
</body>

</html>

H5网络监听、地理位置监听

在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网;
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service);

1.网络状态

navigator.onLine返回用户当前的网络状况，是一个布尔值;
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false;
2. 否则就是在线状态，返回true;

if (navigator.onLine) {
  //有网
}else{
  //无网
}

2.监听网络变化

为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。online:联网 offline：断网

//网络连接时会被调用
window.addEventListener("online", function () {
    alert("online");
});
//网络断开时会被调用
window.addEventListener("offline", function () {
    alert("offline");
});

3.获取位置相关监听

在html5 中提供了获取用户地理位置的 api，获取位置的坐标是 google地图的坐标；
navigator.geolocation.getCurrentPosition(successFuc, errorFuc);
参数1: 获取位置成功的回调函数, 会给我们一个 location 参数对象;
参数2: 获取位置失败的回调函数;
PC端: chrome,火狐定位请求的页面要求要是https协议的, 所以PC端测试在IE下测试;
移动端: 在iOS 10中，苹果对webkit定位权限进行了修改，定位请求的页面必须是https协议的。

1.获取当前的地理位置信息：navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
2.重复的获取当前的地理位置信息：navigator.geolocation.watchPosition(successCallback, errorCallback)
3.实例：

navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
});

4.案例

代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
            transition: all 1s;
            color: white;
        }

        .online {
            background-color: green;
        }

        .offline {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="online">监听网络状态案例</div>

    <div id="location"></div>

    <script>
        let line = document.querySelector("div")
        /*
        *   在 html5 提供可以判断网状态的 api
        *   navigator.onLine返回用户当前的网络状况，是一个布尔值 true:联网  false:无网
        * */
        if (navigator.onLine) {
            line.className = "online";
            line.innerHTML = "有网，可以打LOL";
        } else {
            line.innerHTML = "无网，可以打单击CF";
            line.className = "offline";
        }

        /**
         * 切换到联网状态时触发 online
         * */
        window.addEventListener("online", function () {
            line.className = "online";
            line.innerHTML = "有网，可以打LOL";
        });

        /**
         * offline 断网,离线状态
         * */
        window.addEventListener("offline", function () {
            line.innerHTML = "无网，可以打单击CF";
            line.className = "offline";
        })

        /*
        *   在html5 中 提供了获取用户地理位置的 api
        *   获取位置的坐标是 google地图的坐标
        *   navigator.geolocation.getCurrentPosition(successFuc, errorFuc)
        *   参数1: 获取位置成功的回调函数, 会给我们一个 location 参数对象
        *   参数2: 获取位置失败的回调函数
        **/
        let locatDiv = document.getElementById("location");

        //获取当前的地理位置信息
        navigator.geolocation.getCurrentPosition(function (location) {
            console.log("成功的回调函数")

            var longitude = location.coords.longitude; // 经度
            var latitude = location.coords.latitude; // 纬度
            var accuracy = location.coords.accuracy; // 精准度
            var altitude = location.coords.altitude; // 海拔

            var str = '<p>经度:' + longitude + ' </p>' +
                '<p>纬度:' + latitude + ' </p>' +
                '<p>精准度:' + accuracy + ' </p>' +
                '<p>海拔:' + altitude + ' </p>';
            locatDiv.innerHTML = str;
        }, function (error) {
            console.log("失败的回调函数")
        });

        //重复的获取当前的地理位置信息
        navigator.geolocation.watchPosition(function (location) {
            console.log("成功的回调函数")

            var longitude = location.coords.longitude; // 经度
            var latitude = location.coords.latitude; // 纬度
            var accuracy = location.coords.accuracy; // 精准度
            var altitude = location.coords.altitude; // 海拔

            var str = '<p>经度:' + longitude + ' </p>' +
                '<p>纬度:' + latitude + ' </p>' +
                '<p>精准度:' + accuracy + ' </p>' +
                '<p>海拔:' + altitude + ' </p>';
            locatDiv.innerHTML = str;
        }, function (error) {
            console.log("失败的回调函数")
        });

    </script>
</body>

</html>

web存储

1.cookie

传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie;
cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

传统存取cookie

        //存cookie
        document.cookie = "name = pgone";
        document.cookie = "love = cisi";
        //取cookie
        let co = document.cookie;
        console.log(document.cookie)

jquery存储cookie: 使用原生js操作cookie太过麻烦，尤其是cookie的获取和删除操作，使用jquery.cookie插件，能够简化我们的操作。

        //引入jquery.cookie.js
       <script src="jquery.cookie.js"></script>
        //1.存cookie 或者 设置 cookie
        $.cookie("hxm", "baby");
        //2.取cookie
        let hxm = $.cookie("hxm")
        console.log(hxm)
        //3.删cookie
        $.removeCookie("hxm")

2.sessionStorage和localStorage

sessionStorage
1.生命周期, 浏览器窗口一关闭, 就没了
2.不能在多个窗口下共享数据
3.大小为5M
localStorage
1.永久存储, 除非手动删除
2.可以在多个窗口下共享数据
3.大小为5M
api:上面两个api操作方式一模一样

设置 setItem(key,value)
读取 getItem(key)
删除 removeItem(key)
清空所有 clear() 不要轻易用会把其它地方存储的值都会清除掉

3.localStorage 中只支持存字符串

sessionStorage 可以存储对象
localStorage不能存储对象
var obj = {name: "鹏鹏", age: "18"}

解决方法：
1.可以转换成 JSON 字符串再存储：localStorage.setItem("obj", JSON.stringify(obj));
2.拿到的是 JSON字符串再解析：JSON.parse(localStorage.getItem("obj"))

h5FileReader对象、拖拽效果

1.FileReader对象

通过FileReader对象我们可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。
其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer

files

对于file类型的input框，在这个DOM对象中，存在一个files属性，这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，当input框指定了multiple属性之后，就可以上传多个文件了。
也就是说，通过files这个属性，我们就可以获取到所有上传的文件。

file对象

File对象中包含了文件的最后修改时间、文件名、文件类型等信息。

FileReader对象

FileReader是一个HTML5新增的对象，用于读取文件。

//创建一个fileReader对象
var fr = new FileReader;
//读取文件的两个方法
readAsText() 以文本的方式读取文件
readAsDataURL() 以DataURL形式读取文件
//文件读取完成事件：
fr.onload = function(){}
//当文件读取完成，可以通过result属性获取结果
fr.result

2.拖拽

拖拽元素

页面中设置了draggable="true"属性的元素可以被拖拽，其中<img>、<a>标签默认是可以被拖拽的；

目标元素, 事件监听

页面中任何一个元素都可以成为目标元素
1.ondragover 应用于目标元素，当停留在目标元素上时调用
2.ondrop 应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要阻止 e.preventDefault()默认行为。)
3.案例
代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

文件上传、拖拽效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .source {
            width: 140px;
            height: 140px;
            background-color: red;
        }

        .target {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div></div>

    <!-- multiple：可以实现多文件上传 accept：限制文件类型，自行百度 -->
    <!--<input type="file" multiple>-->
    <input type="file" multiple accept="image/jpeg,image/jpg,image/png">

    <!-- 设置draggable="true"属性 是可以被拖拽的-->
    <div draggable="true" class="source"></div>
    <div class="target"></div>

    <script>

        /**
        *   文件上传
        */
        var input = document.querySelector("input");
        var div = document.querySelector("div");
        input.addEventListener("change", function () {
            //这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，
            console.log(input.files)
            // 1. 获取文件
            let file = input.files[0];
            // 2. 创建文件读取对象
            let fileReader = new FileReader();
            // 3. 调用方法读取文件
            fileReader.readAsDataURL(file);
            // 得到结果(注意读取是需要时间的)
            console.log(fileReader.result);
            // 4. 等待读取完成 onload
            fileReader.onload = function () {
                console.log(fileReader.result);
                // 结果是 base64 图片字符串, 可以直接当成图片使用
                div.innerHTML = '<img src="' + fileReader.result + '">';
            }
        });

        /**
        *   拖拽效果
        */
        var source = document.querySelector(".source");
        var target = document.querySelector(".target");
        // 当拖拽元素在目标元素上时触发
        target.addEventListener("dragover", function (e) {
            console.log("来呀，快活啊")
            // 浏览器默认阻止了拖拽
            e.preventDefault();
        });
        // 当拖拽元素在目标元素上松开鼠标时触发
        target.addEventListener("drop", function (e) {
            console.log("进来了")
            target.appendChild(source)
        })

    </script>
</body>
</html>

Flex布局

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。
以前我们想要两个div横向排列需要设置浮动来完成，现在通过给父元素添加 display:flex; 属性可以实现盒子横向布局。
需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效.

//任何一个容器都可以指定为Flex 布局。
.box{
    display:flex;
}
//内元素也可以使用Flex布局。
.box{
    display:inline-flex;
}
//webkit内核的浏览器，必需加上-webkit前缀
.box{
    display:-webkit-flex;
    display:flex;
}

主轴-交叉轴

弹性容器：给元素添加display:flex后就是弹性容器。
弹性属性：弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。

1.每个弹性容器都有两根轴：主轴（main axis）和交叉轴（cross axis），两轴之间成90度关系。注意：水平的不一定就是主轴。
2.每根轴都有起点和终点，这对于元素的对齐非常重要。
3.弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
4.弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。

1.弹性容器属性

属性	含义
flex-direction	主轴方向
flex-wrap	换行
flex-flow	flex-direction和flex-wrap合写
justify-content	主轴上的对齐方式
align-items	交叉轴上的对齐方式（单行）
align-content	交叉轴上多行/多列对齐方式

2.弹性元素属性

属性	含义
order	顺序
flex-grow	放大比例（空间过多时）
flex-shrink	缩小比例（空间过少时）
flex-basis	固定尺寸
flex	flex-grow和flex-shrink和flex-basis合写
align-self	自身的对齐方式，覆盖掉父级的align-items对齐方式

1.1 flex-direction属性

1.flex-direction属性决定主轴的方向（即项目的排列方向），方向不管怎么变，主轴和交叉轴的起点都是在一起的。
2.flex-direction:row | row-reverse | column | column-reverse;
3.弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

flex-direction的值

row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
row：主轴为水平方向，起点在左端。交叉轴为垂直方向，起点在上端。

row-两轴方向

row-reverse：主轴为水平方向，起点在有端。交叉轴为垂直方向，起点在上端。

row-reverse-两轴方向

column：主轴为垂直方向，起点在上端。交叉轴为水平方向，起点在左端。

column-两轴方向

column-reverse：主轴为垂直方向，起点在下端。交叉轴为水平方向，起点左端。

column-reverse-两轴方向

1.2 flex-wrap属性

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行？
flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap的值

nowrap：不换行，元素自动压缩
wrap：换行，向下换行
wrap-reverse：换行，向上换行

nowrap：不换行，弹性元素自动压缩

不换行元素自动压缩

wrap：换行：如果主轴在水平方向上，向下换行。如果主轴在垂直方向上，向右换行。

向下换行

wrap-reverse：换行：如果主轴在水平方向上，向上换行。如果主轴在垂直方向上，向左换行。

图片.png

1.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。
flex-flow = flex-drection + flex-wrap;

1.4 justify-content属性

注意：justify-content属性定义了项目在主轴上的对齐方式;
justify-content:flex-start | flex-end | center | space-between |space-around;

justify-content的值

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

主轴上的对齐方式

1.5 align-items属性

注意：align-items属性定义项目在交叉轴上如何对齐。
align-items:flex-start | flex-end | center |baseline | stretch;
默认值是stretch，当元素没有设置具体尺寸或者auto时会将容器在交叉轴方向撑满(撑满整个容器)。

align-items的值：

flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

交叉轴上的对齐方式

1.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
也是在交叉轴上如何对齐;
align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content属性值：
+ stretch（默认值）：轴线占满整个交叉轴。
+ flex-start：与交叉轴的起点对齐。
+ flex-end：与交叉轴的终点对齐。
+ center：与交叉轴的中点对齐。
+ space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
+ space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-content属性值

1.7 align-items和align-content的区别

两者差异总结：

两者“作用域”不同
align-content管全局(所有行视为整体)
align-items管单行

结合效果

2.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0;
order:<integer>;

order属性

2.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目为1，则牵着占据的剩余空间将比其他项多一倍;
无多余宽度时，flex-grow无效;

flex-grow属性

2.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小;
值为0时不缩放；
元素宽度总和没有大于容器宽度时，此属性无效；
第一个元素flex-shrik:0; 其它都是1，所以第一个元素不压缩，其它都等比压缩；

flex-shrink

2.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。

flex-basis为auto:flex-basis为auto时，如设置了width则元素尺寸由width决定；没有设置则由内容决定
宽度为0：width: 0 >完全没显示，flex-basis: 0 >根据内容撑开宽度
宽度和flex-basis非0：数值相同时两者等效，同时设置，flex-basis优先级高
改变主轴：将主轴方向改为上→下，此时主轴上的尺寸是元素的height，flex-basis == height

查看源码

2.5 flex属性

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。

简写：

flex: 1 = flex: 1 1 0;
flex: 2 = flex: 2 1 0;
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸不伸缩

flex

2.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。

align-self值：

flex-start：交叉轴的起点对齐
flex-end : 交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容

align-self

总结

主轴方向、换行

缩放、顺序

对齐方式

案例

代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

弹性容器案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .son {
            width: 60px;
            height: 60px;
            border: 1px solid red;
            margin: 5px;
            box-sizing: border-box;
            background-color: blanchedalmond;
        }

        .flex-direction {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            /* 横向排列 主轴为水平方向，起点在左端 默认row*/
            flex-direction: row;
            /* 横向排列 主轴为水平方向，七点在右端 */
            /* flex-direction: row-reverse; */
            /* 纵向排列 主轴为垂直方向，起点在上端。 */
            /* flex-direction: column; */
            /* 纵向排列 主轴为垂直方向，起点在下端 */
            /* flex-direction: column-reverse; */
        }

        .flex-wrap {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            /* 不换行 自动压缩 默认值*/
            flex-wrap: nowrap;
            /* 换行 向下换行 */
            /* flex-wrap: wrap; */
            /* 换行 向下换行 */
            /* flex-wrap: wrap-reverse; */
        }

        .flex-flow {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            flex-flow: row wrap-reverse;
        }

        .justify-content {
            width: 600px;
            height: 200px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            /* 注意：是在主轴上的对齐方式 */

            /* 左对齐 */
            /* justify-content: flex-start; */
            /* 右对齐 */
            /* justify-content: flex-end; */
            /* 居中 */
            /* justify-content: center; */
            /* 两端对齐，项目之间的间隔都相等 */
            /* justify-content: space-between; */
            /* 每个项目两侧的间隔相等 */
            justify-content: space-around;
        }

        .align-items {
            width: 600px;
            height: 300px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            flex-flow: row wrap;
            /* 注意：是在交叉轴上的对齐方式 管单行*/

            /* 交叉轴的起点对齐 */
            /* align-items: flex-start; */
            /* 交叉轴的终点对齐 */
            /* align-items: flex-end; */
            /* 交叉轴的中点对齐 */
            /* align-items: center; */
            /* 项目的第一行文字的基线对齐 */
            align-items: baseline;

        }

        .align-items>div:nth-child(1) {
            font-size: 26px;
        }

        .align-content {
            width: 600px;
            height: 300px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            flex-flow: row wrap;
            /* 注意：是在交叉轴上的对齐方式  管整体*/

            /* 轴线占满整个交叉轴 默认stretch */
            /* align-content: stretch; */
            /* 与交叉轴的起点对齐 */
            /* align-content: flex-start; */
            /* 与交叉轴的终点对齐 */
            /* align-content: flex-end; */
            /* 与交叉轴的中点对齐 */
            /* align-content: center; */
            /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
            /* align-content: space-between; */
            /* 每根轴线两侧的间隔都相等 */
            align-content: space-around;
        }
    </style>
</head>
<body>
    <!-- flex-direction -->
    <div class="flex-direction">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- flex-wrap -->
    <div class="flex-wrap">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex-flow -->
    <div class="flex-flow">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- justify-content -->
    <div class="justify-content">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- align-items -->
    <div class="align-items">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- align-content -->
    <div class="align-content">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>
</body>
</html>

弹性元素案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .son {
            width: 60px;
            height: 60px;
            border: 1px solid red;
            margin: 5px;
            box-sizing: border-box;
            background-color: blanchedalmond;
        }

        .order,
        .flex-grow,
        .flex-shrink,
        .flex-basis,
        .flex,
        .align-self {
            width: 600px;
            height: 100px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
        }

        .order>div:nth-child(1) {
            /* 数值越小，排列越靠前 默认为0 */
            /* order: 2; */
        }

        .order>div:nth-child(2) {
            order: 10;
        }

        .order>div:nth-child(3) {
            order: -1;
        }

        .order>div:nth-child(4) {
            order: 5;
        }

        .order>div:nth-child(5) {
            order: 8;
        }

        .flex-grow>div {
            flex-grow: 1;
        }

        .flex-grow>div:nth-child(2) {
            flex-grow: 2;
        }

        .flex-shrink>div {
            flex-shrink: 1;
        }

        .flex-shrink>div:nth-child(1) {
            flex-shrink: 0;
        }

        .flex-basis>div:nth-child(2) {
            /* flex-basis优先级大于width */
            flex-basis: 100px;
        }

        .flex>div {
            /* 等于flex-grow：1; */
            flex: 1;
        }

        .align-self {
            height: 240px;
            align-items: flex-start;
        }

        .align-self>div:nth-child(2) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <!-- order -->
    <div class="order">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- flex-grow -->
    <div class="flex-grow">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
    </div>

    <!-- flex-shrink -->
    <div class="flex-shrink">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex-basis -->
    <div class="flex-basis">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex -->
    <div class="flex">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
    </div>

    <!-- align-self -->
    <div class="align-self">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
    </div>
</body>

</html>

C3动画+H5+Flex布局使用总结

概览

本编文章会讲到的知识点

CSS3动画

过渡、线性渐变、径向渐变

2D动画

3D动画

animation动画

动画库的使用

Html5

H5新增类名操作、自定义属性操作

H5网络监听、地理位置监听

web存储

h5FileReader对象、拖拽效果

Flex布局

1.1 flex-direction属性

1.2 flex-wrap属性

1.3 flex-flow属性

1.4 justify-content属性

1.5 align-items属性

1.6 align-content属性

1.7 align-items和align-content的区别

2.1 order属性

2.2 flex-grow属性

2.3 flex-shrink属性

2.4 flex-basis属性

2.5 flex属性

2.6 align-self属性

总结

案例

猜你喜欢

热点阅读