CSS面試要點(diǎn)有哪些

這篇文章主要介紹“CSS面試要點(diǎn)有哪些”，在日常操作中，相信很多人在CSS面試要點(diǎn)有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS面試要點(diǎn)有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

一、px，em，rem、vw、vh

1.px (pixel，像素)：

是一個(gè)虛擬長(zhǎng)度單位，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位，如果px要換算成物理長(zhǎng)度，需要指定精度DPI(Dots Per Inch，每英寸像素?cái)?shù))，在掃描打印時(shí)一般都有DPI可選。Windows系統(tǒng)默認(rèn)是96dpi，Apple系統(tǒng)默認(rèn)是72dpi。

2.em(相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸)：

是一個(gè)相對(duì)長(zhǎng)度單位，最初是指字母M的寬度，故名em。現(xiàn)指的是字符寬度的倍數(shù)，用法類(lèi)似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

3.rem(root em，根em):

rem是一個(gè)相對(duì)單位，1rem等于html元素上字體設(shè)置的大小。我們只要設(shè)置html上font-size的大小，就可以改變r(jià)em所代表的大小。這樣我們就有了一個(gè)可控的統(tǒng)一參考系。我們現(xiàn)在有兩個(gè)目標(biāo)：

rem單位所代表的尺寸大小和屏幕寬度成正比，

也就是設(shè)置html元素的font-size和屏幕寬度成正比rem單位和px單位很容易進(jìn)行換算，方便我們按照標(biāo)注稿寫(xiě)cssrem與em的區(qū)別：

rem是相對(duì)于根元素（html）的字體大小，而em是相對(duì)于其父元素的字體大小

em最多取到小數(shù)點(diǎn)的后三位

4.vw、vh：

css3中引入了一個(gè)新的單位vw/vh，與視圖窗口有關(guān)，vw表示相對(duì)于視圖窗口的寬度，vh表示相對(duì)于視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個(gè)相關(guān)的單位。各個(gè)單位具體的含義如下：

這里我們發(fā)現(xiàn)視窗寬高都是100vw／100vh，那么vw或者vh，下簡(jiǎn)稱(chēng)vw，很類(lèi)似百分比單位。

vw和%的區(qū)別為：

二、圣杯布局-雙飛翼布局

圣杯布局與雙飛翼布局針對(duì)的都是三列左右欄固定中間欄邊框自適應(yīng)的網(wǎng)頁(yè)布局

三列布局，中間寬度自適應(yīng)，兩邊定寬
中間欄要在瀏覽器中優(yōu)先展示渲染
允許任意列的高度最高

提醒：圣杯布局中相對(duì)布局中，main元素必須是container的第一個(gè)元素

html代碼

<div class="container">
   <div class="main">main</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

1.相對(duì)布局：

.container {
  width: 100%;
  min-height: 300px;
  padding: 0 60px;
  box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}

2.flex布局：

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}

3.絕對(duì)布局：

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}

三、流式布局與響應(yīng)式布局

流式布局

使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容，也就是百分比布局，通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn)
行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充。

響應(yīng)式開(kāi)發(fā)

利用CSS3 中的 Media Query(媒介查詢)，通過(guò)查詢 screen 的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局。

超小屏幕(移動(dòng)設(shè)備) 768px 以下
小屏設(shè)備 768px-992px
中等屏幕 992px-1200px
寬屏設(shè)備 1200px 以上

由于響應(yīng)式開(kāi)發(fā)顯得繁瑣些，一般使用第三方響應(yīng)式框架來(lái)完成，比如 bootstrap 來(lái)完成一部分工作，當(dāng)然也 可以自己寫(xiě)響應(yīng)式。

四、CSS優(yōu)先級(jí)算法

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標(biāo)簽：1000

!important聲明的樣式優(yōu)先級(jí)最高，如果沖突再進(jìn)行計(jì)算。
如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式。
繼承得到的樣式的優(yōu)先級(jí)最低。

五、CSS3新增偽類(lèi)有那些?

p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。

六、CSS3新特性

1.RGBA和透明度

2.background-image background-origin(content-box/padding-box/border-box) background-size background-repeatword-wrap（對(duì)長(zhǎng)的不可分割單詞換行）

3.word-wrap：break-word

4.文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）

5.font-face屬性：定義自己的字體

6.圓角（邊框半徑）：border-radius 屬性用于創(chuàng)建圓角

7.邊框圖片：border-image: url(border.png) 30 30 round

8.盒陰影：box-shadow: 10px 10px 5px #888888

9.媒體查詢：定義兩套css，當(dāng)瀏覽器的尺寸變化時(shí)會(huì)采用不同的屬性

七、CSS優(yōu)化、提高性能的方法有哪些？

1.避免過(guò)度約束

2.避免后代選擇符

3.避免鏈?zhǔn)竭x擇符

4.使用緊湊的語(yǔ)法

5.避免不必要的命名空間

6.避免不必要的重復(fù)

7.最好使用表示語(yǔ)義的名字。一個(gè)好的類(lèi)名應(yīng)該是描述他是什么而不是像

8.避免！important，可以選擇其他選擇器

9.盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類(lèi)里的重復(fù)規(guī)則

八、CSS動(dòng)畫(huà)

CSS 中的 transform，transition 和 animation 是分開(kāi)的三部分內(nèi)容，其中 transfrom 主要是控制元素變形，并沒(méi)有一個(gè)時(shí)間控制的概念，而 transition 和 animation 才是動(dòng)畫(huà)的部分，它們可以控制在一個(gè)時(shí)間段里，元素在兩個(gè)或以上的狀態(tài)切換的效果。

1.transition

transition屬性：transition-delay 延遲多久后開(kāi)始動(dòng)畫(huà)

transition-duration 過(guò)渡動(dòng)畫(huà)的一個(gè)持續(xù)時(shí)間

transition-property 執(zhí)行動(dòng)畫(huà)對(duì)應(yīng)的屬性，例如 color，background 等，可以使用 all 來(lái)指定所有的屬性

transition-timing-function 隨著時(shí)間推進(jìn)，動(dòng)畫(huà)變化軌跡的計(jì)算方式，常見(jiàn)的有：linear，ease，ease-in，ease-out，cubic-bezier(...) 等。

transition 相關(guān)的事件

transitionend 事件會(huì)在 transition 動(dòng)畫(huà)結(jié)束的時(shí)候觸發(fā)。

通常我們會(huì)在動(dòng)畫(huà)結(jié)束后執(zhí)行一些方法，例如繼續(xù)下一個(gè)動(dòng)畫(huà)效果或者其他。

Zepto.js 中的動(dòng)畫(huà)方法都是使用 CSS 動(dòng)畫(huà)屬性來(lái)處理，而其中動(dòng)畫(huà)運(yùn)行后的回調(diào)便應(yīng)該是使用這個(gè)事件來(lái)處理。

2.animation

雖然 transition已經(jīng)提供了很棒的動(dòng)畫(huà)效果了，但是我們只能夠控制從一個(gè)狀態(tài)到達(dá)另外一個(gè)狀態(tài)，沒(méi)法來(lái)控制多個(gè)狀態(tài)的不斷變化，而 animation 而幫助我們實(shí)現(xiàn)了這一點(diǎn)。使用 animation 的前提是我們需要先使用 @keyframes 來(lái)定義一個(gè)動(dòng)畫(huà)效果，@keyframes 定義的規(guī)則可以用來(lái)控制動(dòng)畫(huà)過(guò)程中的各個(gè)狀態(tài)的情況，語(yǔ)法大抵是這個(gè)樣子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}

@keyframes 關(guān)鍵詞后跟動(dòng)畫(huà)的名字，然后是一個(gè)塊，塊中有動(dòng)畫(huà)進(jìn)度的各個(gè)選擇器，選擇器后的塊則依舊是我們常見(jiàn)的各個(gè) CSS 樣式屬性。

animation 屬性:

animation-name 你需要的動(dòng)畫(huà)效果的 @keyframes 的名字。

animation-delay 和 transition-delay 一樣，動(dòng)畫(huà)延遲的時(shí)間。

animtaion-duration 和 transition-duration 一樣，動(dòng)畫(huà)持續(xù)的時(shí)間。animation-direction 動(dòng)畫(huà)的一個(gè)方向控制。

默認(rèn)是 normal，如果是上述的 left 從 0% 到 100%，那么默認(rèn)是從左到右。如果這個(gè)值是 reverse，那么便是從右到左

由于 animation 提供了循環(huán)的控制，所以還有兩個(gè)值是 alternate 和 alternate-reverse，這兩個(gè)值會(huì)在每次循環(huán)開(kāi)始的時(shí)候調(diào)轉(zhuǎn)動(dòng)畫(huà)方向，只不過(guò)是起始的方向不同。

由于 animation 提供了循環(huán)的控制，所以還有兩個(gè)值是 alternate 和 alternate-reverse，這兩個(gè)值會(huì)在每次循環(huán)開(kāi)始的時(shí)候調(diào)轉(zhuǎn)動(dòng)畫(huà)方向，只不過(guò)是起始的方向不同。

animation 相關(guān)事件

可以通過(guò)綁定事件來(lái)監(jiān)聽(tīng) animation 的幾個(gè)狀態(tài)，這些事件分別是：

animationstart 動(dòng)畫(huà)開(kāi)始事件，如果有 delay 屬性的話，那么等到動(dòng)畫(huà)真正開(kāi)始再觸發(fā)，如果是沒(méi)有 delay，那么當(dāng)動(dòng)畫(huà)效果應(yīng)用到元素時(shí)，這個(gè)事件會(huì)被觸發(fā)。

animationend 動(dòng)畫(huà)結(jié)束的事件，和 transitionend 類(lèi)似。如果有多個(gè)動(dòng)畫(huà)，那么這個(gè)事件會(huì)觸發(fā)多次，像上邊的例子，這個(gè)事件會(huì)觸發(fā)三次。如果 animation-iteration-count 設(shè)置為 infinite，那么這個(gè)事件則不會(huì)被觸發(fā)。

animationiteration 動(dòng)畫(huà)循環(huán)一個(gè)生命周期結(jié)束的事件，和上一個(gè)事件不一樣的是，這個(gè)在每次循環(huán)結(jié)束一段動(dòng)畫(huà)時(shí)會(huì)觸發(fā)，而不是整個(gè)動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)。無(wú)限循環(huán)時(shí)，除非 duration 為 0，否則這個(gè)事件會(huì)無(wú)限觸發(fā)

九、BFC

BFC全稱(chēng)是Block Formatting Context，即塊格式化上下文。它是CSS2.1規(guī)范定義的，關(guān)于CSS渲染定位的一個(gè)概念。要明白BFC到底是什么，首先來(lái)看看什么是視覺(jué)格式化模型。

視覺(jué)格式化模型

視覺(jué)格式化模型(visual formatting model)是用來(lái)處理文檔并將它顯示在視覺(jué)媒體上的機(jī)制，它也是CSS中的一個(gè)概念。

視覺(jué)格式化模型定義了盒（Box）的生成，盒主要包括了塊盒、行內(nèi)盒、匿名盒（沒(méi)有名字不能被選擇器選中的盒）以及一些實(shí)驗(yàn)性的盒（未來(lái)可能添加到規(guī)范中）。盒的類(lèi)型由display屬性決定。

怎樣才能形成BFC

• 根元素或其它包含它的元素；* 浮動(dòng) (元素的float不為none)；* 絕對(duì)定位元素 (元素的position為absolute或fixed)；* 行內(nèi)塊inline-blocks(元素的 display: inline-block)；* 表格單元格(元素的display: table-cell，HTML表格單元格默認(rèn)屬性)；* overflow的值不為visible的元素；* 彈性盒 flex boxes (元素的display: flex或inline-flex)；

但其中，最常見(jiàn)的就是overflow:hidden、float:left/right、position:absolute。也就是說(shuō)，每次看到這些屬性的時(shí)候，就代表了該元素以及創(chuàng)建了一個(gè)BFC了。

瀏覽器對(duì)BFC區(qū)域的約束規(guī)則：

1. 生成BFC元素的子元素會(huì)一個(gè)接一個(gè)的放置。

2. 垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部，兩個(gè)相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級(jí)元素的 外邊距會(huì)折疊(Mastering margin collapsing) 。

3. 生成BFC元素的子元素中，每一個(gè)子元素左外邊距與包含塊的左邊界相接觸（對(duì)于從右到左的格式化，右外邊距接觸右邊界），即使浮動(dòng)元素也是如此（盡管子元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮），除非這個(gè)子元素也創(chuàng)建了一個(gè)新的BFC（如它自身也是一個(gè)浮動(dòng)元素）。

BFC是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素，反之亦然。我們可以利用BFC的這個(gè)特性來(lái)做很多事。

十、flex 布局

基本概念

采用 Flex 布局的元素，稱(chēng)為 Flex 容器（flex container），簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱(chēng)"項(xiàng)目"。

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開(kāi)始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器的屬性：

1.flex-direction： 屬性決定主軸的方向（即項(xiàng)目的排列方向）

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
row-reverse：主軸為水平方向，起點(diǎn)在右端。
column：主軸為垂直方向，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

2.flex-wrap ：默認(rèn)情況下，項(xiàng)目都排在一條線（又稱(chēng)"軸線"）上

nowrap（默認(rèn)）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。

3.flex-flow：是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式

4.justify-content：定義了項(xiàng)目在主軸上的對(duì)齊方式

flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。

所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5.align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊

flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

6.align-content：定義了多根軸線的對(duì)齊方式。

如果項(xiàng)目只有一根軸線，該屬性不起作用flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

項(xiàng)目的屬性order屬性定義項(xiàng)目的排列順序。

數(shù)值越小，排列越靠前，默認(rèn)為0。

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。

該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。

十一、Grid 布局總結(jié)

grid 布局是 css 中的一種新的布局方式，對(duì)盒子和盒子內(nèi)容的位置及尺寸有很強(qiáng)的控制能力。與 flex 不同，flex 著重于單軸，而 grid 適應(yīng)于多軸，下面就來(lái)做個(gè)簡(jiǎn)單的介紹。

flex 布局示意

grid 布局示意

基本概念

設(shè)置 display: grid; 的元素稱(chēng)為容器，它的直接子元素稱(chēng)為項(xiàng)目，但注意子孫元素不是項(xiàng)目。

grid line：網(wǎng)格線，構(gòu)成 grid 布局的結(jié)構(gòu)，分為水平和豎直兩種。grid track：兩條相鄰網(wǎng)格線之間的空間，可以認(rèn)為是一行或者一列。
grid cell：兩條相鄰行和相鄰列之間分割線組成的空間，是 grid 布局中的一個(gè)單元。
grid area：四條網(wǎng)格線包裹的全部空間，任意數(shù)量的 grid cell 組成一個(gè) grid area。

容器屬性

grid 容器的屬性還是有點(diǎn)多的，一共有 18 個(gè)，但是很多可以通過(guò)簡(jiǎn)寫(xiě)完成，所以也不用太緊張。

grid-template 系列

grid-template-columns
grid-template-rows
grid-template-areas

grid-gap 系列

grid-column-gap
grid-row-gap

place-items 系列

justify-items
align-items

place-content 系列

justify-content
align-content

grid 系列

grid-auto-columns
grid-auto-rows
grid-auto-flow

十二、box-sizing

設(shè)置CSS盒模型為標(biāo)準(zhǔn)模型或IE模型。標(biāo)準(zhǔn)模型的寬度只包括content，二IE模型包括border和padding

box-sizing屬性可以為三個(gè)值之一：

content-box，默認(rèn)值，只計(jì)算內(nèi)容的寬度，border和padding不計(jì)算入width之內(nèi)
padding-box，padding計(jì)算入寬度內(nèi)
border-box，border和padding計(jì)算入寬度之內(nèi)

十三、硬件加速

有時(shí)候動(dòng)畫(huà)可能會(huì)導(dǎo)致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來(lái)避免這個(gè)問(wèn)題：

.block {
    transform: translateZ(0);
}

到此，關(guān)于“CSS面試要點(diǎn)有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！