十四、css3動畫庫的使用、css3彈性盒子、calc（）、css3預處理、什麼是less以及好處是什麼。

小豆很優秀發表於2020-12-05
CSSS3動畫

一、css3動畫庫的使用

animate.css css3動畫庫，預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等動畫效果；

官網地址：https://daneden.github.io/animate.css/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .box1 {
            width: 200px;
            height: 50px;
            font: 30px/50px "微軟雅黑";
            margin: 50px auto;
            /* 方法一：直接使用動畫名稱 */
            /* animation: rubberBand 1s linear infinite; */
        }
    </style>
</head>
<body>
    <div class="box1">1116web班</div>
    <!-- 方法二:呼叫需要使用到的類名就可以了 -->
    <p class="rubberBand animated infinite delay-1s">1116web班11111</p>
</body>
</html>

二、css3彈性盒子

彈性盒子是 CSS3 的一種新的佈局模式。

引入彈性盒佈局模型的目的：是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間

相容性： ie11+

1、基本概念

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-iG2335MQ-1607108675821)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201203102958043.png)]

（1）容器

採用flex佈局(display：flex)的元素就是彈性容器（flex container），簡稱"容器"

（2）專案

容器下面的直接子元素（親兒子）就是flex專案（flex item），簡稱"專案"

（3）主軸

預設情況下，主軸是水平方向的，開始方向在左邊，結束方向在右邊

預設專案在容器中的排列只跟主軸有關係

（4）交叉軸

預設情況下，交叉軸是垂直方向的，開始方向在上邊，結束方向在下邊

2、設定為彈性盒子

display:flex;
display：inline-flex;

注意：

  • 設定了彈性盒子之後，只會影響親兒子的排列方式，後代元素如何排列不受影響
  • 設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效

3、容器屬性

（1）flex-direction

決定主軸的方向

  • row（預設值）：主軸為水平方向，起點在左端
  • row-reverse：主軸為水平方向，起點在右端
  • column：主軸為垂直方向，起點在上沿
  • column-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>
        .wrap {
            /* 彈性盒子 */
            display: flex;
            /* 主軸方向 */
            /* 預設值，從左到右 */
            flex-direction: row;
            /* 主軸從右到左 */
            flex-direction: row-reverse;
            /* 主軸從上到下 */
            flex-direction: column;
            /* 主軸從下到上 */
            flex-direction: column-reverse;
            width: 1000px;
            height: 600px;
            border: 1px solid red;
        }
        .box {
            width: 200px;
            height: 200px;
        }
        .wrap .box:nth-child(odd) {
            background-color: yellow;
        }
        .wrap .box:nth-child(even) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
    </div>
</body>
</html>

（2）justify-content

定義了專案在主軸上的對齊方式

  • flex-start（預設值） 主軸的起點對齊
  • flex-end 主軸終點對齊
  • center 居中
  • space-between 兩端對齊，專案之間的間隔都相等
  • space-around 每個專案兩側的間隔相等

（3）align-items

定義專案在交叉軸上如何對齊

  • flex-start：交叉軸的起點對齊
  • flex-end：交叉軸的終點對齊
  • center： 交叉軸的中點對齊
  • baseline: 專案的第一行文字的基線對齊
  • stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度

（4）flex-wrap

如果一條軸線排不下，如何換行

  • nowrap（預設）：不換行
  • wrap：換行，第一行在上方
  • wrap-reverse：換行，第一行在下方

4、專案屬性

（1）order

定義專案的排列順序

數值越小，排列越靠前，預設值為0

（2）flex-grow

定義專案的放大比例

預設是0，即如果存在剩餘空間，也不放大

（3）flex-shrink

定義專案的縮小比例

預設為1，即如果空間不足，該專案將縮小

不能設定負值

（4）align-self

定義彈性容器內被選中專案的對齊方式，和彈性容器的align-items屬性作用相同，此屬性用於專案

  • auto 預設值，元素繼承了它的父容器的align-items屬性，如果沒有父容器則為“stretch”
  • stretch 佔滿整個父級的高度
  • flex-start 交叉軸的起點對齊
  • flex-end 交叉軸的終點對齊
  • center 交叉軸的中點對齊
  • baseline 專案的第一行文字的基線對齊
  • inherit 從父元素繼承該屬性

四、calc()

calc()是css3的一個新增的功能，可以幫我們進行動態計算長度值

width:calc(200px + 30px * 2);

注意：

  • 運算子前後必須得有一個空格

  • 運算是遵循標準運算規則

  • pc端中支援ie9+

1、calc()實現兩欄自適應

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            float: left;
            width: 200px;
            background-color: lawngreen;
        }
        .right {
            float: left;
            width: calc(100% - 200px);
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">left盒子</div>
        <div class="right">right盒子</div>
    </div>
</body>
</html>

2、calc()實現三欄自適應

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .left {
            float: left;
            width: 200px;
            background-color: lawngreen;
        }
        .right {
            float: left;
            width: 300px;
            background-color: lightcoral;
        }
        .center {
            float: left;
            width: calc(100% - 200px - 300px);
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">left盒子</div>
        <div class="center">center盒子</div>
        <div class="right">right盒子</div>
    </div>
</body>
</html>

五、css3預處理

CSS 前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 CSS 增加了一些程式設計的特性，將 CSS 作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。

使用CSS前處理器語言，可以有讓CSS更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。

什麼是less及less的好處？

Less 包含一套自定義的語法及一個解析器，使用者根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 檔案,只有在被編譯後才能夠被瀏覽器識別使用。

好處：

  • 結構清晰，便於擴充套件。
  • 可以方便地遮蔽瀏覽器私有語法差異。
  • 可以輕鬆實現多重繼承。
  • 完全相容 CSS 程式碼，可以方便地應用到老專案中。

編譯工具—考拉

koala是一個前端前處理器語言圖形編譯工具，支援Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺執行，完美相容windows、linux、mac。

官網下載地址：http://koala-app.com/index-zh.html

相關文章