HTML CSS3变形移动、旋转、缩放、3d 、动画 拉伸布局等笔记

变形移动
 

    <!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 type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                transition: all 0.5s; /*变形移动所有*/
            }
            div:active{ /*鼠标活动时 状态为鼠标点击但是没有松开时触发 相当于点击事件*/
                /*transform: translateX(100px);*/ /*水平移动100px*/
                /*transform: translate(50%); *//*百分比代表是自身宽度的一半 不是父盒子的宽度*/
                /*transform: translate(50px);*/ /*点击之后x轴方向移动50px*/
                transform: translate(50px ,50px); /*点击之后 x y 轴方向移动50px*/
                /*transform: translateY(100px);*/ /*点击后y轴移动100px*/
            }
        </style>
    </head>
    <body>
        <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">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                /*transform: translate(100px); 水平移动100px*/
                /*transform: translate(50%); 默认是X轴 水平移动自身宽度的一半*/
                /*transform: translateY(50%); 在y轴移动自身高度的一半*/
                /*定位移动*/
                position: absolute;
                left: 50%;
                top: 50%;
                /*margin-left: -100px;需要计算*/
                transform: translate(-50%,-50%); /*右移上移自身的一半 */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

transform:scale 图片缩放
  

  <!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 type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: hotpink;
                margin: 100px auto;
            }
            div:active{
                /*transform: scale(2);*/ /*水平 垂直縮放 一个参数代表宽 高都同时缩放*/    
                    transform: scale(1, 2); /*宽度不变,高度变2倍*/
            }
            section{
                width: 632px;
                height: 340px;
                margin: 0 auto;
                overflow: hidden; /*溢出隐藏*/
                border: 1px solid green;
            }
            section img{
                transform: all 0.2s; /*图片缩放 谁做动画,谁加过渡*/
            }
            section img:hover{
                transform: scale(1.8); /*缩放*/
            }
        </style>
    </head>
    <body>
        <div></div>
        <section>
            <img src="images/mi.jpg">
        </section>
    </body>
    </html>

transform:rote 旋转
  

 <!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 type="text/css">
            img{
                margin: 100px;
                transition: all 3s ease-in 1s; /*全部属性过渡 过渡时长 动画曲线 何时开始*/
                /*border-radius: 50%;*/ /*圆角*/
                border-radius: 100px;
                border: 10px solid deeppink;
            }
            img:hover{
                /*transform: rotate(-90deg);*/ /*deg度数*/
                transform: rotate(720deg);
            }
        </style>
    </head>
    <body>
        <img src="images/chu.jpg">
    </body>
    </html>

沿x轴旋转
 

   <!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 type="text/css">
            img{
                margin: 100px;
                transition: all 1s ease-in 0.2s;
            }
            /*img:active{*/
            .one:hover{
                transform: rotateX(360deg);
            }
            .two:hover{
                transform: rotateY(360deg);
            }
            .three:active{
                transform: rotateZ(180deg);
            }
            .four:active{
                transform: rotateX(45dep) rotateY(180deg) rotateZ(90deg) skew(0,10deg);
            }
        </style>
    </head>
    <body>
        <img class="one" src="images/3.jpg">
        <img class="two" src="images/4.jpg">
        <img class="three" src="images/5.jpg">
        <img class="four" src="images/6.jpg">
    </body>
    </html>

变换中心点旋转
  

  <!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 type="text/css">
            img{
                margin: 200px;
                transition: all 0.6s; /*添加所有属性过渡效果*/
                transform-origin: 20px 30px; /*旋转中心点*/
            }
            img:hover{
                transform: rotate(360deg); /*x轴旋转360度*/
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
    </body>
    </html>

呈360旋转排列的图片
  

  <!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 type="text/css">
            div{
                width: 250px;
                height: 170px;
                border: 1px solid deeppink;
                margin: 400px auto;
                position: relative;
            }
            div img{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 0.6s; /*添加过渡属性*/
                transform-origin: top right; /*旋转的中心点*/
            }
            div:hover img:first-child{ /*鼠标经过div 第一张图片旋转60°*/
                transform: rotate(60deg); /*选装60°*/
            }
            div:hover img:nth-child(2){ /*鼠标经过div 第二张图片旋转60°*/
                transform: rotate(120deg); /*选装60°*/
            }
            div:hover img:nth-child(3){
                transform: rotate(180deg); /*选装60°*/
            }
            div:hover img:nth-child(4){
                transform: rotate(240deg); /*选装60°*/
            }
            div:hover img:nth-child(5){
                transform: rotate(300deg); /*选装60°*/
            }
            div:hover img:nth-child(6){
                transform: rotate(360deg); /*选装60°*/
            }

        </style>
    </head>
    <body>
        <div>
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
        </div>
    </body>
    </html>

变形skew倾斜
  

 <!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 type="text/css">
            div{
                font-size: 50px;
                font-weight: 700;
                margin: 100px;
                transition: all 0.7s; /*过渡属性*/
            }
            div:hover{
                /*transform: skew(-30deg, 0);*/
                transform: skew(30deg, 0);
            }
        </style>
    </head>
    <body>
        <div>不经云清零天下会,荣登雄霸宝位</div>
    </body>
    </html>

rotateX旋转
    

<!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 type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:hover{
                transform: rotateX(360deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
    </body>
    </html>

perspective 视距
  

  <!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 type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:first-child:hover {
                transform: rotateX(360deg);
            }
            img:nth-child(2):hover {
                transform: rotateY(360deg);
            }
            img:nth-child(3):hover{
                transform: rotateZ(360deg);
            }
            img:last-child:hover{
                transform: skew(30deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
    </body>
    </html>

透视效果
  

 <!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 type="text/css">
            /*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/
            body{
                perspective: 1000px;
            }
            img{
                display: block;
                margin: 100px auto;
                transition: all 1s;
            }
            img:first-child:hover {
                transform: rotateX(360deg);
            }
            img:nth-child(2):hover {
                transform: rotateY(360deg);
            }
            img:nth-child(3):hover{
                transform: rotateZ(360deg);
            }
            img:last-child:hover{
                transform: skew(30deg);
            }
        </style>
    </head>
    <body>
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
        <img src="images/pk1.png">
    </body>
    </html>

translateZ移动 3D效果
  

  <!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 type="text/css">
            body{
                perspective: 600px;
            }
            div{
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                transition: all 1s; /*添加过渡*/
            }
            div:hover{
                /*transform: translateX(100px);*/
                /*transform: translateY(100px);*/
                transform: translateZ(300px); /*z控制物体与摄影机之间的距离 z越大 物体就越大 看似3D效果*/
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

translate3d
    <!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 type="text/css">
            body{
                perspective: 700px;
            }
            div.box1{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                transition: all 0.7s; /*所有的属性过渡*/
                margin: 100px auto;
                /*transform: translate(-50%,-50%); */
                transform: translate(-50%);
            }
            div:hover{/* 近大远小*/
                transform: translate3d(100px, 100px, 300px); /*参数 x y z 其中x y可以是px 或者是% Z只能是px*/
            }
            h4{
                transform: translate3d(0px, 50px, 0px);
                transition: all 0.6s;
            }
            h4:hover{
                transform: translate3d(0px, 0px, 0px);
            }
            .box{
                height: 1px;
                width: 100%;
                background-color: red;
                margin: 0;
            }
            /*清除浮动*/
            .clearfix::after{
                content: ">";
                display: block;
                height: 0;
                visibility: hidden;/* 隐藏盒子*/
                clear: both; /*清除浮动*/
            }
            .clearfix{
                *zoom:  1;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box"></div>
        <h4>小米:让每一个人都能平等的享受科技带来的乐趣</h4>
    </body>
    </html>

开门大吉
 

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>开门大吉</title>
            <style type="text/css">
                body{
                    background-color: green;
                }
                section{
                    width: 450px;
                    height: 300px;
                    margin: 100px auto;
                    border: 1px solid #000;
                    background: url(images/chu.jpg) no-repeat;
                    background-size: cover; /*保证图片充满整个区域*/
                    perspective: 1000px; /*给父盒子添加透视效果 */
                    position: relative;
                }
                /*宽度缩放一半*//*添加过渡效果*/
                .door-l,.door-r{
                    position: absolute;
                    top: 0;
                    width: 50%;
                    height: 100%;
                    background-color: green;
                    background: url(images/bg.png);
                    transition: all 1s;
                }
                /*左侧盒子按照左旋转*/
                .door-l{
                    left: 0;
                    border: 1px solid #000;
                    transform-origin: left;
                }
                .door-r{
                    right: 0;
                    border: 1px solid #000;
                    transform-origin: right;
                }
                .door-l::before,.door-r::before{ /*伪元素*/
                    content: "";
                    position: absolute; /*绝对定位*/
                    top: 50%;
                    width: 20px;
                    height: 20px;
                    border: 1px solid #000;
                    border-radius: 50%;
                    transform: translateY(-50%);
                }
                .door-l::before{
                    right: 15px;
                }
                .door-r::before{
                    left: 15px;
                }
                /*当鼠标经过selection盒子时候 翻转rotateY*/
                section:hover .door-l{
                    transform: rotateY(-130deg);
                }
                section:hover .door-r{
                    transform: rotateY(130deg);
                }
            </style>
    </head>
    <body>
        <section>
            <div class="door-l"></div>
            <div class="door-r"></div>
        </section>
    </body>
    </html>

两面翻转图片
 

   <!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 type="text/css">
            div{
                width: 224px;
                height: 224px;
                margin: 100px auto;
                position: relative; /*子绝父相*/
                transform-style: preserve-3d; /*保留当前位置  图片扁平滑*/
            }
            div img{
                position: absolute;
                top: 0;
                left: 0;
                transition: all 4s; /*添加过渡属性*/
            }
            div img:first-child{
                z-index: 1;
                backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/
            }
            div:hover img{
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
        <div><img src="images/qian.svg" alt=""><img src="images/hou.svg" alt=""></div>
    </body>
    </html>

CSS3动画属性
    @keyframes 规定动画
    animation  所用动画属性的简写
    animation-name 动画名称
    animation-duration 动画时长
    animation-timing-function 动画运动曲线 默认ease
    animation-delay 何时开始
    animation-iteration-count 动画播放次数 默认1
    animation-direction 是否在下一期逆向播放
    animation-paly-state 正在运行或者暂停 默认 running
    animation-fill-mode 规定动画时间外的状态
    除了名字,动画时间 延时有严格顺序要求,其他随便

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 type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: deeppink;
                /*animation: go 2s ease 0s 2 reverse;*/ /*动画名称go 运动时间2s 运动曲线ease 何时开始0s 播放次数2 [reverse 逆向 normal 正常+]*/
                /*animation: go 2s ease 0s 2 ;*/ /*顺时针2次*/
                /*animation: go 2s ease-in 0s infinite; *//*infinite 无线循环*/
                animation: go 2s ease-in 0s infinite alternate; /*normal正常 alternate 正常-反方向 交替 alternate reverse 先反在正 交替 */
            }
            @keyframes go {  /*定义动画 在x轴移动600px*/
                from{
                    transform: translateX(0px);
                }to{
                    transform: translateX(600px);
                }
            }
        </style>
    </head>
    <body>
        <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">
        <title>Document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: deeppink;
                /*animation: go 2s ease 0s infinite alternate;*/ /*动画名称 动画时长 运动曲线 何时开始 无线循环 正-反交替*/
                animation: go 2s infinite; /*引用动画*/
            }
            @keyframes go { /*定义动画*/
                0%{ /*等价于from*/
                    transform: translate3d(0px, 0px, 0px);
                }
                25%{
                    transform: translate3d(800px, 0px, 0px);
                }
                50%{
                    transform: translate3d(800px, 400px, 0px);
                }
                75%{
                    transform: translate3d(0px, 400px, 0px);
                }
                100%{ /*相当于to*/
                    transform: translate3d(0px, 0px, 0px);
                }
                /*动画结束之后返回原来的位置*/
            }
        </style>
    </head>
    <body>
        <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">
        <title>Document</title>
        <style type="text/css">
            img{
                animation: car 5s infinite; /*引入动画*/
                }
            @keyframes car { /*定义动画*/
                0%{
                    transform: translate3d(0px, 0px, 0px);
                }
                50%{
                    transform: translate3d(1000px, 0px, 0px);
                }
                51%{
                    transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*如果是多组变形 都属于transform 用空格隔开*/
                }
                99%{
                    transform: translate3d(0px, 0px, 0px) rotateY(180deg);
                }
            }
        </style>
    </head>
    <body>
        <img src="images/car.jpg" width="250">
    </body>
    </html>

横幅无线滚动效果
  

 <!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 type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        nav{
            width: 1200px; /*200*6=1200  图片的宽度*展示图片的数量 前提是图片必须尺寸一致*/
            height: 100px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }
        nav li{
            float: left; /*浮动*/
        }
        nav ul{
            width: 200%;
            animation: moving 10s linear infinite;/*引用动画 无线循环 linear匀速*/
        }
        @keyframes moving { /*定义动画*/
            form{
                transform: translateX(0);
            }
            to{
                transform: translateX(-1200px);
            }
        }
        nav:hover ul{ /*鼠标经过ul就暂停动画*/
            animation-play-state: paused; /*暂停动画*/
        }
    </style>
</head>
<body>
    <nav>
    <ul>
        <li><img src="images/1.jpg" width="200" height="100"></li>
        <li><img src="images/2.jpg" width="200" height="100"></li>
        <li><img src="images/3.jpg" width="200" height="100"></li>
        <li><img src="images/4.jpg" width="200" height="100"></li>
        <li><img src="images/5.jpg" width="200" height="100"></li>
        <li><img src="images/6.jpg" width="200" height="100"></li>
        <li><img src="images/1.jpg" width="200" height="100"></li>
        <li><img src="images/2.jpg" width="200" height="100"></li>
        <li><img src="images/3.jpg" width="200" height="100"></li>
        <li><img src="images/4.jpg" width="200" height="100"></li>
        <li><img src="images/5.jpg" width="200" height="100"></li>
        <li><img src="images/6.jpg" width="200" height="100"></li>
    </ul>
    </nav>
</body>
</html>

传统的三等分
  

 <!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 type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid green;
                margin: 100px auto;
            }
            section div{
                width: 33.33%;
                height: 100%;
                float: left;
            }
            section div:nth-child(1){
                background-color: green;
            }
            section div:nth-child(2){
                background-color: orange;
            }
            section div:nth-child(3){
                background-color: deepskyblue;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex 伸缩布局
  

  <!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 type="text/css">
        /*    *{
                margin: 0;
                padding: 0;
            }*/
            section{
                width: 80%;
                height: 200px;
                border: 1px solid greenyellow;    
                margin: 100px auto;
                display: flex; 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子
            }
            div{
                height: 100%;
                /*flex: 1; 表示每个盒子都占一份*/
            }
            div:first-child{
                background-color: deeppink;
                flex: 1; /*子盒子占分数为1*/
            }
            div:nth-child(2){
                background-color: lawngreen;
                    flex: 2; /*子盒子占分数为1*/
            }
            div:last-child{
                background-color: lightseagreen;
                    flex: 1; /*子盒子占分数为1*/
            }


        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex伸缩固定布局
 

   <!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 type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid #ccc;
                display: flex; /*伸缩布局模式*/
                min-width: 500;/*最小宽度500px*/
            }
            section div{
                height: 100%;
            }
            section div:first-child{
                background-color: green;
                width: 200px;
            }
            section div:nth-child(2){
                background-color: pink;
                flex: 1;
            }
            section div:last-child{
                background-color: deeppink;
                flex: 1;
            }
            /*说明:前面是固定的200px 后边两个盒子会平分剩余的宽度*/
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

伸缩布局排列方式
 

   <!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 type="text/css">
            section{
                width: 80%;
                height: 200px;
                border: 1px solid rebeccapurple;
                display: flex; /*伸缩布局*/
                min-width: 500px;
                /*flex-direction: column;*/  /*排列方式是列*/
                /*flex-direction: row;*/ /*排列方式是row*/
                flex-direction: row-reverse; /*排列方式是反向row */
            }
            div:first-child{
                background-color: deepskyblue;
                flex: 1; /*分1份*/
            }
            div:nth-child(2){
                background-color: rebeccapurple;
                flex: 3; /*分3份*/
            }
            div:nth-child(3){
                background-color: green;
                flex: 1;
            }
            div:last-child{
                background-color: hotpink;
                /*height: 500px;*/
                width: 100px;
            }
        </style>
    </head>
    <body>
        <section>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </section>
    </body>
    </html>

justify-content 插入内容
    flex-start 默认从父盒子开头
    fled-end 项目位于父盒子结尾
    center 项目位于容器中心
    space-between 项目位于父盒子各行之间留有空白的容器内
    space-around 项目位于各行之前、之后、之间都留有空白的容器

justify-content
  

 <!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 type="text/css">
            section{
                width: 1000px;
                height: 250px;
                border: 1px solid orange;
                display: flex; /*伸缩布局*/
                /*justify-content: flex-start; 默认*/
                /*justify-content: flex-end; 从父盒子右边添加*/
                /*justify-content: center; 从父盒子中心添加*/
                /*justify-content: space-between;*/ /*在父盒子宽度范围内平均空白的区域*/
                justify-content: space-around; /*在各控件之前之间之后平局分配空白区域*/
            }
            div{
                width: 200px;
                height: 250px;
            }
            div:first-child{
                background-color: deeppink;
                width: 400px;
            }
            div:nth-child(2){
                background-color: green;
            }
            div:last-child{
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

align-items 调整测轴对齐
    stretch 默认值 项目被拉伸以适应容器 前提子元素不要给高度
    center 项目位于容器中心
    flex-start 项目位于容器开头
    flex-end 项目位于容器结尾
  

 <!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 type="text/css">
            section{
                width: 1000px;
                height: 500px;
                border: 1px solid green;
                display: flex; /*伸缩布局*/
                justify-content: space-between;
                /*align-items: flex-start; 默认上对齐*/
                /*align-items: flex-end; 底部对齐*/
                /*align-items: center; *//*垂直对齐*/
                align-items: stretch; /*拉伸高*/
            }
            section div{
                width: 200px;
                /*height: 100px;*/
            }
            div:first-child{
                background-color: greenyellow;
            }
            div:nth-child(2){
                background-color: orange;
            }
            div:last-child{
                background-color: powderblue;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

flex-wrap控制是否换行
    norwrap 不拆行 不拆列 压缩显示
    wrap 必要时拆行拆列
    wrap-reverse 相反顺序 必要时拆行拆列

  

 <!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 type="text/css">
        section{
            width: 1000px;
            height: 1000px;
            border: 1px solid green;
            display: flex; /*伸缩模式*/
            /*flex-wrap: nowrap; 默认 不换行 则压缩显示*/
            /*flex-wrap: wrap; 必要时拆分*/
            flex-wrap: wrap-reverse; /*反转*/
        }
        div{
            width: 250px;
            height: 200px;
        }
        div:first-child{
            background-color: green;
        }
        div:nth-child(2){
            background-color: orange;
        }
        div:nth-child(3){
            background-color: darkorange;
        }
        div:nth-child(4){
            background-color: limegreen;
        }
        div:nth-child(5){
            background-color: pink;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </section>
</body>
</html>

align-content 堆栈 [由flex-wrap产生的独立行对齐]
    align-content针对flex容器多轴情况 align-item是针对一行情况排列
    父元素必须设置display:flex 横向排列必须设置 flex-direction:row flex-wrap:wrap 属性才会起作用
    stretch 默认值 项目被拉伸适应容器
    center 项目位于容器中心
    flex-start 项目位于容器开头
    flex-end 项目位于容器结尾
    space-between 项目位于各行之间的空白
    space-around 项目位于各行之前 之间 之后都留有控件容器内

  

 <!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 type="text/css">
            section{
                width: 1000px;
                height: 800px;
                border: 1px solid purple;
                display: flex; /*拉神模式*/
                flex-flow: row wrap; /*必须设置这个属性 否则下边不起作用*/
                /*align-content: center; 项目居中*/
                /*align-content: flex-start; 位于父盒子开始排列*/
                /*align-content: flex-end; 位于父盒子的底部*/
                /*align-content: space-between; 垂直平分各行之前之后的空白容器区域*/
                /*align-content: space-around; 垂直平分各行之前之间之后的空白区域*/
                align-content: stretch; /*不要给子元素高度值*/
            }
            div{
                width:248px;
                /*height: 200px;*/
                border: 1px solid greenyellow;
                background-color: #00A477;
            }
        </style>
    </head>
    <body>
        <section>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </section>
    </body>
    </html>

order 排序 数值越小越靠前
  

 <!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 type="text/css">
        section{
            width: 1000px;
            height: 600px;
            border: 1px solid green;
            /*设置拉伸属性要给父类!!!*/
            display: flex;
            /*flex-wrap: wrap; 是否换行*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/ /*从父盒子右边添加*/
            /*justify-content: center;*/ /*从父盒子中心添加*/
            /*justify-content: space-around;*/ /*在各控件之前之间之后平局分配空白区域*/
            flex-wrap: wrap; /*必要时拆行拆列*/
            align-items: center; /*垂直居中*//*调整测轴对齐 垂直居中*/
            flex-direction: row;
            align-content: center; /*对战*/

        }
        div{
            width: 248px;
            height: 200px;
            border: 1px solid darkred;
            background-color: seagreen;
        }
        div:nth-child(7){
            background-color: pink;
            order: -1;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </section>
</body>
</html>

上一篇:Redis04---事务


下一篇:Redis 事务