前端CSS3筆記

第1章CSS3簡介

如同人類的的進化一樣，CSS3是CSS2的“進化”版本，在CSS2基礎上，增強或新增了許多特性， 彌補了CSS2的衆多不足之處，使得Web開發變得更為高效和便捷。

1.1   CSS3的現狀

1、浏覽器支援程度差，需要添加私有字首

2、移動端支援優于PC端

3、不斷改進中

4、應用相對廣泛

1.2   如何對待

1、堅持漸進增強原則

2、考慮使用者群體

3、遵照産品的方案

4、聽Boss的

第2章準備工作

2.1   統一環境

由于CSS3相容性問題的普遍存在，為了避免因相容性帶來的幹擾，我們約定統一的環境，以保證學習的效率，在最後會單獨說明相容性的問題。

1、Chrome浏覽器 version 46+

2、Firefox浏覽器 firefox 42+

3、PhotoShop CS6（建議）

2.1   如何使用手冊

學會使用工具，可以讓我們事半功倍。

[]       表示全部可選項

||        表示或者

|         表示多選一

？      表示0個或者1個

*        表示0個或者多個

{}            表示範圍

第3章基礎知識

3.1   選擇器

CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器相容。

3.1.1    屬性選擇器

其特點是通過屬性來選擇元素，具體有以下7種形式：

1、E[attr] 表示存在attr屬性即可；

2、E[attr=val] 表示屬性值完全等于val；

3、E[attr*=val] 表示的屬性值裡包含val字元并且在“任意”位置；

4、E[attr^=val] 表示的屬性值裡包含val字元并且在“開始”位置；

5、E[attr$=val] 表示的屬性值裡包含val字元并且在“結束”位置；

3.1.2    僞類選擇器

除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的僞類選擇器。

1、以某元素相對于其父元素或兄弟元素的位置來擷取無素的結構僞類。

重點了解通過E來确定元素的父元素。

E:first-child第一個子元素

E:last-child最後一個子元素

E:nth-child(n) 第n個子元素，計算方法是E元素的全部兄弟元素；

E:nth-last-child(n) 同E:nth-child(n) 相似，隻是倒着計算；

n遵循線性變化，其取值0、1、2、3、4、... 但是當n<=0時，選取無效。

n可是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；

E:empty 選中沒有任何子節點的E元素；（使用不是非常廣泛）

2、目标僞類

E:target 結合錨點進行使用，處于目前錨點的元素會被選中；

3.1.3    僞元素選擇器

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）；

E::first-line 文本第一行；

重點：E::before、E::after

是一個行内元素，需要轉換成塊元素

E:after、E:before 在舊版本裡是僞類，在新版本裡是僞元素，新版本下E:after、E:before會被自動識别為E::after、E::before，按僞元素來對待，這樣做的目的是用來做相容處理。

E:after、E:before後面的練習中會反複用到，目前隻需要有個大緻了解

E::selection 可改變選中文本的樣式；

":" 與 "::" 差別在于區分僞類和僞元素

3.2   顔色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設定顔色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。

Red、Green、Blue、Alpha即RGBA

Hue、Saturation、Lightness、Alpha即HSLA

R、G、B 取值範圍0~255

H 色調 取值範圍0~360，0/360表示紅色、120表示綠色、240表示藍色

S 飽和度 取值範圍0%~100%

L 亮度 取值範圍0%~100%

A 透明度 取值範圍0~1

關于透明度：

1、opacity隻能針對整個盒子設定透明度，子盒子及内容會繼承父盒子的透明度；

2 、transparent 不可調節透明度，始終完全透明

RGBA、HSLA可應用于所有使用顔色的地方。

3.3   文本

text-shadow，可分别設定偏移量、模糊度、顔色（可設透明度）。

1、水準偏移量 正值向右 負值向左；

2、垂直偏移量 正值向下 負值向上；

3、模糊度是不能為負值；

3.4   邊框

其中邊框圓角、邊框陰影屬性，應用十分廣泛，相容性也相對較好，具有符合漸進增強原則的特征，我們需要重點掌握。

3.4.1    邊框圓角

border-radius

圓角處理時，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。如下圖

可分别設定長、短半徑，以“/”進行分隔，遵循“1，2，3，4”規則，“/”前面的1~4個用來設定橫軸半徑（分别對應橫軸1、2、3、4位置 ），“/”後面1~4個參數用來設定縱軸半徑（分别對應縱軸1、2、3、4位置 ）

3.4.2    邊框陰影

box-shadow

1、水準偏移量 正值向右 負值向左；

2、垂直偏移量 正值向下 負值向上；

3、模糊度是不能為負值；

4、inset可以設定内陰影；

設定邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局。

可以設定多重邊框陰影，實作更好的效果，增強立體感。

3.4.3    邊框圖檔

border-image

設定的圖檔将會被“切割”成九宮格形式，然後進行設定。如下圖

“切割”完成後生成虛拟的9塊圖形，然後按對應位置設定背景，

其中四個角位置、形狀保持不變，中心位置水準垂直兩個方向平鋪。如下圖

1、round和repeat之間的差別

round 會自動調整尺寸，完整顯示邊框圖檔。

repeat 單純平鋪多餘部分，會被“裁切”而不能完整顯示。

2、更改裁切尺寸

background-slice: 34 36 27 27 分别設定裁切如下圖

關于邊框圖檔重點了解9宮格的裁切及平鋪方式，實際開發中應用不廣泛，但是如能靈活動用會給我們帶來不少便利。

3.5   盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: border-box  計算方式為width = border + padding + content

2、box-sizing: content-box  計算方式為width = content

3.6   背景

背景在CSS3中也得到很大程度的增強，比如背景圖檔尺寸、背景裁切區域、背景定位參照點、多重背景等。

1、background-size設定背景圖檔的尺寸

cover會自動調整縮放比例，保證圖檔始終填充滿背景區域，如有溢出部分則會被隐藏。

contain會自動調整縮放比例，保證圖檔始終完整顯示在背景區域。

也可以使用長度機關或百分比

2、background-origin設定背景定位的原點

border-box以邊框做為參考原點；

padding-box以内邊距做為參考原點；

content-box以内容區做為參考點；

3、background-clip設定背景區域裁切

border-box裁切邊框以内為背景區域；

padding-box裁切内邊距以内為背景區域；

content-box裁切内容區做為背景區域；

4、以逗号分隔可以設定多背景，可用于自适應局

背景圖檔尺寸在實際開發中應用十分廣泛。

3.7   漸變

漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實作許多炫麗的效果，有效的減少圖檔的使用數量，并且具有很強的适應性和可擴充性。

可分為線性漸變、徑向漸變

3.7.1    線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向産生漸變效果。

上圖是從黃色漸變到綠色

1、必要的元素：

a、方向

b、起始顔色

c、終止色；

2、關于方向如下圖

3.7.2    徑向漸變

radial-gradient徑向漸變指從一個中心點開始沿着四周産生漸變效果

1、必要的元素：

a、輻射範圍即圓半徑

b、中心點 即圓的中心

c、漸變起始色

d、漸變終止色

2、關于中心點：中心位置參照的是盒子的左上角

3、關于輻射範圍：其半徑可以不等，即可以是橢圓

3.8   過渡

過渡是CSS3中具有颠覆性的特征之一，可以實作元素不同狀态間的平滑過渡（補間動畫），經常用來制作動畫效果。

幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

補間動畫：自動完成從起始狀态到終止狀态的的過渡。

關于補間動畫更多學習可檢視http://mux.alimama.com/posts/1009

特點：目前元素隻要有“屬性”發生變化時，可以平滑的進行過渡。

transition-property設定過渡屬性

transition-duration設定過渡時間

transition-timing-function設定過渡速度

transition-delay設定過渡延時

以上四屬性重在了解

3.9   2D轉換

轉換是CSS3中具有颠覆性的特征之一，可以實作元素的位移、旋轉、變形、縮放，甚至支援矩陣方式，配合即将學習的過渡和動畫知識，可以取代大量之前隻能靠Flash才可以實作的效果。

1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；

a) 移動位置相當于自身原來位置

b) y軸正方向朝下

2、縮放 scale(x, y) 可以對元素進行水準和垂直方向的縮放，x、y的取值可為小數；

4、旋轉 rotate(deg) 可以對元素進行旋轉，正值為順時針，負值為逆時針；

5、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜

3.10     3D轉換

1、3D坐标軸

用X、Y、Z分别表示空間的3個次元，三條軸互相垂直。如下圖

2、左手坐标系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐标系，拇指、食指和中指分别代表X、Y、Z軸的正方向。如下圖

3、左手法則

左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其餘手指卷曲的方向。

3.11     動畫

動畫是CSS3中具有颠覆性的特征之一，可通過設定多個節點來精确控制一個或一組動畫，常用來實作複雜的動畫效果。

1、必要元素：

a、通過@keyframes指定動畫序列；

b、通過百分比将動畫序列分割成多個節點；

c、在各節點中分别定義各屬性

d、通過animation将動畫應用于相應元素；

2、關鍵屬性

a、animation-name設定動畫序列名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度，linear、ease等

e、animation-play-state動畫播放狀态，play、paused等

f、animation-direction動畫逆播，alternate等

g、animation-fill-mode動畫執行完畢後狀态，forwards、backwards等

h、animation-iteration-count動畫執行次數，infinite等

前端面試題https://github.com/paddingme/Front-end-Web-Development-Interview-Question

騰訊動畫庫

http://isux.tencent.com/css3/tools.html

3.12     伸縮布局

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，适應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

如下圖，學習新的概念：

主軸：Flex容器的主軸主要用來配置Flex項目，預設是水準方向

側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的

方向：預設主軸從左向右，側軸預設從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換。

1、必要元素：

a、指定一個盒子為伸縮盒子 display: flex

b、設定屬性來調整此盒的子元素的布局方式 例如 flex-direction

c、明确主側軸及方向

d、可互換主側軸，也可改變方向

2、各屬性詳解

a、flex-direction調整主軸方向（預設為水準方向）

b、justify-content調整主軸對齊

c、align-items調整側軸對齊

d、flex-wrap控制是否換行

e、align-content堆棧（由flex-wrap産生的獨立行）對齊

f、flex-flow是flex-direction、flex-wrap的簡寫形式

g、flex控制子項目的縮放比例

h、order控制子項目的排列順序

此知識點重在了解，要明确找出主軸、側軸、方向，各屬性對應的屬性值可參考示例源碼

3.13     多列布局

類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。

了解即可，實際意義不大。

第4章Web字型

開發人員可以為自已的網頁指定特殊的字型，無需考慮使用者電腦上是否安裝了此特殊字型，從此把特殊字型處理成圖檔的時代便成為了過去。

支援程度比較好，甚至IE低版本浏覽器也能支援。

4.1   字型格式

不同浏覽器所支援的字型格式是不一樣的，我們有必要了解一下有關字型格式的知識。

1、TureTpe(.ttf)格式

.ttf字型是Windows和Mac的最常見的字型，是一種RAW格式，支援這種字型的浏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字型被認為是一種原始的字型格式，其内置在TureType的基礎上，支援這種字型的浏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字型是Web字型中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支援中繼資料包的分離，支援這種字型的浏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字型是IE專用字型，可以從TrueType建立此格式字型，支援這種字型的浏覽器有IE4+；

5、SVG(.svg)格式

.svg字型是基于SVG字型渲染的一種格式，支援這種字型的浏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知識後，我們就需要為不同的浏覽器準備不同格式的字型，通常我們會通過字型生成工具幫我們生成各種格式的字型，是以無需過于在意字型格式間的差別差異。

推薦http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字型

4.2   字型圖示

其實我們可以把文字了解成是一種特殊形狀的圖檔，反之我們是不是也可以把圖檔制作成字型呢？

答案是肯定的。

常見的是把網頁常用的一些小的圖示，借助工具幫我們生成一個字型包，然後就可以像使用文字一樣使用圖示了。

優點：

1、将所有圖示打包成字型庫，減少請求；

2、具有矢量性，可保證清晰度；

3、使用靈活，便于維護；

Font Awesome 使用介紹

http://fontawesome.dashgame.com/

定制自已的字型圖示庫

http://iconfont.cn/

https://icomoon.io/

SVG素材

http://www.iconsvg.com/

第5章相容性

通過http://caniuse.com/ 可查詢CSS3各特性的支援程度，一般相容性處理的常見方法是為屬性添加私有字首，如不能解決，應避免使用，無需刻意去處理CSS3的相容性問題。

第6章進階應用

轉載于:https://www.cnblogs.com/famensaodiseng/p/7029161.html