【乾貨分享】前端面試知識點錦集（CSS篇）——附答案

二、CSS部分

1、解釋一下CSS的盒子模型？

回答一：

a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度

b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

c、這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。

回答二：

盒子模型也有人稱為框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。

2、請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？

類型：基礎的選擇器、組合選擇器、屬性選擇器、偽類、偽元素

2.1、基礎的選擇器

2.2、組合選擇器

2.3、屬性選擇器

2.4、偽類

2.5、偽元素

3、請你說說CSS有什麼特殊性?（優先順序、計算特殊值）

優先順序

(1)、同類型，同級別的樣式後者先於前者

(2))、ID > 類樣式 > 標籤 > *

(3)、內聯>ID選擇器>偽類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式

(4)、具體 > 泛化的，特殊性即css優先順序

(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)

　　內嵌樣式：內嵌在元素中，<span stylex="color:red">span</span>

　　內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式

外聯樣式表：單獨存在一個css文件中，通過link引入或import導入的樣式

(6)、!important 權重最高，比 inline style 還要高

計算特殊性值

important > 內嵌 > ID > 類 > 標籤 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符

權重、特殊性計演算法：

CSS樣式選擇器分為4個等級，a、b、c、d

(1)、如果樣式是行內樣式（通過Style=「」定義），那麼a=1，1,0,0,0

(2)、b為ID選擇器的總數 0,1,0,0

(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數量。0,0,1,0

(4)、d為標籤、偽元素選擇器的數量 0,0,0,1

(5)、!important 權重最高，比 inline style 還要高

比如結果為：1093比1100，按位比較，從左到右，只要一位高於則立即勝出，否則繼續比較。

4、要動態改變層中內容可以使用的方法？

innerHTML，innerText

5、常見瀏覽器兼容性問題與解決方案？

(1)瀏覽器兼容問題一：不同瀏覽器的標籤默認的外補丁和內補丁不同

問題癥狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

解決方案：CSS里 *{margin:0;padding:0;}

備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

(2)瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大

問題癥狀:常見癥狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性

備註：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標籤，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

(3)瀏覽器兼容問題三：設置較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度

問題癥狀：IE6、7和遨遊里這個標籤的高度不受控制，超出自己設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註：這種情況一般出現在我們設置小圓角背景的標籤里。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小默認的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到默認的行高。

(4)瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float布局，又有橫行的margin的情況，IE6間距bug

問題癥狀：IE6里的間距比超過設置的間距

碰到幾率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，為了設置寬高，我們需要設置display:block;(除了input標籤比較特殊)。在用float布局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

(5) 瀏覽器兼容問題五：圖片默認有間距

問題癥狀：幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

解決方案：使用float屬性為img布局

備註：因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行里，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

(6) 瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設置一個標籤的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

(7)瀏覽器兼容問題七：透明度的兼容CSS設置

一般在ie中用的是filter:alpha(opacity=0);這個屬性來設置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對於兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現兼容

6、列出display的值並說明他們的作用？

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex

默認值：inline

none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間

inline： 指定對象為內聯元素。

block： 指定對象為塊元素。

list-item： 指定對象為列表項目。

inline-block： 指定對象為內聯塊元素。（CSS2）

table： 指定對象作為塊元素級的表格。類同於html標籤<table>（CSS2）

inline-table： 指定對象作為內聯元素級的表格。類同於html標籤<table>（CSS2）

table-caption： 指定對象作為表格標題。類同於html標籤<caption>（CSS2）

table-cell： 指定對象作為表格單元格。類同於html標籤<td>（CSS2）

table-row： 指定對象作為表格行。類同於html標籤<tr>（CSS2）

table-row-group： 指定對象作為表格行組。類同於html標籤<tbody>（CSS2）

table-column： 指定對象作為表格列。類同於html標籤<col>（CSS2）

table-column-group： 指定對象作為表格列組顯示。類同於html標籤<colgroup>（CSS2）

table-header-group： 指定對象作為表格標題組。類同於html標籤<thead>（CSS2）

table-footer-group： 指定對象作為表格腳註組。類同於html標籤<tfoot>（CSS2）

run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3）

box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

inline-box： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

inline-flexbox： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

inline-flex： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

註：紅色加粗字體為display常用的取值

• 如果display設置為none， float及 position屬性定義將不生效；
• 如果 position既不是static也不是relative或者 float不是none或者元素是根元素，當display:inline-table時，display的計算值為table；當display:inline | inline-block | run-in | table-* 系時，display的計算值為block，其它情況為指定值；
• IE6,7支持inline元素轉換成inline-block，但不支持block元素轉換成inline-block，所以非inline元素在IE6,7下要轉換成inline-block，需先轉換成inline，然後觸發hasLayout，以此來獲得和inline-block類似的效果；你可以這樣：
• 全兼容的inline-block：

div {

display: inline-block;

*display: inline;

*zoom: 1;

}

Basic Support包含值：none | inline | block | list-item | inline-block

table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group

IE6,7只支持inline元素設置為inline-block，其它類型元素均不可以

7、如何居中div, 如何居中一個浮動元素?

(1)、非浮動元素居中：可以設置 margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等

(2)、浮動元素居中:

方法一:設置當前div的寬度，然後設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時左浮動，然後父元素相對左移動50%，再然後子元素相對左移動-50%。

方法三:position定位等等。

8、CSS中 link 和@import 的區別是？

(1)、link屬於HTML標籤，而@import是CSS提供的;

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

(3)、import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4)、link方式的樣式的權重 高於@import的權重.

9、請列舉幾種清除浮動的方法(至少兩種)?

(1)、父級div定義 height

原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

優點：簡單、代碼少、容易掌握

缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

建議：不推薦使用，只建議高度固定的布局時使用

(2)、結尾處加空div標籤 clear:both

原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義 偽類:after 和 zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。

建議：推薦使用，建議定義公共類，以減少CSS代碼。

(4)、父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

(5)、父級div定義 overflow:auto

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度

優點：簡單、代碼少、瀏覽器支持好

缺點：內部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

10、block，inline和inlinke-block細節對比？

? display:block

a、block元素會獨佔一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。

b、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨佔一行。

c、block元素可以設置margin和padding屬性。

? display:inline

a、inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。

b、inline元素設置width,height屬性無效。

c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

? display:inline-block

a、簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之後的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

補充說明

a、一般我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。

b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內聯元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

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

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

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

12、說說浮動元素會引起的問題和你的解決辦法？

問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素會跟隨其後

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決問題(2)、(3)，對於問題(1)，添加如下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

(1)、額外標籤法，<div stylex="clear:both;"></div>（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）

(2)、使用after偽類

#parent:after{

　　content:" ";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

}

(3)、浮動外部元素

(4)、設置`overflow`為`hidden`或者auto

13、你有哪些性能優化的方法？

回答一：

（1）、減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片伺服器。

（2）、前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變數保存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數

（3）、用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。

（4）、當需要設置的樣式很多時設置className而不是直接操作style。

（5）、少用全局變數、緩存DOM節點查找的結果。減少IO讀取操作。

（6）、避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

（7）、圖片預載入，將樣式表放在頂部，將腳本放在底部 加上時間戳。

回答二：

(1)、減少HTTP請求次數

(2)、使用CDN

(3)、避免空的src和href

(4)、為文件頭指定Expires

(5)、使用gzip壓縮內容

(6)、把CSS放到頂部

(7)、把JS放到底部

(8)、避 免使用CSS表達式

(9)、將CSS和JS放到外部文件中

(10)、避免跳轉

(11)、可緩存的AJAX

(12)、使用GET來完成AJAX請求

14、為什麼要初始化CSS樣式？

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

15、解釋下浮動和它的工作原理？清除浮動的技巧？

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

(1)、使用空標籤清除浮動。

這種方法是在所有浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。

(2)、使用overflow。

給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

(3)、使用after偽對象清除浮動。

該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；

16、CSS樣式表根據所在網頁的位置，可分為哪幾種樣式表？

行內樣式表，內嵌樣式表，外部樣式表

17、談談你對CSS中刻度的認識？

在CSS中刻度是用於設置元素尺寸的單位。

a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0

b、一些屬性可能允許有負長度值，或者有一定的範圍限制。如果不支持負長度值，那應該變換到能夠被支持的最近的一個長度值。

c、長度單位包括：相對單位和絕對單位。

相對長度單位有： em, ex, ch, rem, vw, vh, vmax, vmin

絕對長度單位有： cm, mm, q, in, pt, pc, px

絕對長度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

文本相對長度單位：em

相對長度單位是相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

文本相對長度單位：rem

rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數

只相對於根元素的大小

瀏覽器的默認字體大小為16像素，瀏覽器默認樣式也稱為user agent stylesheet，就是所有瀏覽器內置的默認樣式，多數是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。

18、請你說說em與rem的區別？

rem

rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數

只相對於根元素的大小

rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。

作用：利用rem可以實現簡單的響應式布局，可以利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕解析度變化時讓元素也變化，以前的天貓tmall就使用這種辦法

em

文本相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸(默認16px)。(相對父元素的字體大小倍數)

em（font size of the element）是指相對於父元素的字體大小的單位。它與rem之間其實很相似，區別在。（相對是的HTML元素的字體大，默認16px）

em與rem的重要區別：它們計算的規則一個是依賴父元素另一個是依賴根元素計算

19、請你說說box-sizing屬性的的用法？

設置或檢索對象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內。對象的實際寬度等於設置的width值和border、padding之和，即 ( Element width = width + border + padding，但佔有頁面位置還要加上margin ) 此屬性表現為標準模式下的盒模型。

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

20、瀏覽器標準模式和怪異模式之間的區別是什麼？

在「標準模式」(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在「怪異模式」(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計、並未嚴格遵循 W3C 標準的網頁而產生的一種頁面渲染模式。瀏覽器基於頁面中文件類型描述的存在以決定採用哪種渲染模式；如果存在一個完整的`DOCTYPE`則瀏覽器將會採用標準模式，而如果它缺失則瀏覽器將會採用怪異模式。

強烈建議閱讀加深理解：[怪異模式（Quirks Mode）對 HTML 頁面的影響](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，這裡列下瀏覽器標準模式和怪異模式的區別：

（1）盒模型：

在怪異模式下，盒模型為IE盒模型而非標準模式下的W3C 盒模型：在 IE 盒模型中，

box width = content width + padding left + padding right + border left + border right，

box height = content height + padding top + padding bottom + border top + border bottom。

而在 W3C 標準的盒模型中，box 的大小就是 content 的大小。

（2）圖片元素的垂直對齊方式:

對於`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 屬性默認取值為`baseline`。而當`inline`元素的內容只有圖片時，如`table`的單元格`table-cell`。在 IE Quirks Mode 下，`table`單元格中的圖片的 `vertical-align` 屬性默認為`bottom`，因此，在圖片底部會有幾像素的空間。

（3）`<table>`元素中的字體:

CSS 中，描述`font`的屬性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對於`table` 元素，字體的某些屬性將不會從`body`或其他封閉元素繼承到`table`中，特別是 `font-size`屬性。

（4） 內聯元素的尺寸:

在 IE Standards Mode 下，non-replaced inline 元素無法自定義大小，而在 IE Quirks Mode 下，定義這些元素的`width`和`height` 屬性，能夠影響該元素顯示的大小尺寸。

（5） 元素的百分比高度:

a、CSS 中對於元素的百分比高度規定如下，百分比為元素包含塊的高度，不可為負值。如果包含塊的高度沒有顯式給出，該值等同於「auto」（即取決於內容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。

b、當一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決於內容的變化，而在 Quirks Mode 下，百分比高度則被正確應用。

（6） 元素溢出的處理：

在 IE Standard Mode 下，`overflow`取默認值 `visible`，即溢出可見，這種情況下，溢出內容不會被裁剪，呈現在元素框外。而在 Quirks Mode 下，該溢出被當做擴展`box`來對待，即元素的大小由其內容決定，溢出不會被裁剪，元素框自動調整，包含溢出內容。

另外可參考閱讀：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

21、怪異Quirks模式是什麼，它和標準Standards模式有什麼區別？

從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基於舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的介面不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個「參數」，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將採用對CSS支持更好的布局，而如果沒有，則採用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

（還有很多，答出什麼不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）

22、說說你對邊距摺疊的理解?

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）

相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係

垂直方向外邊距合併計算:

a、參加摺疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。

b、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。

c、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。

23、內聯與塊級標籤有何區別？

Html中的標籤默認主要分為兩大類型，一類為塊級元素，另一類是行內元素，許多人也把行內稱為內聯，所以叫內聯元素，其實就是一個意思。為了很好的布局，必須理解它們間的區別。

24、說說隱藏元素的方式有哪些？

a、使用CSS的display:none，不會佔有原來的位置

b、使用CSS的visibility:hidden，會佔有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會佔有原來的位置

25、為什麼重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

每種瀏覽器都有一套默認的樣式表，即user agent stylesheet，網頁在沒有指定的樣式時，按瀏覽器內置的樣式表來渲染。這是合理的，像word中也有一些預留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認樣式是不同的。但這樣會有很多兼容問題。

a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。

b、使用CSSReset可以將所有瀏覽器默認樣式設置成一樣。

c、normalize：也許有些cssreset過於簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經引用該css來重置瀏覽器默認樣式，比普通的cssreset要精細一些，保留瀏覽器有用的默認樣式，支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。

天貓 使用的css reset重置瀏覽器默認樣式：

@charset "gb2312";

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {

margin: 0;

padding: 0

}

body, button, input, select, textarea {

font: 12px "microsoft yahei";

line-height: 1.5;

-ms-overflow-style: scrollbar

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%

}

ul, ol {

list-style: none

}

a {

text-decoration: none;

cursor:pointer

}

a:hover {

text-decoration: underline

}

img {

border: 0

}

button, input, select, textarea {

font-size: 100%

}

table {

border-collapse: collapse;

border-spacing: 0

}

.clear {

clear:both

}

.fr {

float:right

}

.fl {

float:left

}

.block {

display:block;

text-indent:-999em

}

26、談談你對BFC與IFC的理解？(是什麼，如何產生，作用)

(1)、什麼是BFC與IFC

a、BFC（Block Formatting Context）即「塊級格式化上下文」， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態。一個框在常規流中必須屬於一個格式化上下文，你可以把BFC想像成一個大箱子，箱子外邊的元素將不與箱子內的元素產生作用。

b、BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用範圍。

c、在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬於這兩者。並且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 里格式化。

(2)、如何產生BFC

當一個HTML元素滿足下麵條件的任何一點，都可以產生Block Formatting Context：

a、float的值不為none

b、overflow的值不為visible

c、display的值為table-cell, table-caption, inline-block中的任何一個

d、position的值不為relative和static

CSS3觸發BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發，float也是一種定位方式。

(3)、BFC的作用與特點

a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素後面跟著一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態，當float不為none時，position為absolute、fixed時元素將脫離標準流。

27、說說你對頁面中使用定位(position)的理解？

使用css布局position非常重要，語法如下：

position：static | relative | absolute | fixed | center | page | sticky

默認值：static，center、page、sticky是CSS3中新增加的值。

(1)、static

可以認為靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。

(2)、relative

相對定位，對象遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

(3)、absolute

a、絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其他任何margin摺疊。

b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。

(4)、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現滾動條時，對象不會隨著滾動。

(5)、center

與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

(6)、page

與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，否則取決於每個absolute模式。（CSS3）

(7)、sticky

對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）

28、如何解決多個元素重疊問題？

使用z-index屬性可以設置元素的層疊順序

z-index屬性

語法：z-index: auto | <integer>

默認值：auto

適用於：定位元素。即定義了position為非static的元素

取值：

auto： 元素在當前層疊上下文中的層疊級別是0。元素不會創建新的局部層疊上下文，除非它是根元素。

整數： 用整數值來定義堆疊級別。可以為負值。 說明：

檢索或設置對象的層疊順序。

z-index用於確定元素在當前層疊上下文中的層疊級別，並確定該元素是否創建新的局部層疊上下文。

當多個元素層疊在一起時，數字大者將顯示在上面。

29、頁面布局的方式有哪些？

方式：雙飛翼、多欄、彈性、流式、瀑布流、響應式布局

（1）、雙飛翼布局

經典三列布局，也叫做聖杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點：

a、三列布局，中間寬度自適應，兩邊定寬；

b、中間欄要在瀏覽器中優先展示渲染；

c、允許任意列的高度最高；

d、要求只用一個額外的DIV標籤；

e、要求用最簡單的CSS、最少的HACK語句；

在不增加額外標籤的情況下，聖杯布局已經非常完美，聖杯布局使用了相對定位，以後布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。

(2)、多欄布局

a、欄柵格系統：就是利用浮動實現的多欄布局，在bootstrap中用的非常多。

b、多列布局：柵格系統並沒有真正實現分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊

(3)、彈性布局（Flexbox）

CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這裡簡稱為Flex。

Flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。

綜合而言，Flexbox布局功能主要具有以下幾點：

a、屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局；

b、可以指定伸縮項目沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；

c、可以指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之後或之間；

d、可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；

e、可以控制元素在頁面上的布局方向；

f、可以按照不同於文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先後順序重排伸縮項目順序。

(4)、瀑布流布局

瀑布流布局是流式布局的一種。是當下比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入數據塊並附加至當前尾部。最早採用此布局的網站是Pinterest，逐漸在國內流行開來。

優點

a、有效的降低了界面複雜度，節省了空間：我們不再需要臃腫複雜的頁碼導航鏈接或按鈕了。

b、對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低於點擊鏈接或按鈕。

c、更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂於沉浸在探索與瀏覽當中。

缺點

a、有限的用例：

無限滾動的方式只適用於某些特定類型產品當中一部分特定類型的內容。

例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。

b、額外的複雜度：

那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定製化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。

c、再見了，頁腳：

如果使用了比較典型的無限滾動載入模式，這就意味著你可以和頁腳說拜拜了。

最好考慮一下頁腳對於你的網站，特別是用戶的重要性;如果其中確實有比較重要的內容或鏈接，那麼最好換一種更傳統和穩妥的方式。

千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動載入的內容突然出現而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發憤怒。

d、集中在一頁當中動態載入數據，與一頁一頁的輸出相比，究竟那種方式更利於SEO，這是你必須考慮的問題。對於某些以類型網站來說，在這方面進行冒險是很不划算的。

e、關於頁面數量的印象：

其實站在用戶的角度來看，這一點並非負面;不過，如果對於你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那麼單頁無限滾動的方式對你並不適用。

(5)、流式布局（Fluid）

固定布局和流式布局在網頁設計中最常用的兩種布局方式。固定布局能呈現網頁的原始設計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端解析度的大小來進行合理的顯示。

(6)、響應式布局

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。

優點

a、面對不同解析度設備靈活性強

b、能夠快捷解決多設備顯示適應問題

缺點

a、兼容各種設備工作量大，效率低下

b、代碼累贅，會出現隱藏無用的元素，載入時間加長

c、其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果

d、一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況

30、overfloa:hidden是否形成新的塊級格式化上下文？

會形成，觸發BFC的條件有：

- float的值不為none。

- overflow的值不為visible。

- display的值為table-cell, table-caption, inline-block 中的任何一個。

- position的值不為relative 和static。

博客數據來源聲明： 本博客大部分數據來源於各大網站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站，還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人自己整理添加，添加的內容主要是本人認為比較重要知識點，面試時可能會問到的題目，自己整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎大家批評指正或補充更好的答案。好讓我及時更正，以免誤導其他人。本博客僅提供參考作用。

【乾貨分享】前端面試知識點錦集02（CSS篇）——附答案

標籤：important 瀏覽器兼容 內聯 傳統 dbf 混淆 min sig 理論

原文地址：http://www.cnblogs.com/SeeYouBug/p/6189115.html

推薦閱讀：