web前端最新最全面試題總結（css3)

阿新 • • 發佈：2018-12-31

盒模型

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

1）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)
2）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padding;

CSS如何設定這兩種模型

/* 設定當前盒子為 標準盒模型（預設） */
    box-sizing: content-box;
/* 設定當前盒子為 IE盒模型 */
    box-sizing: border-box;

盒模型的疊加

標準文件流中，豎直方向的margin不疊加，只取較大的值作為margin(水平方向的margin是可以疊加的，即水平方向沒有塌陷現象)。
子父元素兩個div，子元素margin之後，父元素的高度是子元素的高度，而並非是子元素高度+margin距離。解決方案是：給父親設定一個屬性：overflow: hidden
父div裡面一個p子元素，設定p元素的margin的時候，會讓整個div的增加一個margin,出現這個的原因是因為父親div沒有border屬性。解決方案是：給父div加個border即可。

BFC（邊距重疊解決方案）

BFC（Block Formatting Context）：塊級格式化上下文。你可以把它理解成一個獨立的區域。

BFC 的原理/BFC的佈局規則【非常重要】

BFC 的原理，其實也就是 BFC 的渲染規則（能說出以下四點就夠了）。包括：

（1）BFC 內部的子元素，在垂直方向，邊距會發生重疊。
（2）BFC在頁面中是獨立的容器，外面的元素不會影響裡面的元素，反之亦然。
（3）BFC區域不與旁邊的float box區域重疊。（可以用來清除浮動帶來的影響）。
（4）計算BFC的高度時，浮動的子元素也參與計算。

如何生成BFC

有以下幾種方法：

方法1：overflow: 不為vidible，可以讓屬性是 hidden、auto。【最常用】
方法2：浮動中：float的屬性值不為none。意思是，只要設定了浮動，當前元素就建立了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一個BFC。
方法4：display為inline-block, table-cell, table-caption, flex, inline-flex

box-sizing常用的屬性有哪些？分別有什麼作用？

(Q1) box-sizing: content-box|border-box|inherit;

(Q2) content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。

border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

如何讓一個div元素隱藏？你能想到的方式有幾種？

**Opacity：0 ** 該屬性的意思是檢索或設定物件的不透明度當他的透明度為0的時候,視覺上它是消失了,但是他依然佔據著那個位置,並對網頁的佈局起作用。它也將響應使用者互動。添加了該屬性的元素,它的背景和元素內容也是會跟著變化的.
Display：none 該屬性才是真正意義上的隱藏元素,當元素的display屬性為none時,該元素就會就會從視覺中消失,並且連盒模型也不生成.也不會在頁面佔據任何位置,不但如此,就連它的子元素也會一同從盒子模型中消失。
Visibility：hidden 該屬性類似opacity屬性，該屬性值為hidden的時候，元素將會隱藏，也會佔據著自己的位置，並對網頁的佈局起作用，與 opacity 唯一不同的是它不會響應任何使用者互動。
Position 該屬性的意義就是把元素脫離文件流移出視覺區域，新增該屬性後既不會影響佈局，又能讓元素保持可以操作。應用該屬性後，主要就是通過控制方向（top,left,right,bottom），達到一定的值，離開當前可是頁面。
Clip-path 該屬性很少見，該屬性是通過裁剪的方法實現隱藏的。被隱藏的內容依然佔據著那個位置，它周圍的元素的行為就如同它可見時一樣。

簡述一下src與href的區別

href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結，用於超連結。
src是指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。

px和em、rem的區別

相同點：px和em都是長度單位；

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。

瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

em相對於父元素，rem相對於根元素

清除浮動有哪些方式？比較好的方式是哪一種？

(Q1)

（1）父級div定義height。

（2）結尾處加空div標籤clear:both。

（3）父級div定義偽類:after和zoom。

（4）父級div定義overflow:hidden。

（5）父級div定義overflow:auto。

（6）父級div也浮動，需要定義寬度。

（7）父級div定義display:table。

（8）結尾處加br標籤clear:both。

(Q2) 比較好的是第3種方式，好多網站都這麼用。

頁面匯入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;

（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。

####什麼叫優雅降級和漸進增強？

優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。

漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。

CSS實現垂直水平居中

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設定為0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設定為auto*/
    margin:auto;
    border: 1px solid green;    
}

position的值， relative和absolute分別是相對於誰進行定位的？

absolute :生成絕對定位的元素，相對於最近一級的定位不是 static 的父元素來進行定位。
fixed （老IE不支援）生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 預設值。沒有定位，元素出現在正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文件流計算得出

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器  多背景 rgba

在CSS3中唯一引入的偽元素是::selection.

媒體查詢，多欄佈局

border-image

display:inline-block什麼情況下會產生間隙，以及解決辦法

在前端頁面佈局中，經常用到display：inline-clock；方便佈局，能夠將塊狀元素按照內聯元素的方式佈局，同時能設定寬高。

但是，經常寫程式碼的朋友會發現，會產生間隙，間隙產生的原因是因為，換行或空格會佔據一定的位置。

解決方法

1，在html程式碼中除去當前元素的空格或換行；
2，當前元素的父元素中設定font-size:0;
3，在當前元素的父元素中設定letter-spaceing:-4px;

垂直居中

單行行內元素
- 可以設定padding-top,padding-bottom
- 將height和line-height設為相等
多行行內元素
- 可以將元素轉為table樣式，再設定vertical-align：middle;
- 使用flex佈局
塊級元素
- 已知高度絕對定位負邊距
- 未知高度transform: translateY(-50%);
- flex佈局
```
display: flex;
justify-content: center;
align-items: center;
```

position:absolute和float屬性的異同？

共同點：對內聯元素設定float和absolute屬性，可以讓元素脫離文件流，並且可以設定其寬高。
不同點：float仍可佔據位置，不會覆蓋在另一個BFC區域上，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。absolute會覆蓋文件流中的其他元素。

tansition和margin的百分比根據什麼計算？

transition是相對於自身,margin相對於參照物

實現一個秒針繞一點轉動的效果

animation: move 60s infinite steps(60); 
/*設定旋轉的中心點為中間底部*/ 
transform-origin: center bottom; 
/*旋轉從0度到360度*/ 
@keyframes move { 
    from { 
        transform: rotate(0deg); 
    } 
    to { 
        transform: rotate(360deg); 
    } 
}

css3動畫和jquery動畫的差別？

css3中的過渡和animation動畫都是基於css實現機制的，屬於css範疇之內，並沒有涉及到任何語言操作。效率略高與jQuery中的animate()函式，但相容性很差。
jQuery中的animate()函式可以簡單的理解為css樣式的“逐幀動畫”，是css樣式不同狀態的快速切換的結果。效率略低於css3動畫執行效率，但是相容性好。‍

解釋css sprites ，如何使用？

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網站節約了頻寬，讓提高了使用者的載入速度和使用者體驗，不需要載入更多的圖片

優點：
減少HTTP請求數，極大地提高頁面載入速度
增加圖片資訊重複度，提高壓縮比，減少圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：
圖片合併麻煩
維護麻煩，修改一個圖片可能需要從新佈局整個圖片，樣式

CSS樣式覆蓋規則

規則一：由於繼承而發生樣式衝突時，最近祖先獲勝。
規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝
規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。
- 內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器
規則四：樣式權值相同時，後者獲勝。
規則五：!important的樣式屬性不被覆蓋。

css三角形運用

<style>
.colored-border-empty-retangle {
    margin: 50px auto;
    width: 0;
    height: 0;
    border-top: 40px solid pink;
    border-right: 40px solid green;
    border-bottom: 40px solid red;
    border-left: 40px solid blue;
}
</style>
<div class="colored-border-empty-retangle"></div>

什麼是FOUC（無樣式內容閃爍）？你如何來避免FOUC？

FOUC(Flash Of Unstyled Content)–文件樣式閃爍

描述下“reset”CSS檔案的作用和使用它的好處。

因為瀏覽器的品種很多，每個瀏覽器的預設樣式也是不同的，所以定義一個css reset可以使各瀏覽器的預設樣式統一。

描述下“reset”CSS檔案的作用和使用它的好處。

因為瀏覽器的品種很多，每個瀏覽器的預設樣式也是不同的，所以定義一個css reset可以使各瀏覽器的預設樣式統一。

如何優化網頁的列印樣式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的屬性就是裝置，顯示器上就是screen，印表機則是print，電視是tv，投影儀是projection。列印樣式示例如下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但列印樣式表也應注意以下事項：

列印樣式表中最好不要用背景圖片，因為印表機不能列印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
最好不要使用畫素作為單位，因為列印樣式表要打印出來的會是實物，所以建議使用pt和cm。
隱藏掉不必要的內容。（@print div{display:none;}）
列印樣式表中最好少用浮動屬性，因為它們會消失。如果想要知道列印樣式表的效果如何，直接在瀏覽器上選擇列印預覽就可以了。

在書寫高效CSS時會有哪些問題需要考慮？

樣式是：從右向左的解析一個選擇器；
ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；
不要tag-qualify（永遠不要這樣做ul#main-navigation{}ID已經是唯一的，不需要Tag來標識，這樣做會讓選擇器變慢。）；
後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的：html body ul li a{}）；
想清楚你為什麼這樣寫；
CSS3的效率問題（CSS3選擇器（比如:nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）；
我們知道#ID速度是最快的，那麼我們都用ID，是不是很快。但是我們不應該為了效率而犧牲可讀性和可維護性。

如果設計中使用了非標準的字型，你該如何去實現？

所謂的標準字型是多數機器上都會有的，或者即使沒有也可以由預設字型替代的字型。

方法：

用圖片代替
web fonts線上字型檔，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；
@font-face，Webfonts(字型服務例如：Google Webfonts，Typekit等等。)

解釋下瀏覽器是如何判斷元素是否匹配某個CSS選擇器？

從後往前判斷。瀏覽器先產生一個元素集合，這個集合往往由最後一個部分的索引產生（如果沒有索引就是所有元素的集合）。然後向上匹配，如果不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。舉個例子，有選擇器：

1 body.ready#wrapper>.lol233

web前端最新最全面試題總結（css3)

盒模型

盒模型的疊加

BFC（邊距重疊解決方案）

box-sizing常用的屬性有哪些？分別有什麼作用？

如何讓一個div元素隱藏？你能想到的方式有幾種？

簡述一下src與href的區別

px和em、rem的區別

清除浮動有哪些方式？比較好的方式是哪一種？

頁面匯入樣式時，使用link和@import有什麼區別？

CSS實現垂直水平居中

position的值， relative和absolute分別是相對於誰進行定位的？

CSS3有哪些新特性？

display:inline-block什麼情況下會產生間隙，以及解決辦法

垂直居中

position:absolute和float屬性的異同？

tansition和margin的百分比根據什麼計算？

實現一個秒針繞一點轉動的效果

css3動畫和jquery動畫的差別？

解釋css sprites ，如何使用？

CSS樣式覆蓋規則

css三角形運用

什麼是FOUC（無樣式內容閃爍）？你如何來避免FOUC？

描述下“reset”CSS檔案的作用和使用它的好處。

描述下“reset”CSS檔案的作用和使用它的好處。

如何優化網頁的列印樣式？

在書寫高效CSS時會有哪些問題需要考慮？

如果設計中使用了非標準的字型，你該如何去實現？

解釋下瀏覽器是如何判斷元素是否匹配某個CSS選擇器？

相關推薦