這兩天總結了一下CSS3中的基本知識點，沒有做到很全面，因為之前也記過一些筆記，就沒有再整理成文件。這裡我會把之前的筆記拍照貼出來，基本都是一些很零碎的小知識點，需要大家平時多敲程式碼，多翻看筆記，以加深記憶，從而對CSS熟練運用。

本文件參考了以下網站，如詳細瞭解，請移步：

• CSS3邊框

邊框屬性：

border-radius：建立圓角邊框

box-Shadow：附加一個或者多個下拉框的陰影

border-image（不支援IE）：使用影象建立一個邊框

• CSS3圓角

可以使用CSS3 圓角製作器來製作一個css3圓角，可以直接生成程式碼。

指定border-radius的每個圓角：

如果只指定一個值，則生成四個圓角；若在每個角上指定，則使用如下規則：

四個值：四個值分別指定左上角、右上角、右下角、左下角。

三個值：第一個值為左上角，第二個值為右上角和左下角，第三個值為右下角。

兩個值：第一個值為左上角和右下角，第二個值為右上角和左下角。

一個值：四個圓角值相同。

建立橢圓邊角：

border-radius： 50px/15px;

border-radius: 50%;

圓角屬性：

border-radius	所有四個邊角屬性的縮寫
border-top-left-radius	左上角的弧度
border-top-right-radius	右上角的弧度
border-bottom-left-radius	左下角的弧度
border-bottom-right-radius	右下角的弧度

• CSS3背景

四種背景屬性：

background-image：新增背景圖片。不同的背景影象和影象用逗號隔開。

background-size：指定背景影象的大小，可指定畫素或者百分比的大小，是相對於父元素的寬度和高度的百分比的大小。

background-origin

：指定了背景影象的位置區域

background-clip：背景裁剪屬性是從指定位置開始繪製。

• CSS3漸變

漸變可以讓我們在兩個或者多個顏色之間顯示平穩的過渡。

兩種型別的漸變：

LinearGradients：線性漸變-向下/向上/向左/向右/對角方向

RadialGradients：徑向漸變，由它們的中心定義

線性漸變：

語法：background：linear-gradient(direction, color-stop1, color-stop2, …);

線性漸變預設情況是從上到下。

從左到右的線性漸變：

#grad {

background: -webkit-linear-gradient(left, red, blue);

background: -o-liner-gradient(right, red, blue);

background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red, blue);/*標準語法*/

}

從左上角開始到右下角的漸變：

設定方向為：left top/bottom right/to bottom right(標準語法下)

使用角度對方向進行設定：

這裡的角度是指水平線和漸變線之間的角度。So 0deg將建立一個從下到上的漸變，90deg將建立一個從左到右的漸變。

使用透明度：

支援透明度，用於建立減弱變淡的效果。

為了新增透明度，使用rgba()函式來定義顏色結點。rgba()函式中的最後一個引數可以是從0到1的值，它定義了顏色的透明度：0表示完全透明，1表示完全不透明。

重複的線性漸變：

repeating-linear-gradient()函式用於重複的線性漸變。

徑向漸變：

我們可以指定漸變的中心、形狀（圓形或者橢圓形）、大小，預設情況下，漸變的中心是center（表示在中心點），漸變的形狀是ellipse（表示橢圓形），漸變的大小是farthest-corner（表示到最遠的角落）。

語法:background: radial-gradient(center, shape size, start-color, …, last-color);

顏色結點分佈不均勻的徑向漸變：

#grad{

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

}

Size引數定義了漸變的大小，可以是以下四個值：

closest-side/farthest-side/closest-corner/farthest-corner

重複的徑向漸變：

Reperting-radial-gradient()函式用於重複徑向漸變。

• CSS3文字效果

包含屬性：

text-shadow：適用於文字陰影，可以指定是水平陰影還是垂直陰影、模糊的距離以及陰影的顏色。

box-shadow：適用於盒子陰影。同上。可以在::after和::before兩個偽元素中新增陰影效果。

text-overflow：文字溢位屬性指定應向用戶如何顯示溢位內容

有兩個屬性：ellipsis（以省略號的形式隱藏內容）和clip（直接截斷內容）

word-wrap：強制換行，但是單詞中間不換行

word-break：單詞可進行拆分然後換行

• CSS3字型

@font-face規則，若使用，首先定義字型的名稱，然後指向該文字字型。

通過font-family屬性來引用字型的名稱。

列舉出所有的字型描述和裡面的@font-face規則定義

描述符	值	描述
font-family	name	必需，規定字型的名稱。
src	URL	必需，定義字型檔案的URL
font-strench	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可選，定義如何拉伸字型，預設值是nomal
font-style	nomal Italic oblique	可選，定義字型的樣式
font-weight	nomal bold 100 200 ...... 900	可選，定義字型的粗細
unicode-range	unicode-range	可選，定義字型支援的UNICODE字元範圍

• CSS3 2D轉換

2D變換方法：

translate()：平移

rotate()：在一個給定度數順時針旋轉的元素

scale()

skew()

matrix()

• CSS3過渡

為了新增某種效果可以從一個樣式轉變到另一個的時候，無需使用flash動畫或JavaScript，只需要滑鼠移動到上面就可以。

我們要實現這樣的效果，必須規定兩項內容：

指定要新增效果的CSS屬性和效果的持續時間

所有的過渡屬性：

transition：簡寫屬性，用於在一個屬性中設定四個過渡屬性

transition-property：規定應用過渡的CSS屬性的名稱

transition-duration：定義過渡效果花費的時間，預設是0

transition-timing-function：規定過渡效果的時間曲線，預設是‘ease‘

transition-delay：規定過渡時間何時開始，預設是0

div{

transition-property: width;

transition-duration: 1s;

transition-timing-function: linear;

transition-delay: 2s;

}//等價於div{ transition: width 1s linear 2s; }

• CSS3動畫

建立動畫，可以取代許多網頁動畫影象，Flash動畫和JavaScript.

C[email protected]規則

該規則是建立動畫。@keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

當@keyframes建立動畫時，把它繫結到一個選擇器，否則不會有任何效果。

指定至少兩個CSS3的動畫屬性綁定向一個選擇器：規定動畫的名稱和動畫的時長。

div {

width: 100px;

height: 100px;

background: red;

animation: myfirst 5s;

}

@keyframes myfirst {

from { background: red;}

to { backgroung: yellow;}

}

我們可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%。0%是動畫的開始，100%是動畫的完成。

所有的動畫屬性：

• CSS3多列

多列屬性：

column-count：指定元素的列數應分為幾列。

div {

-moz-column-count:3;/*Firefox*/

}

column-gap：指定的列之間的差距

column-rule：設定列之間的寬度、樣式和顏色

column-rule-color：指定的列之間顏色規則

column-rule-style：指定的列之間的樣式規則

column-rule-width：指定的列之間的寬度規則

column-width：指定列的寬度

column-span：指定一個元素應該橫跨多少列

columns：縮寫屬性設定列寬和列數

column-fill：指定如何填充列

• CSS3使用者介面

新增加了一些新的使用者介面特性來調整元素尺寸、框尺寸和外邊框。

使用者介面屬性：

resize：指定一個元素是否應該由使用者去調整大小

box-sizing：允許以確切的方式定義適應某個區域的具體內容

outline-offset：對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。輪廓與邊框不同，輪廓不佔用空間，而且可能是非矩形。

• CSS3盒子模型

所有HTML元素可以看作盒子。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，包括：邊距、邊框、填充和實際內容。

不同部分的說明：

Margin：外邊距，清除邊框外的區域，外邊距是透明的。

Border：邊框，圍繞在內邊距和內容外的邊框。

Padding：內邊距，清除內容周圍的區域，內邊距是透明的。

Content：盒子的內容，顯示文字和影象。

總元素的寬度 = 寬度 + 左填充（padding） + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

兩種盒模型的比較：

盒模型分為W3C的標準盒模型和IE盒模型。

標準盒模型的寬度就是content的寬度，高度是content的高度，而IE盒模型的寬度是content+padding+border的總和。

切換盒模型的方法：設定box-sizing屬性。

box-sizing: content-box //W3C盒子模型

box-sizing:border-box //IE盒子模型

• CSS3彈性盒子（Flex Box）

說明：彈性盒子模型這一重點知識阮一峰老師講的很詳細，圖文結合很容易理解，文章開頭我附加了阮一峰老師這部分內容的連結。除了一些基本的語法之外，還有很多實用的例項。一定要掌握這一部分的知識點，面試中會經常問到。

是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。

彈性盒子由彈性容器和彈性子元素組成。彈性容器通過設定display屬性的值為flex或inline-flex（行內元素設定為Flex佈局）將其定義為彈性容器。

注：設為了Flex佈局以後，子元素的float、clear和virtical-align屬性將失效。

彈性容器內包含一個或多個彈性子元素。

注意：彈性容器外及彈性子元素內是正常渲染的，彈性盒子只定義了彈性元素的如何在彈性容器內佈局。彈性子元素通常在彈性盒子內一行顯示，預設情況每個容器只有一行。

修改排列方式：rtl(right to left)

body { direction: rtl; }

彈性容器上的屬性共有6個：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

①flex-direcion：決定了主軸的方向（即彈性子元素在父容器中的排列方向）。

語法：flex-direction: row | row-reverse | column | column-reverse

row：橫向從左到右排列。預設的排列方式。

row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面）

column：縱向排列。

column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

②flex-wrap：預設情況下，專案都排在一條線上，該屬性定義如果一條軸線排不下，如何換行。

語法：flex-wrap: nowrap | wrap | wrap-reverse

③flex-flow：該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值是row nowrap。

④justify-content：定義了專案在主軸上的對齊方式，把彈性項沿著彈性容器的主軸線對齊。

語法：justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，專案之間的間隔都是相等的

space-around：每個專案兩側的間隔相等，所以專案之間的間隔比專案與邊框的間隔大一倍。

⑤align-items：定義專案在交叉軸上如何對齊。

語法：align-items: flex-start | flex-end | center | baseline | strench

baseline：專案的第一行文字的基線對齊

strench（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

⑥align-content：定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

語法：align-content: flex-start | flex-end | center | space-between | space-around | strench(預設值)

彈性子元素上的6個屬性：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

①order :定義彈性子元素的排列順序。數值越小，排列越靠前，預設為0。

語法：order: <integer>

②flex-grow:定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

語法：flex-grow: <number>

③flex-shrink:定義專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。負值對該屬性無效。

語法：flex-shrink: <number>

④flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間。預設值為auto

⑤flex屬性是flex-grow、flex-shrink、flex-basis的簡寫，預設值是 0 1 auto。建議優先使用這個屬性。該屬性有兩個快捷值： auto(1 1 auto) 和none(0 0 auto)。

⑥align-self：允許單個彈性子元素有與其他子元素不一樣的對齊方式。可覆蓋align-items屬性，預設值為auto，表示繼承彈性容器的align-items屬性，如果沒有父元素，則等同於strench。

• CSS3多媒體查詢

CSS中我們可以根據不同的媒體型別（包括顯示器、便攜裝置、電視機等）來設定不同的樣式規則。

在CSS3中根據設定自適應顯示。

媒體查詢可用於檢測很多事情：

Viewport（檢視）的寬度和高度

裝置的寬度和高度

朝向（智慧手機橫屏，豎屏）

解析度