前端面試之CSS3新特性

時間 2019-11-08

標籤前端面試 css3 css 特性欄目快樂工作简体版

原文原文鏈接

除了html5的新特性，CSS3的新特性也是面試中常常被問到的。javascript

選擇器

CSS3中新添加了不少選擇器，解決了不少以前須要用javascript才能解決的佈局問題。css

element1~element2: 選擇前面有element1元素的每一個element2元素。html
E:first-of-type: 選擇屬於其父元素的首個E元素的每一個E元素。html5
E:last-of-type: 選擇屬於其父元素的最後E元素的每一個E元素。java
E:only-of-type: 選擇屬於其父元素惟一的E元素的每一個E元素。css3
E:only-child: 選擇屬於其父元素的惟一子元素的每一個E元素。web
E:nth-child(n): 選擇屬於其父元素的第n個子元素的每一個E元素。面試
E:nth-last-child(n): 選擇屬於其父元素的倒數第n個子元素的每一個E元素。瀏覽器
E:nth-of-type(n): 選擇屬於其父元素第n個E元素的每一個E元素。服務器
E:nth-last-of-type(n): 選擇屬於其父元素倒數第n個E元素的每一個E元素。
E:last-child: 選擇屬於其父元素最後一個子元素每一個E元素。
:root: 選擇文檔的根元素。
E:empty: 選擇沒有子元素的每一個E元素（包括文本節點)。
E:target: 選擇當前活動的E元素。
E:enabled: 選擇每一個啓用的E元素。
E:disabled: 選擇每一個禁用的E元素。
E:checked: 選擇每一個被選中的E元素。
E:not(selector): 選擇非selector元素的每一個元素。
E::selection: 選擇被用戶選取的元素部分。

Transition,Transform和Animation

這三個特性是CSS3新增的和動畫相關的特性。

Transition

Transition能夠在當元素從一種樣式變換爲另外一種樣式時爲元素添加效果，而不用使用Flash動畫或JavaScript。
Transition有以下屬性：

transition-property: 規定應用過渡的CSS屬性的名稱。
transition-duration: 規定完成過渡效果須要多長時間。
transition-delay: 規定過渡效果什麼時候開始，默認是0。
transition-timing-function: 規定過渡效果的時間曲線，默認是"ease"，還有linear、ease-in、ease-out、ease-in-out和cubic-bezier等過渡類型。
transition: 簡寫屬性，用於在一個屬性中設置四個過渡屬性。

在一個例子中使用全部過渡屬性以下：

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

使用transition屬性簡寫以下：

div {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

Transform

Transform用來向元素應用各類2D和3D轉換，該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜等操做。使用方式以下：

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

變換類型

transform能夠有各類變換類型，即屬性值：

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縮放轉換。
scale3d(x,y,z): 定義3D縮放轉換。
scaleX(x): 經過設置X軸的值來定義縮放轉換。
scaleY(y): 經過設置Y軸的值來定義縮放轉換。
scaleZ(z): 經過設置Z軸的值來定義3D縮放轉換。
rotate(angle): 定義2D旋轉，在參數中規定角度。
rotate3d(x,y,z,angle): 定義3D旋轉。
rotateX(angle): 定義沿着X軸的3D旋轉。
rotateY(angle): 定義沿着Y軸的3D旋轉。
rotateZ(angle): 定義沿着Z軸的3D旋轉。
skew(x-angle,y-angle): 定義沿着X和Y軸的2D傾斜轉換。
skewX(angle): 定義沿着X軸的2D傾斜轉換。
skewY(angle): 定義沿着Y軸的2D傾斜轉換。
perspective(n): 爲3D轉換元素定義透視視圖。

瀏覽器支持

Internet Explorer 十、Firefox、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支持 2D 轉換。

Animation

Animation讓CSS擁有了能夠製做動畫的功能。使用CSS3的Animation製做動畫咱們能夠省去複雜的js代碼。使用方法大概以下：

@-webkit-keyframes anim1 { 
   0% { 
        opacity: 0; 
        font-size: 12px; 
   } 
   100% { 
        opacity: 1; 
        font-size: 24px; 
   } 
} 
.anim1Div { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

具體用法能夠參考教程：CSS3 Animation。

邊框

CSS3新增了三個邊框屬性，分別是border-radius、box-shadow和border-image。border-radius能夠建立圓角邊框，box-shadow能夠爲元素添加陰影，border-image可使用圖片來繪製邊框。IE9+支持border-radius和box-shadow屬性。Firefox、Chrome以及Safari支持全部新的邊框屬性。

背景

CSS3新增了幾個關於背景的屬性，分別是background-clip、background-origin、background-size和background-break。

background-clip

background-clip屬性用於肯定背景畫區，有如下幾種可能的屬性：

background-clip: border-box; 背景從border開始顯示
background-clip: padding-box; 背景從padding開始顯示
background-clip: content-box; 背景顯content區域開始顯示
background-clip: no-clip; 默認屬性，等同於border-box

一般狀況，背景都是覆蓋整個元素的，利用這個屬性能夠設定背景顏色或圖片的覆蓋範圍。

background-clip

background-clip屬性用於肯定背景的位置，它一般與background-position聯合使用，能夠從 border、padding、content來計算background-position（就像background-clip）。

background-origin: border-box; 從border開始計算background-position
background-origin: padding-box; 從padding開始計算background-position
background-origin: content-box; 從content開始計算background-position

background-size

background-size屬性經常使用來調整背景圖片的大小，主要用於設定圖片自己。有如下可能的屬性：

background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小
background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包含元素的尺寸

background-break

CSS3中，元素能夠被分紅幾個獨立的盒子（如使內聯元素span跨越多行），background-break 屬性用來控制背景怎樣在這些不一樣的盒子中顯示。

background-break: continuous; 默認值。忽略盒之間的距離（也就是像元素沒有分紅多個盒子，依然是一個總體同樣）
background-break: bounding-box; 把盒之間的距離計算在內；
background-break: each-box; 爲每一個盒子單獨重繪背景。

文字效果

word-wrap

CSS3中，word-wrap屬性容許您容許文本強制文本進行換行，即這意味着會對單詞進行拆分。全部主流瀏覽器都支持 word-wrap 屬性。

p {
    word-wrap:break-word;
}

text-overflow

它與word-wrap是協同工做的，word-wrap設置或檢索噹噹前行超過指定容器的邊界時是否斷開轉行，而 text-overflow則設置或檢索噹噹前行超過指定容器的邊界時如何顯示。對於「text-overflow」屬性，有「clip」和「ellipsis」兩種可供選擇。

text-shadow

CSS3中，text-shadow可向文本應用陰影。可以規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

text-decoration

CSS3裏面開始支持對文字的更深層次的渲染，具體有三個屬性可供設置：

text-fill-color: 設置文字內部填充顏色
text-stroke-color: 設置文字邊界填充顏色
text-stroke-width: 設置文字邊界寬度

漸變

CSS3新增了漸變效果，包括linear-gradient(線性漸變)和radial-gradient(徑向漸變)。具體用法參考教程：CSS3 Gradient

@font-face特性

在CSS3以前，web設計師必須使用已在用戶計算機上安裝好的字體。經過CSS3，web設計師可使用他們喜歡的任意字體。當您您找到或購買到但願使用的字體時，可將該字體文件存放到web服務器上，它會在須要時被自動下載到用戶的計算機上。字體是在 CSS3 @font-face 規則中定義的。Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)類型的字體。IE9+ 支持新的@font-face規則，可是僅支持 .eot類型的字體(Embedded OpenType)。

在新的@font-face規則中，必須首先定義字體的名稱（好比myFont），而後指向該字體文件。
如需爲HTML元素使用字體，請經過font-family屬性來引用字體的名稱 (myFont)

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

多列布局

經過CSS3，可以建立多個列來對文本進行佈局，IE10和Opera支持多列屬性。Firefox 須要前綴-moz-，Chrome和Safari須要前綴-webkit-。主要有以下三個屬性：

column-count: 規定元素應該被分隔的列數。
column-gap: 規定列之間的間隔。
column-rule: 設置列之間的寬度、樣式和顏色規則

div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

用戶界面

CSS3中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。Firefox、Chrome以及Safari 支持resize屬性。IE、Chrome、Safari以及Opera支持box-sizing屬性。Firefox須要前綴-moz-。
全部主流瀏覽器都支持outline-offset屬性，除了IE。

resize

resize 屬性規定是否可由用戶調整元素尺寸。若是但願此屬性生效，須要設置元素的 overflow 屬性，值能夠是 auto、hidden 或 scroll。

div{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}

box-sizing

box-sizing屬性可設置的值有content-box、border-box和inherit。

content-box: padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和，即 (Element width = width + border + padding)，此屬性表現爲標準模式下的盒模型。
border-box: padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值，即便定義有border和padding也不會改變對象的實際寬度，即 (Element width = width)，此屬性表現爲怪異模式下的盒模型。