CSS 知識總結

本篇文章咱們來對 CSS 知識作一個總結。以前已經對 CSS 基礎概念 和 CSS 佈局 進行了整理，能夠點擊跳轉查看。接下來，我主要對 CSS 定位、瀏覽器渲染原理以及 CSS 動畫，三部分進行介紹。

CSS 定位

以前已經介紹了佈局，那麼佈局和定位的區別是什麼呢？

• 佈局是在屏幕平面上的
• 定位是在垂直於屏幕的

定位經過 position 屬性進行建立，一共分爲五個值

• static 默認值，待在文檔流裏
• relative 相對定位，升起來，但不脫離文檔流
• absolute 絕對定位，定位基準是祖先元素裏的非 static，最近的定位元素
• fixed 固定定位，定位基準是 viewport 視口
• sticky 粘滯定位，在移動端存在太多bug，不作過多介紹

position: relative

使用場景以下：

1. 用於作位移(不經常使用)
2. 用於給 absolute 元素作定位基準

配合 z-index 使用

• z-index: auto 默認值，不建立新層疊上下文
• z-index: 0/1/2
• z-index: -1/-2

默認每個 z-index 爲 auto ，auto 計算出來的值是 0 。

position: absolute

使用場景以下：

脫離原來的位置，另起一層。好比對話框的關閉按鈕、鼠標提示等。

配合 z-index 使用

注意：某些瀏覽器不寫 top / left 會位置錯亂

• 善用 left: 100%
• 善用 left: 50%; 加負 margin

postion: fixed

使用場景以下：

1. 廣告
2. 回到頂部按鈕

配合 z-index 使用

• 只要元素定位了，自動跑到全部東西最上層。默認 z-index = 0
• 全部定位元素會以文字爲基準，第一層爲 0 ，以此類推
• 若是是 -1 ，比背景還要低，能夠無限日後，可是不能超過默認的層疊上下文

層疊上下文

上面定位提到了層疊上下文，那麼什麼是層疊上下文呢？層疊上下文也叫堆疊上下文。

比喻：每個層疊上下文就是一個新的小世界(做用域)，這個小世界裏的 z-index 跟外界無關，處在同一個小世界的 z-index 才能比較

那麼哪些不正交屬性能夠建立它？如下這些是比較經常使用的屬性

z-index / flex / opacity / transform
複製代碼

CSS 動畫

下面咱們來看下 CSS 動畫。

動畫定義

動畫是由許多精緻的畫面(幀)以必定的速度連續播放時，肉眼因視覺慘象產生錯覺，而誤覺得是活動的畫面。

概念

• 幀：每一個靜止的畫面都叫幀
• 播放速度：每秒 24 幀或者每秒 30 幀

瀏覽器渲染原理

步驟

1. 根據 HTML 構建 HTML 樹(DOM)
2. 根據 CSS 構建 CSS 樹(CSSOM)
3. 將兩棵樹合併成一顆渲染樹(render tree)
4. Layout 佈局(文檔流、盒模型、計算大小和位置)
5. Paint 繪製(把邊框顏色、文字顏色、陰影等畫出來)
6. Compose 合成(根據層疊關係展現畫面)

三種不一樣的渲染方式

1. 第一種，例如：div.remove() ，會觸發當前消失，其餘元素 relayout
2. 第二種，例如：改變顏色，直接 repaint + composite
3. 第三種，例如：改變改變 transform ，只需 composite

這裏推薦 CSS Triggers 這個網站，能夠查看每一個屬性出發哪種流程。

CSS 動畫優化

• JS 優化。使用 requestAnimationFrame 代替 setTimeout 或 setInterval
• CSS 優化。使用 will-chage 或 translate

transform 全解

四個經常使用功能

• 位移 translate
• 縮放 scale
• 旋轉 rotate
• 傾斜 skew

注意：這些功能通常都須要配合 transition 過渡。inline 不支持 transform，須要先變成 block

translate

• translateX(<length-percentage>)
• translateY(<length-percentage>)
• translate(<length-percentage>, <length-percentage>?)
• translateZ(<length>) 且父容器 perspactive
• translate3d(X, Y, Z)

translate(-50%, -50%) 可作絕對定位元素的居中

scale

• scaleX(<number>)
• scaleY(<number>)
• scale(<number>, <number>?)

rotate

• rotate([<angle> | <zero>])
• rotateX([<angle> | <zero>])，以 X 軸旋轉
• rotateY([<angle> | <zero>])，以 Y 軸旋轉
• rotateZ([<angle> | <zero>])，以 Z 軸旋轉
• rotate3d([<angle> | <zero>])

skew

• skewX([<angle> | <zero>)
• skewY([<angle> | <zeor>)
• skew([<angle> | <zeor>], [<angle> | <zero>]?)

多重效果

經過將以上屬性組合使用，實現一些複雜效果

transition 過渡

做用

補充中間幀

語法

• transition: 屬性名 時長 過渡方式 延遲
• transition: left 200ms linear
• transition: left 200ms, top 400ms 能夠用逗號分隔兩個不一樣的屬性
• transition: all 200ms 能夠用 all 表明全部屬性
• 過渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps

注意

並非全部屬性都能過渡

• display: none => block 無法過渡
• 通常改爲 visibility: hidden => visible

過渡必需要有起始

好比 hover 和 非 hover 就是兩次動畫

若是有中間點，能夠經過下列兩種方法解決

1. 使用兩次 transform

   .a === transform ===> .b

   .b === transform ===> .c

2. 使用 animation

   聲明關鍵幀

   添加動畫

animation

@keyframes 完整語法

• 一種寫法是 from to

@keyframes xxx{
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(100%);
    }
}
複製代碼

• 另外一種寫法是百分數

@keyframes xxx{
    0%{
        transform: none;
    }
    66.66%{
        transform: translateX(200px);
    }
    100%{
        transform: translateX(200px) translateY(100px);
    }
}
複製代碼

animation 縮寫語法

animation: 時長 | 過渡方式 | 延遲 | 次數 | 方向 | 填充模式 | 是否暫停 | 動畫名;

• 時長：1s 或 1000ms
• 過渡方式：跟 transition 取值同樣
• 次數：3 或者 2.4 或者 infinite
• 方向：reverse | alternate | alternate-reverse
• 填充模式：none | forwards | backwards | both
• 是否暫停：paused | running
• 以上全部屬性都有對應的單獨屬性

CSS 部分的知識整理差很少就先告一段落了，關於 CSS 部分，須要多練習代碼，多看文檔。