目錄

CSS3

結構(位置)偽類選擇器（CSS3)

目標偽類選擇器(CSS3)

屬性選擇器(CSS3)

偽元素選擇器（CSS3,重要)

CSS3盒模型（重要）

顏色模式

盒子陰影（CSS3）

文本陰影text-shadow

漸變(放在background里用)

transition過渡效果屬性（重點）

transform屬性（重點）

animation動畫（關鍵幀動畫，重點）

web字體（常用）

多列布局（用于文本）

伸縮布局（重點）

1. display: flex;屬性（伸縮布局中必設）

2. justify-content屬性（重要）

3. flex-flow 屬性（flex-direction 和 flex-wrap 屬性的復合屬性）

4. flex-grow 屬性（擴展規則）

5. flex-shrink 屬性（收縮規則）

6. flew屬性（flex-grow、flex-shrink和flex-basis的簡寫屬性）

align-items屬性

align-self 屬性

---

CSS3

css3新增的屬性大多數要添加前綴以達兼容。

瀏覽器前綴瀏覽器

-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

結構(位置)偽類選擇器（CSS3)

• +：獲取當前元素的相鄰的滿足條件的元素。
• ~：獲取當前元素滿足條件的兄弟元素。
• :first-child :選取屬于其父元素的首個子元素的指定選擇器
• :last-child :選取屬于其父元素的最后一個子元素的指定選擇器
• :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的類型
• :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。
  n 可以是數字、關鍵詞或公式,even偶數，odd奇數
• :first-of-type ：選擇屬于其父元素的首個

  元素的每個

  元素。

• :last-of-type ：選擇屬于其父元素的最后

  元素的每個

  元素。

• :nth-of-type ：選擇屬于其父元素第n個

  元素的每個

  元素。

目標偽類選擇器(CSS3)

:target目標偽類選擇器 :選擇器可用于選取當前活動的目標元素

屬性選擇器(CSS3)

選取標簽帶有某些特殊屬性的選擇器 我們成為屬性選擇器

/* 獲取到 擁有 該屬性的元素 */ div[class] {/* 查找所有擁有class屬性的div */ } div[class^=font] { /* class^=font 表示 font 開始位置就行了 */color: pink; } div[class$=footer] { /* class$=footer 表示 footer 結束位置就行了 */color: skyblue; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */color: green; }

?

偽元素選擇器（CSS3,重要)

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

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

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

E::before和E::after
在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用。

div::befor {content:"開始"; } div::after {content:"結束"; }

?

E:after、E:before 在舊版本里是偽元素，CSS3的規范里**“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理。
":" 與 “::” 區別在于區分偽類和偽元素
之所以被稱為偽元素，是因為他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現，實際上是css樣式展現的行為，因此被稱為偽元素。是偽元素在html代碼機構中的展現，可以看出無法偽元素的結構無法審查。
注意:
偽元素:before和:after添加的內容默認是inline元素**；這個兩個偽元素的content屬性，表示偽元素的內容,設置:before和:after時必須設置其content屬性，否則偽元素就不起作用。

CSS3盒模型（重要）

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況：
1、**box-sizing: content-box ** 盒子大小為 width + padding + border ，content-box:此值為其默認值，其讓元素維持W3C的標準Box Mode。
2、box-sizing: border-box 盒子大小為 width ，就是說 padding 和 border 是包含到width里面的。
注：上面的標注的width指的是CSS屬性里設置的width: length，content的值是會自動調整的。

顏色模式

RGBA

• R紅色，G綠色，B藍色，A透明度

HSLA

• H色調色相，0或360表示紅色，120表示綠色，240表示藍色，取值為0~360。
• S飽和度，取值0~100%。
• L亮度，取值0~100%。
• A透明度，取值0~1。

盒子陰影（CSS3）

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/外陰影;
（前兩個必寫）

文本陰影text-shadow

text-shadow：x軸 y軸 模糊半徑 顏色;
模糊半徑和顏色為可選項。可添加多層。

漸變(放在background里用)

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

linear-gradient ([[ | to <side-or-corner],] ? , [,…]);

angle漸變方向：

• to left 從右到左，相當于279deg
• to right 從左到右，相當于90deg
• to top 從下到上，相當于0deg
• to bottom 從上到下，相當于180deg（默認）

= <color起止顏色>[<length用長度指定起止色位置> | <percentage用百分比指定>]?

background:linear-gradient(to left,red 50px,blue);

?

徑向漸變radial-gradient從一個中心店開始沿著四周產生漸變效果。

radial-gradient ([ [ || ] [at ] ?, | at ]?, [,…]);

shape漸變的形狀：

• ellipse表示橢圓形（默認）
• circle表示圓形

size大小:

• closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
• closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角
• farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
• farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

at 坐標：

默認正中心，可以是top bottom left right，也可以是length用長度指定起止位置和percentage用百分比。

= <color起止顏色>[<length用長度指定起止色位置> | <percentage用百分比指定>]?

background: radial-gradient(circle closest-side at 50px 50px, red,blue);

?

重復漸變
repeating-linear-gradient與線性漸變語法一樣。
repeating-radial-gradient與徑向漸變語法一樣，只不過只要寫要重復的部分即可。

background: repeating-linear-gradient(to bottom, #fff 0%, #fff 10%, #000 10%, #000 20%); background: repeating-radial-gradient(circle at center, #fff 0%, #fff 10%, #000 10%, #000 20%);

?

transition過渡效果屬性（重點）

transition: property duration timing-function delay;
只能為有具體值的屬性添加，從某個值到某個數值。過渡完會恢復原來的樣子。
transiton屬一個簡寫屬性，有以下取值（可單設置，可多寫設置多過渡）：

值描述

transition-property	規定設置過渡效果的 CSS 屬性的名稱。（必設）all代表所有樣式（少用）
transition-duration	規定完成過渡效果需要多少秒或毫秒。（必設）
transition-timing-function	規定速度效果的速度曲線函數。
transition-delay	定義過渡效果何時開始。

transition-timing-function的取值描述

linear	規定以相同速度開始至結束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。默認
ease-in	規定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規定以慢速結束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規定以慢速開始和結束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。

transform屬性（重點）

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。參照點為元素左上角，個別除外。轉換完會恢復原來的樣子。
3d旋轉規律：左手法則，大拇指為當前坐標軸的下方向，手指環繞的方向就是正方向。
可以為一個元素添加多個transform，但添加順序要注意，因為轉化需注意軸的變化引起的變化。

• transform: none|transform-functions;

值描述

none	定義不進行轉換。
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 移動。可填一個值或兩個值。
translate3d(x,y,z)	定義 3D 移動。必須三個值。
translateX(x)	定義轉換（移動），只是用 X 軸的值。
translateY(y)	定義轉換（移動），只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換（移動），只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放。1不會縮放，大于1.01放大，小于則縮小。只設一個值則等比例縮放
scale3d(x,y,z)	定義 3D 縮放。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度deg。 正數順時針，負數逆時針。
rotate3d(x,y,z,angle)	定義 3D 旋轉。x代表x軸方向上的一個向量值，y、z也是如此，然后求出三個向量的對角線，再要對角線旋轉。
rotateX(angle)	定義沿著 X 軸的 3D 旋轉。 rotatex的旋轉正方向是順時針。
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉。rotatey的旋轉正方向是逆時針。
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉。rotatez的旋轉正方向是順時針
skew(x-angle,y-angle)	定義對象以其中心位置沿著 X 和 Y 軸的 2D 傾斜轉換。會改變元素形狀。在參數中規定某軸傾斜角度deg，如果角度為正，則往當前軸的負方向斜切，反之相反。先x軸后y軸斜切
skewX(angle)	定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n)	為 3D 轉換元素定義透視視圖。

• transform-origin: x-axis y-axis [z-axis]; 屬性允許您改變被轉換元素的位置。

x軸和y軸可設置為length數值 或 百分比 或top、left、right、bottom、center的組合。z軸只能設置為length數值。

• transform-style 使被轉化的子元素保留其3D轉換，因為transform和transition變化后都會恢復原來樣子。（在父元素中設置）

值描述

float	子元素將不保留其3D位置——平面方式
preserve-3d	子元素將保留其3D位置——立體方式

• perspective: number元素距離視圖的距離,以像素計 | none默認值,與 0 相同,不設置透視; 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉換元素。

• perspective-origin: x-axis y-axis; 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性規定了鏡頭在平面上的的位置，默認放在元素中心。

可設置為length數值 或 百分比 或top、left、right、bottom、center的組合。

animation動畫（關鍵幀動畫，重點）

css3中的動畫為關鍵幀動畫，即告訴系統兩個狀態的不同，中間的補間動畫系統完成。所以設置動畫，主要設置的是關鍵幀。

• @keyframes 規則（主要兼容添加前綴）設置關鍵幀

@keyframes animationname {keyframes-selector {css-styles;}}

值描述

animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值：0-100%；from（與 0% 相同），to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

@keyframes bianhua {0% {background-color: red;}50% {background-color: blue;}100% {background-color: green;} }

?

• animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

animation: name duration timing-function delay iteration-count direction;

值描述

animation-name	規定需要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。 (必設)
animation-timing-function	規定動畫的速度曲線。ease默認，低速開始然后加快，減速結束；ease-in低速開始；ease-out低速結束；ease-in-out低速開始和結束；linear勻速；cubic-bezier(n,n,n,n)自定義。
animation-delay	規定在動畫開始之前的延遲。默認為0，單位s或ms。
animation-iteration-count	規定動畫應該播放的次數。默認為1，infinite為無限次。
animation-direction	規定是否應該輪流反向播放動畫。默認normal正常播放，alternate 動畫應該輪流反向播放。

注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。
steps(數值) 可以讓過渡或動畫（在animation-timing-function設置）分為指定的幾次完成。

• animation-play-state: paused規定動畫已暫停 | running規定動畫正在運行;

animation-play-state 屬性規定動畫正在運行還是暫停。

• animation-fill-mode 屬性規定動畫在播放之前或之后，其動畫效果是否可見。

注釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。
animation-fill-mode : none | forwards | backwards | both;

值描述

none	不改變默認行為。
forwards	當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示之前，立即應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向后填充模式都被應用。 即forwords和backwards都設置。

web字體（常用）

字體格式：TureType(.ttf)、OpenType(.otf）、Web Open Font Format(.woff)、Embedd Open Type(.eot)、SVG(.svg)。
上網下載（要填寫這種字體的文字），使用類似于字體圖標那樣要聲明。
http://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index

多列布局（用于文本）

• column-count 屬性規定元素應該被分隔的列數。

column-count: number|auto; /*number元素內容將被劃分的最佳列數。 *auto由其他屬性決定列數，比如 "column-width"。 */

?

• column-gap 屬性規定兩列之間的間隔。

column-gap: length|normal; /*length把列間的間隔設置為指定的長度。 *normal規定列間間隔為一個常規的間隔。 */

?

• column-rule 屬性設置列之間的寬度、樣式和顏色規則。(簡寫屬性)

column-rule: column-rule-width column-rule-style column-rule-color;

?

值描述

column-rule-width	規定列之間的間隔線寬度規則。 thin纖細，medium中等，thick寬厚，length規定寬度。
column-rule-style	規定列之間的間隔線樣式規則。 none沒有，hidden隱藏，dotted點狀，dashed虛線，solid實線，double雙線，groove、ridge、inset，outset 定義3D**效果，該效果取決于寬度和顏色值。 。
column-rule-color	規定顏色規則

• column-width 屬性規定列的寬度。

column-width: auto|length; /*auto由瀏覽器決定列寬。 *length 規定列的寬度。 */

?

• column-span 屬性規定元素應橫跨多少列。

column-span: 1|all; /*1元素應橫跨一列。 *all元素應橫跨所有列。 */

?

伸縮布局（重點）

版心一般設有mix-width或max-width。

1. display: flex;屬性（伸縮布局中必設）

display: flex; 如果一個容器設置了這個屬性，那么這個盒子里面的所有之間子元素都會自動的變成伸縮項（flex item）。

2. justify-content屬性（重要）

justify-content 屬性 用于設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。flex-direction設置什么排列方式，那個方向就是主軸，它的相反垂直/水平則是側軸。注意兼容。

**提示：**使用 align-content 屬性對齊交叉軸上的各項（垂直）。

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

?

值描述

flex-start	默認值。項目位于容器的開頭。
flex-end	項目位于容器的結尾。
center	項目位于容器的中心。
space-between	項目位于各行之間留有空白的容器內。
space-around	項目位于各行之前、之間、之后都留有空白的容器內。
initial	設置該屬性為它的默認值。
inherit	從父元素繼承該屬性。

3. flex-flow 屬性（flex-direction 和 flex-wrap 屬性的復合屬性）

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性，即flex-flow 為簡寫屬性。

• flex-flow 屬性用于設置或檢索彈性盒模型對象的子元素排列方式。
• flex-direction 屬性規定靈活項目的方向。
• flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

**注意：**如果元素不是彈性盒對象的元素，則 flex-flow 屬性不起作用。

flex-flow: flex-direction flex-wrap|initial|inherit;

?

flew-direction的取值描述

row	默認值。靈活的項目將水平顯示，正如一個行一樣。 從左到右。
row-reverse	與 row 相同，但是以相反的順序。 從右到左。
column	靈活的項目將垂直顯示，正如一個列一樣。 從上到下。
column-reverse	與 column 相同，但是以相反的順序。 從下到上。
initital	?
inherit	從父元素繼承該屬性。

flex-wrap的取值描述

nowrap	默認值。規定靈活的項目不拆行或不拆列。
wrap	規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse	規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。

4. flex-grow 屬性（擴展規則）

flex-grow 屬性用于設置或檢索彈性盒子的擴展比率。
**注意：**如果元素不是彈性盒對象的元素，則 flex-grow 屬性不起作用。

flex-grow: number|initial|inherit;

?

number一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。 越大相對擴展越多。

5. flex-shrink 屬性（收縮規則）

flex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

**注意：**如果元素不是彈性盒對象的元素，則 flex-shrink 屬性不起作用。

flex-shrink: number|initial|inherit;

?

number一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認值是 1。 越大相對收縮越多。

6. flew屬性（flex-grow、flex-shrink和flex-basis的簡寫屬性）

flex 屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
**注意：**如果元素不是彈性盒模型對象的子元素，則 flex 屬性不起作用。可只填一個數值，則默認只設置 flex-grow。

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

?

值描述

flex-grow	一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認是0
flex-shrink	一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認是1
flex-basis	項目的長度。合法值：“auto”、“inherit” 或一個后跟 “%”、“px”、“em” 或任何其他長度單位的數字。一般為不用設，取默認值。
auto	與 1 1 auto 相同。
none	與 0 0 auto 相同。
initial	設置該屬性為它的默認值，即為 0 1 auto。
inherit	從父元素繼承該屬性。

align-items屬性

align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

**提示：**使用每個彈性對象元素的 align-self 屬性可重寫 align-items 屬性。

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

?

值描述

stretch	默認值。元素被拉伸以適應容器。如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。
center	彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
flex-start	彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end	彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的**側軸結束邊界。 **
baseline	元素位于容器的基線上。如彈性盒子元素的行內軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對齊。（少用）

align-self 屬性

**align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。 **

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

?

選項與align-self一樣，在子元素中使用。

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。