flex佈局響應式佈局過渡動畫

時間 2019-11-17

標籤 flex 佈局響應過渡動畫欄目 Flex 简体版

原文原文鏈接

Z-indexcss

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>z-index</title>
    <style type="text/css">
        .box{
            <!-- 輔助子級進行絕對定位 -->
            position:relative;
            width:400px;
            height:400px;
            background-color:red;
            margin:0 auto;
            position:relative;
        }
        .d1,.d2,.d3{
            width:200px;
            height:200px;
            position:absolute;
        }
        .d1{
            background-color:orange;
        }
        .d2{
            background-color:blue;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
        }
        .d3{
            background-color:black;
            right: 0;
            bottom:0;
        }
        <!-- 脫離文檔流的標籤，具備z-index屬性，能夠用來控制顯示層次的優先級，值爲任意正整數 -->
        .d2{
            z-index:1;
        }
    </style>
</head>
<body>
    <!-- 需求1：d1,d2,d3均爲box的一半大小 -->
    <!-- 需求2：d1左上角,d2居中,d3右下角 -->
    <!-- 需求3：d2區域在最上方（會覆蓋d1,d3重疊部分） -->
    <div class="box">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>
</html>

Flex佈局html

Flex是Flexible Box的縮寫，意爲」彈性佈局」，用來爲盒狀模型提供最大的靈活性。設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。函數

基本概念佈局

採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」。學習

水平爲軸（main axis），主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end。flex

垂直爲交叉軸（cross axis），交叉軸的開始位置叫作cross start，結束位置叫作cross end。動畫

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>flex佈局</title>
    <style type="text/css">
        .container{
            width:600px;
            height:600px;
            border:1px solid black;
            margin:0 auto;
        }
        .item{
            /* width:200px; */
            /* height:200px; */
            /* border-radius:50%; */
            background-color:orange;

        }
        .container{
            <!-- 容器：規定容器爲flex，則容器內的標籤會成爲該容器的項目（item） -->
            display:flex;
        }
        .item{
            <!-- 默認只能一行排列，因此item總寬不容許超出container寬度 -->
            width:300px;
            <!-- 默認狀況下item能夠不規定高度，高度會自適應父級 
             item沒有設置寬度下，能夠經過flex-frow決定對於父級的佔比 -->
        }
        .it1,.it3{
            flex-grow:1;
        }
        .it2{
            flex-grow:3;
            background-color:pink;
        }
        /* container屬性 */
        .container{
            <!-- flex-direction:row | row-reverse |column |column-reverse;  方向
            默認是row 列  column 是行  reverse反轉 若是是佔比的方式 行的時候是按照高來決定佔比-->
            flex-direction:row;
            flex-direction:column;
            <!-- flex-wrap:nowrap | wrap | wrap-reverse; 換行方式 -->

            <!-- justify-content:flex-start|flex-end|center|space-between|space-around; 水平對齊方式 -->
            justify-content:space-between;
        }
        .item{
            width:100px;
        }
    </style>
    <!-- 總結 -->
    <!-- 1.將父級display屬性設置flex，則父級成爲container，子級成爲item -->
    <!-- 2.container 設置item的排列方向flex-direction -->
    <!-- 3.item對於container的空間佔比flex-grow -->
</head>
<body>
    <!-- 學習目的 -->
    <!-- 以前學習的盒模型佈局（display） float佈局  positio都不能很好的解決block垂直居中的問題，flex佈局擅長-->
    <div class="container">
        <div class="item it1">1</div>
        <div class="item it2">2</div>
        <div class="item it3">3</div>
    </div>
</body>
</html>

容器屬性htm

flex-direction 屬性 決定主軸的方向（即項目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
    row（默認值）：主軸爲水平方向，起點在左端。
    row-reverse：主軸爲水平方向，起點在右端。
    column：主軸爲垂直方向，起點在上沿。
    column-reverse：主軸爲垂直方向，起點在下沿。

flex-wrap 屬性 定義，若是一條軸線排不下，如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;
    nowrap（默認）：不換行。
    wrap：換行，第一行在上方。
    wrap-reverse：換行，第一行在下方。

flex-flow 屬性 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
flex-flow: <flex-direction> <flex-wrap>;

justify-content 屬性 定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

align-items 屬性 定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;

align-content 屬性 定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

響應式佈局blog

1.在響應式佈局內，css語法同正常樣式表語法
2.響應式佈局之間存在不一樣屏幕尺寸的限制，使用樣式相互不影響
　　解釋：知足當前屏幕尺寸時，該樣式塊起做用，不知足時，則樣式塊失效
3.當響應式佈局中樣式塊起做用時，會與正常樣式塊設置協同佈局，遵循選擇器的優先級規則

原則：
1.採用響應式佈局的頁面，基本樣式塊只作共性樣式設置，須要根據頁面尺寸進行適應變化的樣式均有響應式佈局處理
2.要進行響應式佈局的頁面要處理全部屏幕尺寸下的樣式塊

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>響應式佈局</title>
    <style type="text/css">
        <!-- 基本樣式塊 -->
        /* .box{
            max-width:1200px;
            width:95%;
            margin:0 auto;
            background-color:red;
        }
        .it{
            width:300px;
            height:300px;
            font:900 50px/300px 'STSong';
            text-align:center;
            float:left;
            border-radius:50%;
            background-color:orange;
        }
        .box:after{
            content:"";
            display:block;
            clear:both;
        } */
        html,body{
            margin:0;
        }

        .it{
            height:300px;
            background-color:orange;
            font:900 50px/300px 'STSong';
            text-align:center;
            border-radius:50%;
            float:left;
        }
        .box:after{
            content:"";
            display:block;
            clear:both;
        }
        /* 屏幕寬度超出1200px */
        @media only screen and (min-width:1200px ){
            <!-- 1.在響應式佈局內，css語法同正常樣式表語法
            　　　2.響應式佈局之間存在不一樣屏幕尺寸的限制，使用樣式相互不影響
            　　　解釋：知足當前屏幕尺寸時，該樣式塊起做用，不知足時，則樣式塊失效
            　　　3.當響應式佈局中樣式塊起做用時，會與正常樣式塊設置協同佈局，遵循選擇器的優先級規則 -->
            .box{
                background-color:red;
            }
            .it{
                width:25%;
            }
            .box:after{
            content:"";
            display:block;
            clear:both;
            }
         <!-- 原則：
               1.採用響應式佈局的頁面，基本樣式塊只作共性樣式設置 
                須要根據頁面尺寸進行適應變化的樣式均有響應式佈局處理 
               2.要進行響應式佈局的頁面要處理全部屏幕尺寸下的樣式塊 -->
        }
        <!-- 屏幕寬度間於600至1200px -->
        @media only screen and (min-width: 600px) and (max-width:1200px ){
            .box{
                background-color:pink;
            }
            .it{
                width:30%;
                margin:0 calc(10% / 6);
            }
        }
        <!-- 寬度小於600px -->
        @media only screen and (max-width:600px ){
            .box{
                background-color:cyan;
            }
            .it{
                width:80%;
                margin-left:10%;
                min-width:300px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="it">1</div>
        <div class="it">2</div>
        <div class="it">3</div>
        <div class="it">4</div>
        <div class="it">5</div>
        <div class="it">6</div>
        <div class="it">7</div>
        <div class="it">8</div>
        <div class="it">9</div>
        <div class="it">10</div>
        <div class="it">11</div>
        <div class="it">12</div>
    </div>
</body>
</html>

過渡

過渡：從一個狀態以動畫方式變成另外一種狀態的這種變化過程叫作過渡
過渡效果經過父級產生，能夠製做一個父級（對應下面示例代碼裏的hover）層
父級（對應下面示例代碼裏的hover）層處理方式：與顯示層同等區域大小
一樣能夠將顯示層的位置交於父級（對應下面示例代碼裏的hover）層處理

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>過渡</title>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background-color:orange;
            <!-- 過分 -->
            <!-- 持續時間 -->
            <!-- 來去均有過分效果 -->
            transition-duration:.5s;

            <!--延遲時間 -->
            /* transition-delay:1s; */

            <!-- 過分屬性 默認屬性all -->
            <!-- 定義的屬性慢慢變 其餘的屬性瞬間變 -->
              /* transition-property:background-color; */
              /* transition-property:width,height */

            <!-- 過分的曲線 -->
            <!-- transition-timing-function:linear; */

            <!-- 總體設置 -->
            transition:all .5s .2s linear;
            <!-- 第一個屬性 第二個持續時間 第三個延遲時間 第四個曲線 -->
        }
        .hover{
            width:200px;
            height:200px;
        }
        <!-- 能夠製造第二狀態的處理方式 -->
        .hover:hover .box{
            width:400px;
            height:100px;
            background-color:red;
            <!-- transition放在這隻有放上去有動畫效果鼠標不在區域內就瞬間變回沒有過分效果 -->
            /* transition-duration:0.2s; */
        }
        .box:active{

        }

    </style>
</head>
<body>
    <div class="hover">
        <div class="box">

        </div>
    </div>
</body>
</html>

過渡屬性

transition-property 屬性 表示可過渡的樣式屬性
transition-property: all | [css1 [...]];

transition-duration 屬性 表示過渡持續時間
transition-duration: <time>;

transition-delay 屬性 表示過渡延遲時間
transition-delay: <time>;

transition-timing-function 屬性 表示過渡運動曲線
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函數

transition 屬性 表示前四個屬性總體賦值
transition: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;

動畫

@keyframes <name>{
    /*from未寫任何屬性設置時，默認所有取初始值（初始狀態）*/
    from{}
    to{}
}

@keyframes <name>{
    0% {}
    ...
    100% {}
}
動畫屬性設置給指定選擇器標籤，動畫體在樣式中單獨設置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        <!--動畫樣式-->
        .box {
            <!--綁定動畫名-->
            animation-name: wasai;
            <!--持續時間-->
            animation-duration: 1s;
            <!--延遲時間-->
            /*animation-delay: .1s;*/
            <!--動畫結束停留位置:backwards起點 forwards終點-->
            /*animation-fill-mode: forwards;*/
            <!--運動次數 infinite無數次-->
            animation-iteration-count: 4;
            <!--屢次運動方向的規則-->
            /*alternate:來回*/
            /*alternate-reverse:終點開始來回*/
            /*animation-direction: alternate-reverse;*/quotes: ;
            <!--動畫狀態 running-->
            /*animation-play-state: paused;*/

            <!--總體設置-->
            animation: wasai 1s 2 linear alternate;
        }
        .box:hover {
            animation-play-state: running;
        }
        <!--動畫體-->
        @keyframes wasai{
               0% {

               }
            100% {
                width: 400px;
            }
        }
        @keyframes wasai1{
               0% {}
            100% {}
        }
        @keyframes wasai2{
               0% {}
            100% {}
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>