前端硬核面試專題之 CSS 55 問

時間 2019-11-05

標籤前端硬核面試專題 css 欄目快樂工作简体版

原文原文鏈接

前言

本文講解 55 道前端面試的 CSS 的內容。css

複習前端面試的知識，是爲了鞏固前端的基礎知識，最重要的仍是平時的積累！

注意：文章的題與題之間用下劃線分隔開，答案僅供參考。html

筆者技術博客首發地址 GitHub，歡迎關注。前端

文章原文地址：前端硬核面試專題之 CSS 55 問。css3

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數據結構與算法 + Git 。git

CSS

盒子模型的理解 ?github

標準模式和混雜模式（IE）。
在標準模式下瀏覽器按照規範呈現頁面；
在混雜模式下，頁面以一種比較寬鬆的向後兼容的方式顯示。
混雜模式一般模擬老式瀏覽器的行爲以防止老站點沒法工做。

CSS 盒子模型具備內容 (content)、填充 (padding)、邊框 (border)、邊界 (margin)這些屬性。web

咱們所說的 width，height 指的是內容 (content) 的寬高。面試

一個盒子模型的中：算法

寬度 = width+ pdding(寬) + border(寬)。
高度 = height + padding(高) + border(高)。

如何在頁面上實現一個圓形的可點擊區域？chrome

一、map+area 或者 svg
二、border-radius
三、純 js 實現，須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

實現不使用 border 畫出 1px 高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

CSS 中哪些屬性能夠同父元素繼承 ?

繼承：(X)HTML 元素能夠從其父元素那裏繼承部分 CSS 屬性，即便當前元素並無定義該屬性，好比： color，font-size。

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

經常使用的屬性：content-box、 border-box 、inherit

做用

content-box(默認)：寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
border-box：元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

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

link 屬於 XHTML 標籤，除了加載 CSS 外，還能用於定義 RSS(是一種描述和同步網站內容的格式，是使用最普遍的 XML 應用), 定義 rel 鏈接屬性等做用；
而 @import 是 CSS 提供的，只能用於加載 CSS;
頁面被加載的時，link 會同時被加載，而 @import 引用的 CSS 會等到頁面被加載完再加載;
import 是 CSS2.1 提出的，只在 IE5 以上才能被識別，而 link 是 XHTML 標籤，無兼容問題。
總之，link 要優於 @import。

常見兼容性問題？

瀏覽器默認的 margin 和 padding 不一樣。解決方案是加一個全局的 *{margin: 0; padding: 0;} 來統一。
IE下 event 對象有 event.x，event.y 屬性，而 Firefox 下沒有。Firefox 下有 event.pageX，event.PageY 屬性，而 IE 下沒有。

解決辦法：var mx = event.x ? event.x : event.pageX;

Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超連接訪問事後 hover 樣式就不出現了，被點擊訪問過的超連接樣式不在具備 hover 和 active 了，解決方法是改變 CSS 屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮動，何時須要清除浮動，清除浮動都有哪些方法？

一個塊級元素若是沒有設置 height，那麼其高度就是由裏面的子元素撐開，若是子元素使用浮動，脫離了標準的文檔流，那麼父元素的高度會將其忽略，若是不清除浮動，父元素會出現高度不夠，那樣若是設置 border 或者 background 都得不到正確的解析。

正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲 0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。

清除浮動的方式

父級 div 定義 height，原理：父級 div 手動定義 height，就解決了父級 div 沒法自動獲取到高度的問題。
結尾處加空 div 標籤 clear: both，原理：添加一個空 div，利用 css 提升的 clear: both 清除浮動，讓父級 div 能自動獲取到高度。
父級 div 定義 overflow: hidden，原理：必須定義 width 或 zoom: 1，同時不能定義 height，使用 overflow: hidden 時，瀏覽器會自動檢查浮動區域的高度
父級 div 也一塊兒浮動。
父級 div 定義 display: table 。
父級 div 定義僞類 :after 和 zoom 。
結尾處加 br 標籤 clear: both，原理：父級 div 定義 zoom: 1 來解決 IE 浮動問題，結尾處加 br 標籤 clear: both。

總結：比較好的是倒數第 2 種方式，簡潔方便。

如何保持浮層水平垂直居中？

1、水平居中

（1）行內元素解決方案

只須要把行內元素包裹在一個屬性 display 爲 block 的父層元素中，而且把父層元素添加以下屬性便可。

.parent {
    text-align: center;
}

（2）塊狀元素解決方案

.item {
    /* 這裏能夠設置頂端外邊距 */
    margin: 10px auto;
}

（3）多個塊狀元素解決方案將元素的 display 屬性設置爲 inline-block，而且把父元素的 text-align 屬性設置爲 center 便可:

.parent {
    text-align:center;
}

（4）多個塊狀元素解決方案

使用 flexbox 佈局，只須要把待處理的塊狀元素的父元素添加屬性 display: flex 及 justify-content: center 便可。

.parent {
    display: flex;
    justify-content: center;
}

2、垂直居中

（1）單行的行內元素解決方案

.parent {
    background: #222;
    height: 200px;
}

/* 如下代碼中，將 a 元素的 height 和 line-height 設置的和父元素同樣高度便可實現垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

（2）多行的行內元素解決方案組合

使用 display: table-cell 和 vertical-align: middle 屬性來定義須要居中的元素的父容器元素生成效果，以下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 如下屬性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}

（3）已知高度的塊狀元素解決方案

.item{
    position: absolute;
    top: 50%;
    margin-top: -50px;  /* margin-top值爲自身高度的一半 */
    padding:0;
}

3、水平垂直居中

（1）已知高度和寬度的元素解決方案 1

這是一種不常見的居中方法，可自適應，比方案 2 更智能，以下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

（2）已知高度和寬度的元素解決方案 2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設置margin-left / margin-top 爲自身高度的一半 */
    margin-left: -75px;
}

（3）未知高度和寬度元素解決方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用 css3 的 transform 來實現 */
}

（4）使用 flex 佈局實現

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意這裏須要設置高度來查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

position 、float 和 display 的取值和各自的意思和用法

position

position 屬性取值：static(默認)、relative、absolute、fixed、inherit、sticky。
postision：static；始終處於文檔流給予的位置。看起來好像沒有用，但它能夠快速取消定位，讓 top，right，bottom，left 的值失效。在切換的時候能夠嘗試這個方法。
除了 static 值，在其餘三個值的設置下，z-index 纔會起做用。確切地說 z-index 只在定位元素上有效。
position：relative 和 absolute 均可以用於定位，區別在於前者的 div 還屬於正常的文檔流，後者已是脫離了正常文檔流，不佔據空間位置，不會將父類撐開。

定位原點 relative 是相對於它在正常流中的默認位置偏移，它本來佔據的空間任然保留；absolute 相對於第一個 position 屬性值不爲 static 的父類。因此設置了 position：absolute，其父類的該屬性值要注意，並且 overflow：hidden 也不能亂設置，由於不屬於正常文檔流，不會佔據父類的高度，也就不會有滾動條。

fixed 舊版本 IE 不支持，倒是頗有用，定位原點相對於瀏覽器窗口，並且不能變。

經常使用於 header，footer 或者一些固定的懸浮 div，隨滾動條滾動又穩定又流暢，比 JS 好多了。fixed 能夠有不少創造性的佈局和做用，兼容性是問題。

position：inherit。

規定從父類繼承 position 屬性的值，因此這個屬性也是有繼承性的，但須要注意的是 IE8 以及往前的版本都不支持 inherit 屬性。

sticky ：設置了sticky 的元素，在屏幕範圍（viewport）時該元素的位置並不受到定位影響（設置是 top、left 等屬性無效），當該元素的位置將要移出偏移範圍時，定位又會變成 fixed，根據設置的 left、top 等屬性成固定位置的效果。

float

float：left (或 right)，向左（或右）浮動，直到它的邊緣碰到包含框或另外一個浮動框爲止。

且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不佔據空間，沒法將父類元素撐開。

任何元素均可以浮動，浮動元素會生成一個塊級框，不論它自己是何種元素。所以，沒有必要爲浮動元素設置 display：block。
若是浮動非替換元素，則要指定一個明確的 width，不然它們會盡量的窄。

什麼叫替換元素？根據元素自己的特色定義的， (X)HTML中的 img、input、textarea、select、object 都是替換元素，這些元素都沒有實際的內容。 (X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。

display

display 屬性取值：none、inline、inline-block、block、table 相關屬性值、inherit。
display 屬性規定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。
display：none 和 visiability：hidden 均可以隱藏 div，區別有點像 absolute 和 relative，前者不佔據文檔的空間，後者仍是佔據文檔的位置。
display：inline 和 block，又叫行內元素和塊級元素。

表現出來的區別就是 block 獨佔一行，在瀏覽器中一般垂直佈局，能夠用 margin 來控制塊級元素之間的間距（存在 margin 合併的問題，只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。）；
而 inline 以水平方式佈局，垂直方向的 margin 和 padding 都是無效的，大小跟內容同樣，且沒法設置寬高。
inline 就像塑料袋，內容怎麼樣，就長得怎麼樣；block 就像盒子，有固定的寬和高。

inline-block 就介於二者之間。
table 相關的屬性值能夠用來垂直居中，效果通常。
flex

定位機制

上面三個屬性都屬於 CSS 定位屬性。CSS 三種基本的定位機制：普通流、浮動、絕對定位。

css3 動畫效果屬性有哪些 ?

animation-name：規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function：規定動畫的速度曲線。
animation-delay：規定在動畫開始以前的延遲。
animation-iteration-count：規定動畫應該播放的次數。
animation-direction：規定是否應該輪流反向播放動畫。

canvas 與 svg 的區別？

Canvas 是基於像素的即時模式圖形系統，最適合較小的表面或較大數量的對象，Canvas 不支持鼠標鍵盤等事件。
SVG 是基於形狀的保留模式圖形系統，更加適合較大的表面或較小數量的對象。
Canvas 和 SVG 在修改方式上還存在着不一樣。繪製 Canvas 對象後，不能使用腳本和 CSS 對它進行修改。由於 SVG 對象是文檔對象模型的一部分，因此能夠隨時使用腳本和 CSS 修改它們。

如今對兩種技術作對比概括以下：

Canvas

1) 依賴分辨率
2) 不支持事件處理器
3) 弱的文本渲染能力
4) 可以以 .png 或 .jpg 格式保存結果圖像
5) 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

1) 不依賴分辨率
2) 支持事件處理器
3) 最適合帶有大型渲染區域的應用程序（好比谷歌地圖）
4) 複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）
5) 不適合遊戲應用

px 和 em 的區別？

px 像素（Pixel）。相對長度單位。像素 px 是相對於顯示器屏幕分辨率而言的。(引自CSS2.0手冊)
em 是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是 16px。全部未經調整的瀏覽器都符合：1em = 16px。

那麼12px = 0.75em,10px = 0.625em。爲了簡化 font-size 的換算，須要在 css 中的 body 選擇器中聲明 Font-size = 62.5%，這就使 em 值變爲 16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說只須要將你的原來的 px 數值除以 10，而後換上 em 做爲單位就好了。

會不會用 ps 扣圖，png、jpg、gif 這些圖片格式解釋一下，分別何時用。如何優化圖像、圖像格式的區別 ?

JPG 的特性

支持攝影圖像或寫實圖像的高級壓縮，而且可利用壓縮比例控制圖像文件大小。
有損壓縮會使圖像數據質量降低，而且在編輯和從新保存 JPG 格式圖像時，這種降低損失會累積。
JPG 不適用於所含顏色不多、具備大塊顏色相近的區域或亮度差別十分明顯的較簡單的圖片。

PNG 的特性

能在保證最不失真的狀況下儘量壓縮圖像文件的大小。
PNG 用來存儲灰度圖像時，灰度圖像的深度可多到 16 位，存儲彩色圖像時，彩色圖像的深度可多到 48 位，而且還可存儲多到 16 位的 α 通道數據。
對於須要高保真的較複雜的圖像，PNG 雖然能無損壓縮，但圖片文件較大，不適合應用在 Web 頁面上。
另外還有一個原則就是用於頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘可能用 PNG 格式進行存儲，這樣才能更好的保證設計品質。而其餘一些內容元素，如廣告 Banner、商品圖片等對質量要求不是特別苛刻的，則能夠用 JPG 去進行存儲從而下降文件大小。

GIF格式特色

透明性: Gif 是一種布爾透明類型，既它能夠是全透明，也能夠是全不透明，可是它並無半透明（alpha 透明）。
動畫：Gif 這種格式支持動畫。
無損耗性：Gif 是一種無損耗的圖像格式，這也意味着你能夠對 gif 圖片作任何操做也不會使得圖像質量產生損耗。
水平掃描：Gif 是使用了一種叫做 LZW 的算法進行壓縮的，當壓縮 gif 的過程當中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的 gif 圖片比豎向的 gif 圖片更加小。

例如 50010 的圖片比 10500 的圖片更加小。
間隔漸進顯示：Gif 支持可選擇性的間隔漸進顯示

由以上特色看出只有 256 種顏色的 gif 圖片不適合做爲照片，它適合作對顏色要求不高的圖形。

咱們知道能夠之外鏈的方式引入 CSS 文件，請談談外鏈引入 CSS 有哪些方式，這些方式的性能有區別嗎？

CSS 的引入方式最經常使用的有三種

第一：外鏈式

這種方法能夠說是如今佔統治地位的引入方法。

如同 IE 與瀏覽器。這也是最能體現 CSS 特色的方法；

最能體現 DIV + CSS 中的內容離的思想，也最易改版維護，代碼看起來也是最美觀的一種。

第二：內部樣式表

這種方法的使用狀況要少的多，最長見得就是訪問量大的門戶網站。或者訪問量較大的企業網站的首頁。

與第一種方法比起來，優弊端也明顯。

優勢：速度快，全部的 CSS 控制都是針對本頁面標籤的，沒有多餘的 CSS 命令；再者不用外鏈 CSS 文件。直接在文檔中讀取樣式。

缺點：就是改版麻煩些，單個頁面顯得臃腫，CSS 不能被其餘 HTML 引用形成代碼量相對較多，維護也麻煩些採用這種方法的公司大多有錢，對他們來講用戶量是關鍵，他們不缺人進行復雜的維護工做。

第三：行內樣式

認爲 HTML 裏不能出現 CSS 命令。其實有時候沒有什麼大不了。好比通用性差，效果特殊，使用 CSS 命令較少，而且不常改動的地方，使用這種方法反而是很好的選擇。

第4、@import 引入方式

<style type="text/css">
@import url(my.css);
</style>

CSS Sprite 是什麼，談談這個技術的優缺點。

加速的關鍵，不是下降重量，而是減小個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無計算機統一都按 byte 計算。客戶端每顯示一張圖片都會向服務器發送請求。因此，圖片越多請求次數越多，形成延遲的可越大。

利用 CSS Sprites 能很好地減小了網頁的 http 請求，從而大大的提升了頁面的性能，這也是 CSS Sprites 的優勢，也是其被普遍傳播和應用的主要緣由；
CSS Sprites 能減小圖片的字節，曾經比較過屢次 3 張圖片合併成 1 張圖片的字節老是小於這 3 張圖片的和。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素名，從而提升了網頁的製做效率。
更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起方便。

誠然 CSS Sprites 是如此的強大，可是也存在一些不可忽視的缺點，以下：

在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內不沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容背景斷裂；
CSS Sprites 在開發的時候比較麻煩，你要經過 photoshop 或其餘工具測量計算每個背景單元的精確位是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的鬼哥用 RIA 開發了一個 CSS Sprites 樣式生成工具，雖然些使用上的不靈活，可是已經比 photoshop 測量來的方便多了，並且樣式直接生成，複製，拷貝就 OK！
CSS Sprites 在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的好不要動，這樣避免改動更多的 css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字加了，還要改動 css。

CSS Sprites 很是值得學習和應用，特別是頁面有一堆 ico（圖標）。總之不少時候你們要權衡一下再決定是否是應用 CSS Sprites。

以 CSS3 標準定義一個 webkit 內核瀏覽器識別的圓角（尺寸隨意）

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
 border-radius: 10px;。

優先級算法如何計算？內聯和 important 哪一個優先級高？

優先級就近原則，樣式定義最近者爲準
載入樣式以最後載入的定位爲準
優先級爲 !important > [ id > class > tag ]
Important 比內聯優先級高

css 的基本語句構成是？

回答：選擇器、屬性和屬性值。

若是讓你來製做一個訪問量很高的大型網站，你會如何來管理全部 CSS 文件、JS 與圖片？

回答：涉及到人手、分工、同步；

先期團隊必須肯定好全局樣式（globe.css），編碼模式 (utf-8) 等
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；
頁面進行標註（例如頁面模塊開始和結束）；
CSS 跟 HTML 分文件夾並行存放，命名都得統一（例如 style.css）
JS 分文件夾存放，命名以該 JS 功能爲準
圖片採用整合的 png8 格式文件使用，儘可能整合在一塊兒使用，方便未來的管理。

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？新增僞類有那些？

CSS 選擇符

id 選擇器（ #myid）
類選擇器（.myclassname）
標籤選擇器（div, h1, p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
後代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
僞類選擇器（a: hover, li: nth - child）

可繼承的樣式

font-size，font-family，color，ul，li，dl，dd，dt；

不可繼承的樣式

border padding margin width height
事實上，寬度也不是繼承的，而是若是你不指定寬度，那麼它就是 100%。因爲你子 DIV 並無指定寬度，那它就是 100%，也就是與父 DIV 同寬，但這與繼承無關，高度天然也沒有繼承一說。

優先級算法

優先級就近原則，同權重狀況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;
優先級爲: !important > id > class > tag , important 比內聯優先級高

CSS3 新增僞類舉例

:root 選擇文檔的根元素，等同於 html 元素
:empty 選擇沒有子元素的元素
:target 選取當前活動的目標元素
:not(selector) 選擇除 selector 元素意外的元素
:enabled 選擇可用的表單元素
:disabled 選擇禁用的表單元素
:checked 選擇被選中的表單元素
:after 選擇器在被選元素的內容後面插入內容
:before 選擇器在被選元素的內容前面插入內容
:nth-child(n) 匹配父元素下指定子元素，在全部子元素中排序第 n
:nth-last-child(n) 匹配父元素下指定子元素，在全部子元素中排序第 n，從後向前數
:nth-child(odd) 奇數
:nth-child(even) 偶數
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n，從後向前數
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 選擇被用戶選取的元素部分
:first-line 選擇元素中的第一行
:first-letter 選擇元素中的第一個字符

CSS3 有哪些新特性 ?

CSS3 實現圓角（border-radius:8px）
陰影（box-shadow:10px）
對文字加特效（text-shadow）
線性漸變（gradient）
旋轉、縮放、定位、傾斜

transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

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

一個滿屏品字佈局如何設計？

第一種方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>滿屏品字佈局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;/*此設置很是關鍵，由於默認的body，HTML高度爲0，因此後面設置的div的高度沒法用百分比顯示*/
        }       
        .header{
            height:50%; /*此步結合html,body高度爲100%，解決元素相對窗口的定位問題*/
            width: 50%;     
            background: #ccc;           
            margin:0 auto;
        }
        .main{
            width: 100%;
            height: 50%;
            background: #ddd;
        }
        .main .left,.main .right{
            float: left;/*採用float方式，對元素進行左右定位*/
            width:50%;/*此步解決元素相對窗口的定位問題*/
            height:100%;/*此步解決元素相對窗口的定位問題*/
            background: yellow;
        }
        .main .right{
            background: green;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

效果以下：

爲何要初始化 CSS 樣式 ?

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對 CSS 初始化每每會出現瀏覽器之間的頁面顯示差別。
初始化樣式會對 SEO 有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

初始化 CSS 樣式例子

html,
body {
  padding: 0; 
  margin: 0;
} 
...

collapse、overflow、float 這些特性相互疊加後會怎麼樣？

margin collapse 我以爲這裏的意思應該是 Collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合併成一個外邊距。

其中所說的 margin 毗鄰，能夠歸結爲如下兩點：

這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。
這些 margin 都處於普通流中。

兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。
浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其餘元素的 margin 摺疊.
建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊

請解釋一下CSS3 的 Flexbox（彈性盒佈局模型），以及適用場景？

http://www.ruanyifeng.com/blo...

任何一個容器均可以指定爲 Flex 佈局，行內元素也可使用 Flex 佈局。

注意：設爲 Flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效。

flex 佈局最經常使用的是什麼場景？

通常實現垂直居中是一件很麻煩的事，但 flex 佈局輕鬆解決。

.demo {
  display: flex;            
  justify-content: center;                    
  align-items: center;
}

用純 CSS 建立一個三角形的原理是什麼？

把上、左、右三條邊隱藏掉（顏色設爲 transparent）

#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

absolute 的 containing block(容器塊) 計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：

若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin，border 外的區域) 的最小矩形；
不然，則由這個祖先元素的 padding box 構成。
若是都找不到，則爲 initial containing block。

補充：

static / relative：簡單說就是它的父元素的內容框（即去掉 padding 的部分）
absolute: 向上找最近的定位爲 absolute / relative 的元素
fixed: 它的 containing block 一概爲根元素(html / body)，根元素也是 initial containing block

對 BFC 規範(塊級格式化上下文：blockformatting context)的理解？

W3C CSS 2.1 規範中的一個概念，它是一個獨立容器，決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

一個頁面是由不少個 Box 組成的，元素的類型和 display 屬性，決定了這個 Box 的類型。
不一樣類型的 Box，會參與不一樣的 Formatting Context（決定如何渲染文檔的容器），所以 Box 內的元素會以不一樣的方式渲染，也就是說 BFC 內部的元素和外部的元素不會互相影響。

用 position: absolute 跟用 float 有什麼區別嗎？

都是脫離標準流，只是 position: absolute 定位用的時候，位置能夠給的更精確(想放哪就放哪)，而 float 用的更簡潔，向右，左，兩個方向浮動，用起來就一句代碼。
還有就是 position: absolute 無論在哪一個標籤裏，均可以定位到任意位置，畢竟 top，left，bottom，right 均可以給正值或負值；
float 只是向左或向右浮動，不如 position: absolute 靈活，浮動後再想改變位置就要加各類 margin，padding 之類的經過間距的改變來改變位置，我自身以爲這樣的話用起來不方便，也不太好。
但在菜單欄，或者一些圖標的橫向排列時，用起來特別方便，一個 float 就解決了，並且每一個元素之間不會有任何間距(因此能夠用 float 消除元素間的距離)；

svg 與 convas 的區別？

svg 繪製出來的每個圖形的元素都是獨立的 DOM 節點，可以方便的綁定事件或用來修改，而 canvas 輸出的是一整幅畫布；
svg 輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會是真和鋸齒。而 canvas 輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒。

什麼時候應當時用 padding 和 margin ？

什麼時候應當使用 margin

須要在 border 外側添加空白時。
空白處不須要背景（色）時。
上下相連的兩個盒子之間的空白，須要相互抵消時。

如 15px + 20px 的 margin，將獲得 20px 的空白。

什麼時候應當時用 padding

須要在 border 內測添加空白時。
空白處須要背景（色）時。
上下相連的兩個盒子之間的空白，但願等於二者之和時。

如 15px + 20px 的 padding，將獲得 35px 的空白。

我的認爲：margin 是用來隔開元素與元素的間距；padding 是用來隔開元素與內容的間隔，讓內容（文字）與（包裹）元素之間有一段呼吸距離。

文字在超出長度時，如何實現用省略號代替 ? 超長長度的文字在省略顯示後，如何在鼠標懸停時，以懸浮框的形式顯示出所有信息 ?

注意：設置 width，overflow: hidden, white-space: nowrap (規定段落中的文本不進行換行), text-overflow: ellipsis，四個屬性缺一不可。這種寫法在全部的瀏覽器中都能正常顯示。

CSS 裏的 visibility 屬性有個 collapse 屬性值？在不一樣瀏覽器下有什麼區別？

Collapse

當在表格元素中使用時，此值可刪除一行或一列，可是它不會影響表格的佈局，被行或列佔據的空間會留給其餘內容使用。
若是此值被用在其餘的元素上，會呈現爲 hidden。
當一個元素的 visibility 屬性被設置成 collapse 值後，對於通常的元素，它的表現跟 hidden 是同樣的。
chrome中，使用 collapse 值和使用 hidden 沒有區別。
firefox，opera 和 IE，使用 collapse 值和使用 display：none 沒有什麼區別。

position 跟 display、overflow、float 這些特性相互疊加後會怎麼樣？

display 屬性規定元素應該生成的框的類型；
position 屬性規定元素的定位類型；
float 屬性是一種佈局方式，定義元素在哪一個方向浮動。
相似於優先級機制：position：absolute / fixed 優先級最高，有他們在時，float 不起做用，display 值須要調整。float 或者 absolute 定位的元素，只能是塊元素或表格。

對 BFC 規範(塊級格式化上下文：block formatting context) 的理解？

BFC 規定了內部的 Block Box 如何佈局。

定位方案：

內部的 Box 會在垂直方向上一個接一個放置。
Box 垂直方向的距離由 margin 決定，屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊。
每一個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。
BFC 的區域不會與 float box 重疊。
BFC 是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

計算 BFC 的高度時，浮動元素也會參與計算。

知足下列條件之一就可觸發 BFC：

一、根元素，即 html
二、float 的值不爲 none（默認）
三、overflow 的值不爲 visible（默認）
四、display 的值爲 inline-block、table-cell、table-caption
五、position 的值爲 absolute 或 fixed

瀏覽器是怎樣解析 CSS 選擇器的？

CSS 選擇器的解析是從右向左解析的。
若從左向右的匹配，發現不符合規則，須要進行回溯，會損失不少性能。
若從右向左匹配，先找到全部的最右節點，對於每個節點，向上尋找其父節點直到找到根元素或知足條件的匹配規則，則結束這個分支的遍歷。
兩種匹配規則的性能差異很大，是由於從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢後，須要將解析的結果與 DOM Tree 的內容一塊兒進行分析創建一棵 Render Tree，最終用來進行繪圖。
在創建 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要爲每一個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來肯定生成怎樣的 Render Tree。

元素豎向的百分比設定是相對於容器的高度嗎？

當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的。

全屏滾動的原理是什麼？用到了 CSS 的哪些屬性？

原理

有點相似於輪播，總體的元素一直排列下去，假設有 5 個須要展現的全屏頁面，那麼高度是 500%，只是展現 100%，剩下的能夠經過 transform 進行 y 軸定位，也能夠經過
margin-top 實現。
overflow：hidden；transition：all 1000ms ease；

什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的 IE ？

響應式網站設計( Responsive Web design ) 是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。
基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理。
頁面頭部必須有 meta 聲明的 viewport。

<meta name="viewport" content="」 width="device-width" initial-scale="1" maximum-scale="1" user-scalable="no"/>

視差滾動效果？

視差滾動（Parallax Scrolling）經過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢 來建立出使人驚歎的 3D 效果。

CSS3 實現。

優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器

jQuery 實現。

經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。優勢：能兼容到各個版本的，效果可控性好。缺點：開發起來對製做者要求高。

插件實現方式。

例如：parallax-scrolling，兼容性十分好。

::before 和 :after 中雙冒號和單冒號有什麼區別？解釋一下這 2 個僞元素的做用

單冒號 (:) 用於 CSS3 僞類，雙冒號 (::) 用於 CSS3 僞元素。
::before 就是以一個子元素的存在，定義在元素主體內容以前的一個僞元素。並不存在於 dom 之中，只存在在頁面之中。

:before 和 :after 這兩個僞元素，是在 CSS2.1 裏新出現的。
起初，僞元素的前綴使用的是單冒號語法，但隨着 Web 的進化，在 CSS3 的規範裏，僞元素的語法被修改爲使用雙冒號，成爲 ::before、 ::after 。

怎麼讓 Chrome 支持小於 12px 的文字？

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);  // 0.8 是縮放比例
}

讓頁面裏的字體變清晰，變細用 CSS 怎麼作？

-webkit-font-smoothing 在 window 系統下沒有起做用，可是在 IOS 設備上起做用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

多數顯示器默認頻率是 60Hz，即 1 秒刷新 60 次，因此理論上最小間隔爲：1/60＊1000ms ＝ 16.7ms。

有一個高度自適應的 div，裏面有兩個 div，一個高度 100px，如何讓另外一個填滿剩下的高度？

外層 div 使用 position：relative；
高度要求自適應的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp ？

png 是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式。

優勢是：壓縮比高，色彩好。大多數地方均可以用。

jpg 是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的不錯。在 www 上，被用來儲存和傳輸照片的格式。
gif 是一種位圖文件格式，以 8 位色重現真色彩的圖像。能夠實現動畫效果。
webp 格式是谷歌在 2010 年推出的圖片格式，壓縮率只有 jpg 的 2/3，大小比 png 小了 45%。缺點是壓縮的時間更久了，兼容性很差，目前谷歌和 opera 支持。

style 標籤寫在 body 後與 body 前有什麼區別？

頁面加載自上而下，固然是先加載樣式。

寫在 body 標籤後，因爲瀏覽器以逐行方式對 HTML 文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標籤）會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後從新渲染，在 windows 的 IE 下可能會出現 FOUC 現象（即樣式失效致使的頁面閃爍問題）

闡述一下CSS Sprites

將一個頁面涉及到的全部圖片都包含到一張大圖中去，而後利用 CSS 的 background-image，background-repeat，background-position 的組合進行背景定位。

利用 CSS Sprites 能很好地減小網頁的 http 請求，從而大大的提升頁面的性能；
CSS Sprites 能減小圖片的字節。

用 css 實現左側寬度自適應，右側固定寬度？

一、標準瀏覽器的方法

固然，以不折騰人爲標準的 w3c 標準早就爲咱們提供了製做這種自適應寬度的標準方法。

把 container 設爲 display: table 並指定寬度 100%；
而後把 main + sidebar 設爲 display: table-cell;
而後只給 sidebar 指定一個寬度，那麼 main 的寬度就變成自適應了。

代碼不多，並且不會有額外標籤。不過這是 IE7 及如下都無效的方法。

.container {
    display: table;
    width: 100%;
}
.main {
    display: table-cell;
}
.sidebar {
    display: table-cell;
    width: 300px;
}

二、固定區域浮動，自適應區域不設置寬度但設置 margin

.container {
    overflow: hidden;
    *zoom: 1;
}
.sidebar {
    float: right;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}
.footer {
    margin-top: 20px;
    background: #ccc;
}

其中，sidebar 讓它浮動，並設置了一個寬度；而 main 沒有設置寬度。

你們要注意 html 中必須使用 div 標籤，不要妄圖使用什麼 p 標籤來達到目的。由於 div 有個默認屬性，即若是不設置寬度，那它會自動填滿它的父標籤的寬度。這裏的 main 就是例子。

固然咱們不能讓它填滿了，填滿了它就不能和 sidebar 保持同一行了。咱們給它設置一個 margin。因爲 sidebar 在右邊，因此咱們設置 main 的 margin-right 值，值比 sidebar 的寬度大一點點——以便區分它們的範圍，例子中是 320。

假設 main 的默認寬度是 100%，那麼它設置了 margin 後，它的寬度就變成了 100% - 320，此時 main 發現本身的寬度能夠與 sidebar 擠在同一行了，因而它就上來了。
而寬度 100% 是相對於它的父標籤來的，若是咱們改變了它父標籤的寬度，那 main 的寬度也就會變——好比咱們把瀏覽器窗口縮小，那 container 的寬度就會變小，而 main 的寬度也就變小，但它的實際寬度 100% - 320 始終是不會變的。

這個方法看起來很完美，只要咱們記得清除浮動(這裏我用了最簡單的方法)，那 footer 也不會錯位。並且不管 main 和 sidebar 誰更長，都不會對佈局形成影響。

但實際上這個方法有個很老火的限制——html 中 sidebar 必須在 main 以前！
但我須要 sidebar 在 main 以後！由於個人 main 裏面纔是網頁的主要內容，我不想主要內容反而排在次要內容後面。
但若是 sidebar 在 main 以後，那上面的一切都會化爲泡影。

三、固定區域使用定位，自適應區域不設置寬度，但設置 margin

.container {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}

咦，好像不對，footer 怎麼仍是在那兒呢？怎麼沒有自動往下走呢？footer 說——我不給絕對主義者讓位！
其實這與 footer 無關，而是由於 container 對 sidebar 的無視形成的——你再長，我仍是沒感受。
看來這種定位方式只能知足 sidebar 本身，但對它的兄弟們卻毫無益處。

四、左邊浮動，右邊 overflow: hidden;

*{ margin:0; padding: 0; }
html,body{
   height: 100%;/*高度百分百顯示*/
}
#left {
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right {
    height: 100%;
    overflow: hidden;
    background-color: #eee;
}

第二種方法，我利用的是建立一個新的 BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。

BFC 就是一個相對獨立的佈局環境，它內部元素的佈局不受外面佈局的影響。
它能夠經過如下任何一種方式來建立：

float 的值不爲 none
position 的值不爲 static 或者 relative
display 的值爲 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個 overflow 的值不爲 visible

關於 BFC，在 w3c 裏是這樣描述的：在 BFC 中，每一個盒子的左外邊框緊挨着包含塊的左邊框（從右到左的格式化時，則爲右邊框緊挨）。
即便在浮動裏也是這樣的（儘管一個包含塊的邊框會由於浮動而萎縮），除非這個包含塊的內部建立了一個新的 BFC。
這樣，當咱們給右側的元素單首創建一個 BFC 時，它將不會緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。

問：浮動的原理和工做方式，會產生什麼影響呢，要怎麼處理？

工做方式：浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

影響

浮動會致使父元素沒法被撐開，影響與父元素同級的元素。
與該浮動元素同級的非浮動元素，若是是塊級元素，會移動到該元素下方，而塊級元素內部的行內元素會環繞浮動元素；而若是是內聯元素則會環繞該浮動元素。
與該元素同級的浮動元素，對於同一方向的浮動元素(同級)，兩個元素將會跟在碰到的浮動元素後面；而對於不一樣方向的浮動元素，在寬度足夠時，將分別浮動向不一樣方向，在寬度不一樣是將致使一方換行(換行與 HTML 書寫順序有關，後邊的將會浮動到下一行)。
浮動元素將被視做爲塊元素。
而浮動元素對於其父元素以外的元素，若是是非浮動元素，則至關於忽視該浮動元素，若是是浮動元素，則至關於同級的浮動元素。
而經常使用的清除浮動的方法，則如使用空標籤，overflow，僞元素等。

在使用基於浮動設計的 CSS 框架時，自會提供清除的方法，我的並不習慣使用浮動進行佈局。

對 CSS Grid 佈局的使用

5 分鐘學會 CSS Grid 佈局

rem、em、px、vh 與 vw 的區別？

1、 rem 的特色

rem 的大小是根據 html 根目錄下的字體大小進行計算的。
當咱們改變根目錄下的字體大小的時候，下面字體都改變。
rem 不只能夠設置字體的大小，也能夠設置元素寬、高等屬性。
rem 是 CSS3 新增的一個相對單位（root em，根em），這個單位與 em 區別在於使用 rem 爲元素設定字體大小時，仍然是相對大小，但相對的只是 HTML 根元素。

這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。
目前，除了 IE8 及更早版本外，全部瀏覽器均已支持 rem。
對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用 rem 設定的字體大小。

2、px 特色

px 像素（Pixel）。相對長度單位。像素 px 是相對於顯示器屏幕分辨率而言的。

3、em 特色

em 的值並非固定的；
em 會繼承父級元素的字體大小。
em 是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
任意瀏覽器的默認字體高都是 16px。

全部未經調整的瀏覽器通常都符合: 1em = 16px。那麼 12px = 0.75em，10px = 0.625em。
爲了簡化 font-size 的換算，須要在 css 中的 body 選擇器中聲明 Fontsize = 62.5%，這就使 em 值變爲 16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說只須要將你的原來的 px 數值除以 10，而後換上 em 做爲單位就好了。

4、vh 與 vw

視口