讓你成為靈魂畫手的 JS 引擎：Zdog

文作者：HelloGitHub-kalifun

今天給大家推薦一個使用 JavaScript 語言編寫的開源 Web 3D 模型項目 —— Zdog。

一、介紹

1.1 Zdog

Zdog 項目地址：https://github.com/metafizzy/zdog

Tips: 本文出現(xiàn)的所有作品都是通過 Zdog 完成的。

圓形、扁平、設(shè)計師友好用于 canvas 和 SVG 的偽 3D 引擎。

使用 Zdog 您可以在 Web 上設(shè)計和渲染簡單的 3D 模型。Zdog 是一個偽 3D 引擎。它的幾何形狀存在于 3D 空間中，但呈現(xiàn)為扁平形狀，這使 Zdog 特別。

1.2 Zdog 特點

體積小：整個庫只有 2100 行代碼，最小體積為 28 KB。
圖形圓滑：所有的圓形都呈現(xiàn)為圓邊，沒有多邊形鋸齒。
使用友好：使用 API 完成建模。

二、方法介紹

解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。

2.1 初始靜態(tài)演示

讓我們進入一個基本的非動畫演示。

靜態(tài)演示只需要在畫布上將想要繪畫的圖像渲染出來就可以了。

// Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo=new Zdog.Illustration({
 // 用class選擇器設(shè)置畫布
 element: '.zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo
 addTo: illo,
 // 設(shè)置圓的直徑
 diameter: 80,
 // 設(shè)置畫筆寬度
 stroke: 20,
 // 設(shè)置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo.updateRenderGraph();

2.2 動畫

為實現(xiàn)動畫場景，我們需要每幀重新渲染圖形在畫布上。

let illo=new Zdog.Illustration({
 // 用id選擇器設(shè)置畫布
 element: '#zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: illo,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉(zhuǎn)。值越大越快。
 illo.rotate.y +=0.03;
 illo.updateRenderGraph();
 // 動畫下一幀繼續(xù)執(zhí)行函數(shù)
 requestAnimationFrame( animate );
 }
 // 開始動畫，執(zhí)行函數(shù)
 animate();

2.3 放大

Zdog 需要設(shè)置大量數(shù)字。設(shè)置 zoom 將按比例縮放整個場景。

// Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo2=new Zdog.Illustration({
 // 用class選擇器設(shè)置畫布
 element: '.zdog-canvas2',
 // 將圖形放大4倍
 zoom: 4,
 });
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo2
 addTo: illo2,
 // 設(shè)置圓的直徑
 diameter: 80,
 // 設(shè)置畫筆寬度
 stroke: 20,
 // 設(shè)置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo2.updateRenderGraph();

2.4 拖動旋轉(zhuǎn)

通過在插圖上設(shè)置 dragRotate：true 來拖動來啟用旋轉(zhuǎn)。

let newcanvas2=new Zdog.Illustration({
 // 用id選擇器設(shè)置畫布
 element: '#zdog-canvas2',
 dragRotate: true,
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: newcanvas2,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas2,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate2() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉(zhuǎn)。值越大越快。
 newcanvas2.rotate.y +=0.03;
 newcanvas2.updateRenderGraph();
 // 動畫下一幀繼續(xù)執(zhí)行函數(shù)
 requestAnimationFrame( animate2 );
 }
 // 開始動畫，執(zhí)行函數(shù)
 animate2();

三、快速入手

下面我們將一步步的講解如何使用 Zdog 這個庫。我們采用的是最簡單的 CDN 引用方式，方便大家能夠快速體檢其魅力（復(fù)制代碼便可查看效果）。

Tips： 解釋說明均在代碼中以注釋方式展示，請大家注意閱讀。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>zdog</title>
 <style type="text/css">
 .zdog-canvas {
 /*給class="zdog-canvas"的畫布添加背景*/
 background: #FDB;
 }
</style>
</head>
<body>
<!--Zdog在<canvas>或<svg>元素上呈現(xiàn)。-->
<!--設(shè)置畫布1，及長寬-->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<!--設(shè)置畫布2，及長寬-->
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<!--引入zdog文件-->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
 // Illustration是頂級類，用于處理<canvas>或<svg>元素，保存場景中的所有形狀，并在元素中顯示這些形狀。
 let illo=new Zdog.Illustration({
 // 用class選擇器設(shè)置畫布
 element: '.zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 // 將形狀添加到illo
 addTo: illo,
 // 設(shè)置圓的直徑
 diameter: 80,
 // 設(shè)置畫筆寬度
 stroke: 20,
 // 設(shè)置圓的顏色
 color: '#636',
 });
?
 // 更新所有顯示屬性并渲染到illo畫布上
 illo.updateRenderGraph();
?
?
 let newcanvas=new Zdog.Illustration({
 // 用id選擇器設(shè)置畫布
 element: '#zdog-canvas',
 });
?
 // 畫圓
 new Zdog.Ellipse({
 addTo: newcanvas,
 diameter: 80,
 // 你可以理解z軸向前移動40個像素
 translate: { z: 40 },
 stroke: 20,
 color: '#636',
 });
?
 // 畫矩形
 new Zdog.Rect({
 addTo: newcanvas,
 width: 80,
 height: 80,
 // 你可以理解z軸向后移動40個像素
 translate: { z: -40 },
 stroke: 12,
 color: '#E62',
 fill: true,
 });
?
 function animate() {
 // 通過逐步增加xxx.rotate.y來改變場景的旋轉(zhuǎn)。值越大越快。
 newcanvas.rotate.y +=0.03;
 newcanvas.updateRenderGraph();
 // 動畫下一幀繼續(xù)執(zhí)行函數(shù)
 requestAnimationFrame( animate );
 }
 // 開始動畫，執(zhí)行函數(shù)
 animate();
</script>
</body>
</html>

第一個畫布是初始靜態(tài)演示，第二個畫布是動畫，第三個畫布是由第一個畫布放大，第四個畫布是通過拖動實現(xiàn)不規(guī)則旋轉(zhuǎn)。

四、總結(jié)

Zdog 可以設(shè)計和顯示簡單的 3D 模型而不需要很多開銷。這讓我們成為一個靈魂畫手簡單了很多，如果你想給自己的網(wǎng)站增添色彩，不妨試試 Zdog 吧。如果各位感興趣的話，下一期我將帶領(lǐng)大家成為一位代碼上的靈魂畫手！

五、參考資料

Zdog官方文檔^[1]

References

[1] Zdog官方文檔: https://zzz.dog/

『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發(fā)起者不再孤單。跟著我們的文章，你會發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項目如此簡單。歡迎留言聯(lián)系、加入我們，讓更多人愛上開源、貢獻開源～

家好，我是Echa。

最近有不少的粉絲老鐵們私信我為啥這幾天沒有創(chuàng)作新內(nèi)容了，實在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復(fù)了，奧密克戎BA.5其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現(xiàn)在小編就可以認認真真的繼續(xù)創(chuàng)作內(nèi)容了。同時也非常感謝大家默默的關(guān)心我小編身體狀況，非常謝謝。

創(chuàng)作不易，喜歡的老鐵們加個關(guān)注，點個贊，后面會持續(xù)更新干貨，速速收藏，謝謝！

說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學(xué)習(xí)一下 CSS 中單位！

1. 相對單位

相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：

字體相對單位，他們都是根據(jù)font-size來進行計算的。常見的字體相對單位有：em、rem、ex、ch；
視窗相對單位，他們都是根據(jù)視窗大小來決定的。常見的視窗相對單位有vw、vh、vmax、vmin。

下面就來看看這些常見的CSS單位。

（1）em 和 rem

em是最常見的相對長度單位，適合基于特定的字號進行排版。根據(jù)CSS的規(guī)定，1em 等于元素的font-size屬性的值。

em 是相對于父元素的字體大小進行計算的。如果當(dāng)前對行內(nèi)文本的字體尺寸未進行顯示設(shè)置，則相對于瀏覽器的默認字體尺寸。當(dāng)DOM元素嵌套加深時，并且同時給很多層級顯式的設(shè)置了font-size的值的單位是em，那么就需要層層計算，復(fù)雜度會很高。

當(dāng)然，上面的這個說法是不嚴謹的。來看一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            font-size: 20px;
        }
        .child {
            border: 1em solid ;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
           子元素
        </div>
    </div>
</body>
</html>

這里給父元素設(shè)置了字體大小為20px，然后給子元素的border寬度設(shè)置為1em，這時，子元素的border值為20px，確實是相對于父元素的字體大小設(shè)置的：

那如果我們給子元素的字體設(shè)置為30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

這時可以看到，子元素的邊框?qū)挾染褪?0px，它是相對自己大小進行計算的：

所以，可以得出結(jié)論：如果自身元素是沒有設(shè)置字體大小的，那么就會根據(jù)其父元素的字體大小作為參照去計算，如果元素本身已經(jīng)設(shè)置了字體，那么就會基于自身的字體大小進行計算。

em單位除了可以作用于 font-size之外，還可以運用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用還是比較復(fù)雜的，它可能會繼承任意一級父元素的字體大小。需要謹慎使用。

rem相對于em就簡單了很多，它是根據(jù)頁面的根元素（根元素）的字體大小來計算的。來對上面的例子進行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，邊框的長度變成了25px，它是根據(jù)根元素html的字體大小計算的：

如果沒有對根元素設(shè)定字號的話，font-size: 1rem的作用與font-size: initial相同。

使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時應(yīng)使用 em，何時應(yīng)使用 rem 呢？可以根據(jù)兩者的差異來進行選擇：

兩者在客戶端中計算出來的樣式都會以px的形式顯示；
rem是相對于根元素html的font-size計算，em 相對于元素的font-size計算；
當(dāng)需要根據(jù)瀏覽器的font-size設(shè)置縮放時，應(yīng)該使用 rem；
使用 em 應(yīng)該根據(jù)組件的font-size來定，而不是根元素的font-size來定；
rem 可以從瀏覽器字體設(shè)置中繼承 font-size 值， em 可能受任何繼承過來的父元素 font-size 的影響。

（2）ex 和 ch

ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。

ex 指的是所用字體中小寫字母 x 的高度。因此，如果兩個字體不一樣，那么 ex 的值是不一樣的。因為每種字體的小寫 x 的高度是不一樣的。
ch 和 ex 類似，不過它是基于數(shù)字 0 的寬度計算的。會隨著字體的變化而變化。而0 的寬度通常是對字體的平均字符寬度，它是一個估計值。由于 ch 是一個近似等寬的單元，所以在設(shè)置容器的寬度時很有用，比如一個容器想要顯示指定個數(shù)的字符串時，就可以使用這個單位。

（3）vw、vh、vmax 和 vmin

這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區(qū)域，移動端的視窗指的就是布局視窗。如果視窗大小發(fā)生了變化，那么這些值都會隨之變化。這四個單位指的是：

vw：視窗寬度的百分比；
vh：視窗高度的百分比；
vmax：較大的 vh 和 vw；
vmin：較小的 vh 和 vw。

假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關(guān)。

vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關(guān)。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。

這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創(chuàng)建全視區(qū)界面，例如移動設(shè)備的界面，因為元素是根據(jù)視區(qū)的尺寸而變化的，與文檔樹中的任何元素都沒有關(guān)系。

2. 絕對單位

在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應(yīng)了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點數(shù)）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關(guān)系如下：

1in=25.4mm=2.54cm=6pc=72pt=96px

（1）px

px 全稱為 Pixels，表示像素，它并不嚴格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據(jù)瀏覽器、操作系統(tǒng)或者硬件適當(dāng)縮放，在某些設(shè)備或者用戶的分辨率設(shè)置下也會發(fā)生變化，但是96px通常等于一個物理英寸的大小。

CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網(wǎng)頁的其它元素排列起來。

很多時候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因為像素單位相對的是設(shè)備像素。在同一個設(shè)備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設(shè)備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全稱為 Point，表示點。常用于軟件設(shè)計和排版印刷行業(yè)（筆者做的前端系統(tǒng)，最終的產(chǎn)物就是一個需要拿去印刷的PDF，所以會經(jīng)常用到這個單位）。當(dāng)使用這個單位時，無論顯示器的分辨率是多少，打印在紙上的結(jié)果都是一樣的。

如果單純?yōu)榱司W(wǎng)頁的顯示，建議就使用px像素單位，如果需要輸出印刷產(chǎn)品，就可以考慮使用pt。

（3）pc

pc 全程為 Picas，表示派卡。相當(dāng)于我國新四號鉛字的尺寸。派卡也是印刷的術(shù)語，1派卡等于12點。它和 px 的換算關(guān)系如下：

1pc=16px

（4）cm

cm 全稱為 Centimeters，表示厘米。它和 px 的換算關(guān)系如下：

1cm=37.8px

（5）mm

mm 全稱為 Millimeters，表示毫米。它和 px 的換算關(guān)系如下：

1mm=3.78px

（6）in

in 全稱為 Inches，表示英寸。它和 px 的換算關(guān)系如下：

1in=96px

3. 頻率單位

CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關(guān)系如下：

1kHz=1000Hz

通常情況下，頻率單位使用在聽或說級聯(lián)樣式表中。頻率可以被用來改變一個語音閱讀文本的音調(diào)。低頻率就是低音，高頻率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，當(dāng)數(shù)值為0時，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時，不要直接寫0。另外，這兩個單位是不區(qū)分大小寫的。

4. 時間單位

CSS中的時間單位有兩個：秒（s）和毫秒（ms）。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關(guān)系如下：

1s=1000ms

時間單位主要用于過度和動畫中，用于定義持續(xù)時間或延遲時間。下面兩種定義是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率單位

CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負值。這三個單位的換算關(guān)系如下：

1dppx=96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率單位主要用于媒體查詢等操作。

（1）dpi

dpi 全稱為 dots per inch，表示每英寸包含的點的數(shù)量。普通屏幕通常包含 72或96個點，大于 192dpi 的屏幕被稱為高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全稱為 dots per centimeter，表示每厘米包含的點的數(shù)量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全稱為 dots per pixel，表示每像素（px）包含點的數(shù)量。由于CSS px的固定比率為1:96，因此1dppx相當(dāng)于96dpi。它對應(yīng)于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度單位

CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關(guān)系如下：

90deg=100grad=0.25turn ≈ 1.570796326794897rad

一般這些角度單位用于元素的旋轉(zhuǎn)操作，包括2D旋轉(zhuǎn)、3D旋轉(zhuǎn)等。

當(dāng)旋轉(zhuǎn)值為正值時，元素會順時針旋轉(zhuǎn)；
當(dāng)旋轉(zhuǎn)值為負值時，元素會逆時針旋轉(zhuǎn)。

通常情況下，一個完整的旋轉(zhuǎn)就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時針旋轉(zhuǎn)420度（450deg）、逆時針旋轉(zhuǎn)270度（-270deg）、順時針旋轉(zhuǎn)90度（90deg）都是一樣的效果，都會歸為90deg。但是當(dāng)使用動畫時，這些角度值就非常重要了。

CSS的旋轉(zhuǎn)主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉(zhuǎn)的角度即可。

除了旋轉(zhuǎn)會使用角度之外，線性漸變也會經(jīng)常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全稱為 Degress，表示度，一個圓總共360度。

transform: rotate(2deg);

（2）grad

grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。

transform: rotate(2grad);

（4）rad

rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全稱為 Turns，表示圈（轉(zhuǎn)），一個圓總共一圈（轉(zhuǎn)）。

transform:rotate(.5turn);

7. 百分比單位

百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。

下面來看看常見場景中的百分比單位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時，參照物不盡相同：

width、max-width、min-width：值為百分比時，其相對于包含塊的 width 進行計算；
height、max-height、min-height：值為百分比時，其相對于包含塊的 height 進行計算；
padding、margin：值為百分比時，如果是水平的值，就是相對于包含塊的 width 進行計算；如果是垂直的值，就是相對于包含塊的 height 進行計算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時，參照物不盡相同：

font-size：根據(jù)父元素的font-size 進行計算；
line-height：根據(jù)font-size進行計算；
vertical-align：根據(jù)line-height進行計算；
text-indent：如果是水平的，則根據(jù)width進行計算，如果是垂直的，則根據(jù) height 進行計算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

如果元素為靜態(tài)（ static ）或相對定位（ relative ），包含塊一般是其父容器；
如果元素為絕對定位（ absolute ），包含塊應(yīng)該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；
如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設(shè)置百分比。

translateX() 根據(jù)容器的 width 計算
translateY() 根據(jù)容器的 height 計算
transform-origin 中橫坐標（ x ）相對于容器的 width 計算；縱坐標（ y ）相對于容器的 height 計算

注意，在 translate 還有一個 z 軸的函數(shù) translateZ() 。它是不接受百分比為單位的值。

言

又到了一年一度的“金三銀四的季節(jié)了”。不過恐怕大家都有感覺，當(dāng)下，正面臨著近幾年來的最嚴重的互聯(lián)網(wǎng)寒冬，因此今天的“金三銀四”肯定又是一場更為慘烈的江湖廝殺。

為了提升在廝殺中的“生存率”，讓我們從面經(jīng)開始如果吧。這將是一個長篇系列。這篇文章讓我們先從CSS開始。

CSS

1. 盒模型

頁面渲染時，dom 元素所采用的布局模型。可通過box-sizing進行設(shè)置。根據(jù)計算寬高的區(qū)域可分為：

content-box (W3C 標準盒模型)
border-box (IE 盒模型)
padding-box
margin-box

2. BFC

塊級格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。

IE下為 Layout，可通過 zoom:1 觸發(fā)

觸發(fā)條件:
根元素
positon: absolute/fixed
display: inline-block / table
float 元素
ovevflow !==visible
規(guī)則:
屬于同一個 BFC 的兩個相鄰 Box 垂直排列
屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發(fā)生重疊
BFC 中子元素不會超出他的包含塊
BFC 的區(qū)域不會與 float 的元素區(qū)域重疊
計算 BFC 的高度時，浮動子元素也參與計算
文字層不會被浮動層覆蓋，環(huán)繞于周圍
應(yīng)用:
阻止margin重疊
可以包含浮動元素 —— 清除內(nèi)部浮動(清除浮動的原理是兩個div都位于同一個 BFC 區(qū)域之中)
自適應(yīng)兩欄布局
可以阻止元素被浮動元素覆蓋

3.層疊上下文

元素提升為一個比較特殊的圖層，在三維空間中 (z軸) 高出普通元素一等。

觸發(fā)條件
根層疊上下文(html)
position
css3屬性
flex
transform
opacity
filter
will-change
-webkit-overflow-scrolling
層疊等級：層疊上下文在z軸上的排序
在同一層疊上下文中，層疊等級才有意義
z-index的優(yōu)先級最高(從高往低排，順序如下：)
z-index正直
z-index 0 / auto
行內(nèi)元素
浮動元素
塊級元素
z-index為負
background / border

4. 居中布局

水平居中
行內(nèi)元素: text-align: center
塊級元素: margin: 0 auto
absolute + transform
flex + justify-content: center
垂直居中
line-height: height
absolute + transform
flex + align-items: center
table
水平垂直居中
absolute + transform
flex + justify-content + align-items

5. 選擇器優(yōu)先級

!important > 行內(nèi)樣式 > #id > .class > tag > * > 繼承 > 默認
選擇器從右往左解析

6.去除浮動影響，防止父級高度塌陷

通過增加尾元素清除浮動
:after /
: clear: both
創(chuàng)建父級 BFC
父級設(shè)置高度

7.link 與 @import 的區(qū)別

link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css
當(dāng)解析到link時，頁面會同步加載所引的 css，而@import所引用的 css 會等到頁面加載完才被加載
@import需要 IE5 以上才能使用
link可以使用 js 動態(tài)引入，@import不行

8. CSS預(yù)處理器(Sass/Less/Postcss)

CSS預(yù)處理器的原理: 是將類 CSS 語言通過 Webpack 編譯轉(zhuǎn)成瀏覽器可讀的真正 CSS。在這層編譯之上，便可以賦予 CSS 更多更強大的功能，常用功能:

嵌套
變量
循環(huán)語句
條件語句
自動前綴
單位轉(zhuǎn)換
mixin復(fù)用

面試中一般不會重點考察該點，一般介紹下自己在實戰(zhàn)項目中的經(jīng)驗即可~

9.CSS動畫

transition: 過渡動畫
transition-property: 屬性
transition-duration: 間隔
transition-timing-function: 曲線
transition-delay: 延遲
常用鉤子: transitionend
animation / keyframes
animation-name: 動畫名稱，對應(yīng)@keyframes
animation-duration: 間隔
animation-timing-function: 曲線
animation-delay: 延遲
animation-iteration-count: 次數(shù)
infinite: 循環(huán)動畫
animation-direction: 方向
alternate: 反向播放
animation-fill-mode: 靜止模式
forwards: 停止時，保留最后一幀
backwards: 停止時，回到第一幀
both: 同時運用 forwards / backwards
常用鉤子: animationend
動畫屬性: 盡量使用動畫屬性進行動畫，能擁有較好的性能表現(xiàn)
translate
scale
rotate
skew
opacity
color

總結(jié)

通常，CSS 并不是重點的考察領(lǐng)域，但這其實是由于現(xiàn)在國內(nèi)業(yè)界對 CSS 的專注不夠?qū)е碌模嬲úＷ⒂?CSS 的團隊和人才并不多。因此如果能在 CSS 領(lǐng)域有自己的見解和經(jīng)驗，反而會為相當(dāng)?shù)募臃趾兔摲f而出。

在線咨詢

上一篇：flask web服務(wù)器：運行在云服務(wù)器上的最簡單的
下一篇：精美大氣網(wǎng)址導(dǎo)航網(wǎng)站站長導(dǎo)航網(wǎng)址導(dǎo)航分類導(dǎo)航站自適應(yīng)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商