CSS 知識點總結

CSS 定位

之前已經介紹了布局，那麼布局和定位的差別是什麼呢？

• 布局是在螢幕平面上的
• 定位是在垂直于螢幕的

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

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

position: relative

使用場景如下：

打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）

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 動畫優化

• 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 部分，需要多練習代碼，多看文檔。