【干货分享】前端面试知识点锦集02（CSS篇）——附答案
二、CSS部分
1、解釋一下CSS的盒子模型？
回答一：
a、標(biāo)準(zhǔn)的css盒子模型：寬度=內(nèi)容的寬度+邊框的寬度+加上內(nèi)邊具的寬度
b、網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
c、這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶?#xff08;箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網(wǎng)頁設(shè)計中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。
回答二：
盒子模型也有人稱為框模型，HTML中的多數(shù)元素都會在瀏覽器中生成一個矩形的區(qū)域，每個區(qū)域包含四個組成部分，從外向內(nèi)依次是：外邊距（Margin）、邊框（Border）、內(nèi)邊距（Padding）和內(nèi)容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型，加上了doctype聲明，讓所有瀏覽器都會采用標(biāo)準(zhǔn) w3c 盒子模型去解釋你的盒子。
2、請你說說CSS選擇器的類型有哪些，并舉幾個例子說明其用法？
類型：基礎(chǔ)的選擇器、組合選擇器、屬性選擇器、偽類、偽元素
2.1、基礎(chǔ)的選擇器
2.2、組合選擇器
2.3、屬性選擇器
2.4、偽類
2.5、偽元素
3、請你說說CSS有什么特殊性?（優(yōu)先級、計算特殊值）
優(yōu)先級
(1)、同類型，同級別的樣式后者先于前者
(2))、ID > 類樣式 > 標(biāo)簽 > *
(3)、內(nèi)聯(lián)>ID選擇器>偽類>屬性選擇器>類選擇器>標(biāo)簽選擇器>通用選擇器(*)>繼承的樣式
(4)、具體 > 泛化的，特殊性即css優(yōu)先級
(5)、近的 > 遠(yuǎn)的 (內(nèi)嵌樣式 > 內(nèi)部樣式表 > 外聯(lián)樣式表)
內(nèi)嵌樣式：內(nèi)嵌在元素中，<span style="color:red">span</span>
內(nèi)部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
? ? ? 外聯(lián)樣式表：單獨存在一個css文件中，通過link引入或import導(dǎo)入的樣式
(6)、!important 權(quán)重最高，比 inline style 還要高
計算特殊性值
important > 內(nèi)嵌 > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符
權(quán)重、特殊性計算法：
CSS樣式選擇器分為4個等級，a、b、c、d
(1)、如果樣式是行內(nèi)樣式（通過Style=“”定義），那么a=1，1,0,0,0
(2)、b為ID選擇器的總數(shù) 0,1,0,0
(3)、c為屬性選擇器，偽類選擇器和class類選擇器的數(shù)量。0,0,1,0
(4)、d為標(biāo)簽、偽元素選擇器的數(shù)量 0,0,0,1
(5)、!important 權(quán)重最高，比 inline style 還要高
比如結(jié)果為：1093比1100，按位比較，從左到右，只要一位高于則立即勝出，否則繼續(xù)比較。
4、要動態(tài)改變層中內(nèi)容可以使用的方法？
innerHTML，innerText
5、常見瀏覽器兼容性問題與解決方案？
(1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補(bǔ)丁是0。
(2)瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br />碰到頻率：90%（稍微復(fù)雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用div float實現(xiàn)的，橫向的間距設(shè)置如果用margin實現(xiàn)，這就是一個必然會碰到的兼容性問題。
(3)瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高。
(4)瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內(nèi)屬性標(biāo)簽，所以我們再加上display:inline的話，它的高寬就不可設(shè)了。這時候我們還需要在display:inline后面加入display:talbe。
(5) 瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是正道。（我的一個學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）
(6) 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個值（如300px）時。容器的高度為300px；當(dāng)內(nèi)容高度大于這個值時，容器高度被撐高，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題。
(7)瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
一般在ie中用的是filter:alpha(opacity=0);這個屬性來設(shè)置div或者是塊級元素的透明度，而在firefox中，一般就是直接使用opacity:0,對于兼容的，一般的做法就是在書寫css樣式的將2個都寫上就行，就能實現(xiàn)兼容
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
默認(rèn)值：inline
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間?
inline： 指定對象為內(nèi)聯(lián)元素。?
block： 指定對象為塊元素。?
list-item： 指定對象為列表項目。?
inline-block： 指定對象為內(nèi)聯(lián)塊元素。（CSS2）?
table： 指定對象作為塊元素級的表格。類同于html標(biāo)簽<table>（CSS2）?
inline-table： 指定對象作為內(nèi)聯(lián)元素級的表格。類同于html標(biāo)簽<table>（CSS2）?
table-caption： 指定對象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）?
table-cell： 指定對象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）?
table-row： 指定對象作為表格行。類同于html標(biāo)簽<tr>（CSS2）?
table-row-group： 指定對象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）?
table-column： 指定對象作為表格列。類同于html標(biāo)簽<col>（CSS2）?
table-column-group： 指定對象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）?
table-header-group： 指定對象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）?
table-footer-group： 指定對象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）?
run-in： 根據(jù)上下文決定對象是內(nèi)聯(lián)對象還是塊級對象。（CSS3）?
box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
inline-box： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）?
flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
inline-flexbox： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）?
flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）?
inline-flex： 將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
注：紅色加粗字體為display常用的取值
- 如果display設(shè)置為none，?float及?position屬性定義將不生效；
- 如果?position既不是static也不是relative或者?float不是none或者元素是根元素，當(dāng)display:inline-table時，display的計算值為table；當(dāng)display:inline | inline-block | run-in | table-* 系時，display的計算值為block，其它情況為指定值；
-
IE6,7支持inline元素轉(zhuǎn)換成inline-block，但不支持block元素轉(zhuǎn)換成inline-block，所以非inline元素在IE6,7下要轉(zhuǎn)換成inline-block，需先轉(zhuǎn)換成inline，然后觸發(fā)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元素設(shè)置為inline-block，其它類型元素均不可以
7、如何居中div, 如何居中一個浮動元素?
(1)、非浮動元素居中：可以設(shè)置 margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中:
方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對左移動-50%。
方法三:position定位等等。
8、CSS中 link 和@import 的區(qū)別是？
(1)、link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;
(4)、link方式的樣式的權(quán)重 高于@import的權(quán)重.
9、請列舉幾種清除浮動的方法(至少兩種)?
(1)、父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優(yōu)點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題
建議：不推薦使用，只建議高度固定的布局時使用
(2)、結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
(3)、父級div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題
優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
(4)、父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。
(5)、父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度
優(yōu)點：簡單、代碼少、瀏覽器支持好
缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。
10、block，inline和inlinke-block細(xì)節(jié)對比？
? display:block
a、block元素會獨占一行，多個block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。
b、block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。
c、block元素可以設(shè)置margin和padding屬性。
? display:inline
a、inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
b、inline元素設(shè)置width,height屬性無效。
c、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。
? display:inline-block
a、簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
補(bǔ)充說明
a、一般我們會用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已。
b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象。
11、什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？
優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。
12、說說浮動元素會引起的問題和你的解決辦法？
問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用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)、額外標(biāo)簽法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
(2)、使用after偽類
#parent:after{
content:" ";
height:0;
visibility:hidden;
display:block;
clear:both;
}
(3)、浮動外部元素
(4)、設(shè)置`overflow`為`hidden`或者auto
13、你有哪些性能優(yōu)化的方法？
回答一：
（1）、減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
（2）、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)
（3）、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4）、當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。
（5）、少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取操作。
（6）、避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。
（7）、圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。
回答二：
(1)、減少HTTP請求次數(shù)
(2)、使用CDN
(3)、避免空的src和href
(4)、為文件頭指定Expires
(5)、使用gzip壓縮內(nèi)容
(6)、把CSS放到頂部
(7)、把JS放到底部
(8)、避 免使用CSS表達(dá)式
(9)、將CSS和JS放到外部文件中
(10)、避免跳轉(zhuǎn)
(11)、可緩存的AJAX
(12)、使用GET來完成AJAX請求
14、為什么要初始化CSS樣式？
因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）
15、解釋下浮動和它的工作原理？清除浮動的技巧？
浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標(biāo)簽清除浮動。
這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
(2)、使用overflow。
給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
(3)、使用after偽對象清除浮動。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實際高出若干像素；
16、CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？
行內(nèi)樣式表，內(nèi)嵌樣式表，外部樣式表
17、談?wù)勀銓SS中刻度的認(rèn)識？
在CSS中刻度是用于設(shè)置元素尺寸的單位。
a、特殊值0可以省略單位。例如：margin:0px可以寫成margin:0
b、一些屬性可能允許有負(fù)長度值，或者有一定的范圍限制。如果不支持負(fù)長度值，那應(yīng)該變換到能夠被支持的最近的一個長度值。
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
相對長度單位是相對于當(dāng)前對象內(nèi)文本的字體尺寸，如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。(相對父元素的字體大小倍數(shù))
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計算值的倍數(shù)
只相對于根元素的大小
瀏覽器的默認(rèn)字體大小為16像素，瀏覽器默認(rèn)樣式也稱為user agent stylesheet，就是所有瀏覽器內(nèi)置的默認(rèn)樣式，多數(shù)是可以被修改的，但chrome不能直接修改，可以被用戶樣式覆蓋。
18、請你說說em與rem的區(qū)別？
rem
rem是CSS3新增的一個相對單位（root em，根em），相對于根元素(即html元素)font-size計算值的倍數(shù)
只相對于根元素的大小
rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位。
作用：利用rem可以實現(xiàn)簡單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實現(xiàn)當(dāng)屏幕分辨率變化時讓元素也變化，以前的天貓tmall就使用這種辦法
em
文本相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對父元素的字體大小倍數(shù))
em（font size of the element）是指相對于父元素的字體大小的單位。它與rem之間其實很相似，區(qū)別在。（相對是的HTML元素的字體大，默認(rèn)16px）
em與rem的重要區(qū)別：它們計算的規(guī)則一個是依賴父元素另一個是依賴根元素計算
19、請你說說box-sizing屬性的的用法？
設(shè)置或檢索對象的盒模型組成模式
a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有頁面位置還要加上margin ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
b、box-sizing:border-box： padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。
20、瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個完整的`DOCTYPE`則瀏覽器將會采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會采用怪異模式。
強(qiáng)烈建議閱讀加深理解：[怪異模式（Quirks Mode）對 HTML 頁面的影響](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，這里列下瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別：
（1）盒模型：
在怪異模式下，盒模型為IE盒模型而非標(biāo)準(zhǔn)模式下的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 標(biāo)準(zhǔn)的盒模型中，box 的大小就是 content 的大小。
（2）圖片元素的垂直對齊方式:
對于`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為`baseline`。而當(dāng)`inline`元素的內(nèi)容只有圖片時，如`table`的單元格`table-cell`。在 IE Quirks Mode 下，`table`單元格中的圖片的 `vertical-align` 屬性默認(rèn)為`bottom`，因此，在圖片底部會有幾像素的空間。
（3）`<table>`元素中的字體:
CSS 中，描述`font`的屬性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述屬性都是可以繼承的。而在 IE Quirks Mode 下，對于`table` 元素，字體的某些屬性將不會從`body`或其他封閉元素繼承到`table`中，特別是 `font-size`屬性。
（4） 內(nèi)聯(lián)元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素?zé)o法自定義大小，而在 IE Quirks Mode 下，定義這些元素的`width`和`height` 屬性，能夠影響該元素顯示的大小尺寸。
（5） 元素的百分比高度:
a、CSS 中對于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負(fù)值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時使用。
b、當(dāng)一個元素使用百分比高度時，在 IE Standards Mode 下，高度取決于內(nèi)容的變化，而在 Quirks Mode 下，百分比高度則被正確應(yīng)用。
（6） 元素溢出的處理：
在 IE Standard Mode 下，`overflow`取默認(rèn)值 `visible`，即溢出可見，這種情況下，溢出內(nèi)容不會被裁剪，呈現(xiàn)在元素框外。而在 Quirks Mode 下，該溢出被當(dāng)做擴(kuò)展`box`來對待，即元素的大小由其內(nèi)容決定，溢出不會被裁剪，元素框自動調(diào)整，包含溢出內(nèi)容。
另外可參考閱讀：https://www.cs.tut.fi/~jkorpela/quirks-mode.html
21、怪異Quirks模式是什么，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別？
從IE6開始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？
在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數(shù)和分支，即當(dāng)某個參數(shù)為真時，我們就使用新功能，而如果這個參數(shù) 不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當(dāng)成了這個“參數(shù)”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設(shè)置行內(nèi)元素的高寬：在Standards模式下，給<span>等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗遇到的，還是說都是看文章看的，甚至完全不知道。）
22、說說你對邊距折疊的理解?
外邊距折疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距（margin）
相鄰：沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系
垂直方向外邊距合并計算:
a、參加折疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
b、參與折疊的 margin 都是負(fù)值：取的是其中絕對值較大的，然后，從 0 位置，負(fù)向位移。
c、參與折疊的 margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
23、內(nèi)聯(lián)與塊級標(biāo)簽有何區(qū)別？
Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級元素，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素，其實就是一個意思。為了很好的布局，必須理解它們間的區(qū)別。
24、說說隱藏元素的方式有哪些？
a、使用CSS的display:none，不會占有原來的位置
b、使用CSS的visibility:hidden，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會占有原來的位置
25、為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式？
每種瀏覽器都有一套默認(rèn)的樣式表，即user agent stylesheet，網(wǎng)頁在沒有指定的樣式時，按瀏覽器內(nèi)置的樣式表來渲染。這是合理的，像word中也有一些預(yù)留樣式，可以讓我們的排版更美觀整齊。不同瀏覽器甚至同一瀏覽器不同版本的默認(rèn)樣式是不同的。但這樣會有很多兼容問題。
a、最簡單的辦法：（不推薦使用）*{margin: 0;padding: 0;}。
b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。
c、normalize：也許有些cssreset過于簡單粗暴，有點傷及無辜，normalize是另一個選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內(nèi)容、表單和表格都進(jìn)行了一般化。
天貓 使用的css reset重置瀏覽器默認(rèn)樣式：
@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、談?wù)勀銓FC與IFC的理解？(是什么，如何產(chǎn)生，作用)
(1)、什么是BFC與IFC
a、BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)。一個框在常規(guī)流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。
b、BFC是W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時候，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進(jìn)行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。
c、在普通流中的 Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。
(2)、如何產(chǎn)生BFC
當(dāng)一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生Block Formatting Context：
a、float的值不為none
b、overflow的值不為visible
c、display的值為table-cell, table-caption, inline-block中的任何一個
d、position的值不為relative和static
CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static，relative的情況下觸發(fā)，float也是一種定位方式。
(3)、BFC的作用與特點
a、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋
如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)，當(dāng)float不為none時，position為absolute、fixed時元素將脫離標(biāo)準(zhǔn)流。
27、說說你對頁面中使用定位(position)的理解？
使用css布局position非常重要，語法如下：
position：static | relative | absolute | fixed | center | page | sticky
默認(rèn)值：static，center、page、sticky是CSS3中新增加的值。
(1)、static
可以認(rèn)為靜態(tài)的，默認(rèn)元素都是靜態(tài)的定位，對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用，也就是使用left，right，bottom，top將不會生效。
(2)、relative
相對定位，對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進(jìn)行偏移時不會影響常規(guī)流中的任何元素。
(3)、absolute
a、絕對定位，對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
b、元素定位參考的是離自身最近的定位祖先元素，要滿足兩個條件，第一個是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果沒有則選擇body為對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值為非static都行。
(4)、fixed
固定定位，與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。
(5)、center
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
(6)、page
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）
(7)、sticky
對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）
28、如何解決多個元素重疊問題？
使用z-index屬性可以設(shè)置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認(rèn)值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto： 元素在當(dāng)前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。
整數(shù)： 用整數(shù)值來定義堆疊級別。可以為負(fù)值。 說明：
檢索或設(shè)置對象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。
當(dāng)多個元素層疊在一起時，數(shù)字大者將顯示在上面。
29、頁面布局的方式有哪些？
方式：雙飛翼、多欄、彈性、流式、瀑布流、響應(yīng)式布局
（1）、雙飛翼布局
經(jīng)典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個布局模型概念，在國內(nèi)最早是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點：
a、三列布局，中間寬度自適應(yīng)，兩邊定寬；
b、中間欄要在瀏覽器中優(yōu)先展示渲染；
c、允許任意列的高度最高；
d、要求只用一個額外的DIV標(biāo)簽；
e、要求用最簡單的CSS、最少的HACK語句；
在不增加額外標(biāo)簽的情況下，圣杯布局已經(jīng)非常完美，圣杯布局使用了相對定位，以后布局是有局限性的，而且寬度控制要改的地方也多。在淘寶UED（User Experience Design）探討下，增加多一個div就可以不用相對布局了，只用到了浮動和負(fù)邊距，這就是我們所說的雙飛翼布局。
(2)、多欄布局
a、欄柵格系統(tǒng)：就是利用浮動實現(xiàn)的多欄布局，在bootstrap中用的非常多。
b、多列布局：柵格系統(tǒng)并沒有真正實現(xiàn)分欄效果（如word中的分欄），CSS3為了滿足這個要求增加了多列布局模塊
(3)、彈性布局（Flexbox）
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調(diào)整和分布一個容器里項目布局，即使它們的大小是未知或者動態(tài)的，這里簡稱為Flex。
Flexbox布局常用于設(shè)計比較復(fù)雜的頁面，可以輕松的實現(xiàn)屏幕和瀏覽器窗口大小發(fā)生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現(xiàn)元素位置的定義以及重置元素的大小。
Flexbox布局在定義伸縮項目大小時伸縮容器會預(yù)留一些可用空間，讓你可以調(diào)節(jié)伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當(dāng)然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據(jù)一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。
綜合而言，Flexbox布局功能主要具有以下幾點：
a、屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；
b、可以指定伸縮項目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間），從而調(diào)整伸縮項目的大小；
c、可以指定伸縮項目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；
d、可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
e、可以控制元素在頁面上的布局方向；
f、可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。
(4)、瀑布流布局
瀑布流布局是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。
優(yōu)點
a、有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁碼導(dǎo)航鏈接或按鈕了。
b、對觸屏設(shè)備來說，交互方式更符合直覺：在移動應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點擊鏈接或按鈕。
c、更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。
缺點
a、有限的用例：
無限滾動的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。
例如，在電商網(wǎng)站當(dāng)中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個特定的列表頁面當(dāng)中。
b、額外的復(fù)雜度：
那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求;另外這些JS庫在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊，你必須做好充分的測試與調(diào)整工作。
c、再見了，頁腳：
如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了。
最好考慮一下頁腳對于你的網(wǎng)站，特別是用戶的重要性;如果其中確實有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。
千萬不要耍弄你的用戶，當(dāng)他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動加載的內(nèi)容突然出現(xiàn)而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發(fā)憤怒。
d、集中在一頁當(dāng)中動態(tài)加載數(shù)據(jù)，與一頁一頁的輸出相比，究竟那種方式更利于SEO，這是你必須考慮的問題。對于某些以類型網(wǎng)站來說，在這方面進(jìn)行冒險是很不劃算的。
e、關(guān)于頁面數(shù)量的印象：
其實站在用戶的角度來看，這一點并非負(fù)面;不過，如果對于你的網(wǎng)站來說，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適用。
(5)、流式布局（Fluid）
固定布局和流式布局在網(wǎng)頁設(shè)計中最常用的兩種布局方式。固定布局能呈現(xiàn)網(wǎng)頁的原始設(shè)計效果，流式布局則不受窗口寬度影響，流式布局使用百分比寬度來限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來進(jìn)行合理的顯示。
(6)、響應(yīng)式布局
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計師采用這個技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。
優(yōu)點
a、面對不同分辨率設(shè)備靈活性強(qiáng)
b、能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點
a、兼容各種設(shè)備工作量大，效率低下
b、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時間加長
c、其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達(dá)不到最佳效果
d、一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況
30、overfloa:hidden是否形成新的塊級格式化上下文？
會形成，觸發(fā)BFC的條件有：
- float的值不為none。
- overflow的值不為visible。
- display的值為table-cell, table-caption, inline-block 中的任何一個。
- position的值不為relative 和static。
31、解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它？
CSS Sprites就是把網(wǎng)頁中一些小圖片整合到一張圖片文件中，再利用CSS的`background-image`，`background- repeat`，`background-position`的組合進(jìn)行背景定位，`background-position`可以用數(shù)字能精確的定位出背景圖片的位置。可以減少http請求。
32、書寫高效 CSS 時會有哪些問題需要考慮？
a、樣式是：從右向左的解析一個選擇器
b、ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
c、不要tag-qualify （永遠(yuǎn)不要這樣做 ul#main-navigation { } ID已經(jīng)是唯一的，不需要Tag來標(biāo)識，這樣做會讓選擇器變慢。）
d、后代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
e、想清楚你為什么這樣寫
f、CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費很多的瀏覽器資源。）
g、我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性`
注：Universal：普通，tag:標(biāo)簽
可參考： http://blog.jobbole.com/55067/
33、css sprite是什么,有什么優(yōu)缺點？
回答一
CSS Sprites也就是通常說的CSS精靈，也有人稱為雪碧圖，是對網(wǎng)頁中加載的圖片的處理技術(shù)。在一個網(wǎng)頁中可能有多張小的圖片，如圖標(biāo)等，會向服務(wù)器發(fā)送多個請請求，請求數(shù)越多，服務(wù)器的壓力就越大，精靈技術(shù)就是先將多張小的圖片合并成一張圖片，然后在CSS中分開為多張小圖片的一種技術(shù)。如下圖所示：
優(yōu)點：
a、利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點，也是其被廣泛傳播和應(yīng)用的主要原因；
b、CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
c、解決了網(wǎng)頁設(shè)計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。
d、更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。
缺點：
a、在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)?#xff0c;很容易出現(xiàn)背景斷裂；
b、CSS Sprites在開發(fā)的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置。
c、CSS Sprites在維護(hù)的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的CSS，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動CSS。
回答二
(1)、概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案。
(2)、優(yōu)點：
a、 減少HTTP請求數(shù)，極大地提高頁面加載速度
b、增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小
c、更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)
(3)、缺點：
a、圖片合并麻煩
b、維護(hù)麻煩，修改一個圖片可能需要從新布局整個圖片樣式
34、CSS 屬性是否區(qū)分大小寫？
不區(qū)分，HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團(tuán)隊協(xié)作一般都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。
35、display: none與visibility: hidden的區(qū)別？
聯(lián)系：它們都能讓元素隱藏
區(qū)別：
a、display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見
b、display: none;是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點屬性無法顯示；visibility: hidden;是繼承屬性，子孫節(jié)點消失由于繼承了hidden，通過設(shè)置visibility: visible;可以讓子孫節(jié)點顯式
c、修改常規(guī)流中元素的display通常會造成文檔重排。修改visibility屬性只會造成本元素的重繪。
d、讀屏器不會讀取display: none;元素內(nèi)容；會讀取visibility: hidden;元素內(nèi)容
36、PNG,GIF,JPG的區(qū)別及如何選擇?
GIF
a、8位像素，256色
b、無損壓縮
c、支持簡單動畫
d、支持boolean透明
e、適合簡單動畫
JPEG
a、顏色限于256
b、有損壓縮
c、可控制壓縮質(zhì)量
d、不支持透明
3、適合照片
PNG
a、有PNG8和truecolor PNG
b、PNG8類似GIF顏色上限為256，文件小，支持alpha透明度，無動畫
c、適合圖標(biāo)、背景、按鈕
參考資料： [選擇正確的圖片格式]：http://www.yuiblog.com/blog/2008/11/04/imageopt-2/
37、如何水平居中一個元素?
(1)、如果需要居中的元素為"常規(guī)流中inline元素"
為父元素設(shè)置text-align: center;即可實現(xiàn)
(2)、如果需要居中的元素為"常規(guī)流中block元素"
a、為元素設(shè)置寬度
b、設(shè)置左右margin為auto
c、IE6下需在父元素上設(shè)置text-align: center;再給子元素恢復(fù)需要的值
(3)、如果需要居中的元素為"浮動元素"
a、為元素設(shè)置寬度
b、position: relative
c、浮動方向偏移量（left或者right）設(shè)置為50%
d、浮動方向上的margin設(shè)置為元素寬度一半乘以-1，變成負(fù)數(shù)如：margin-left: -250px;
(4)、如果需要居中的元素為"絕對定位元素"
a、為元素設(shè)置寬度
b、偏移量設(shè)置為50%
c、偏移方向外邊距設(shè)置為元素寬度一半乘以-1
38、position:absolute和float屬性的異同 ?
A：共同點：對內(nèi)聯(lián)元素設(shè)置`float`和`absolute`屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
B：不同點：float仍會占據(jù)位置，position會覆蓋文檔流中的其他元素。
39、介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box。
a、content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高
b、border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content
標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。
40、CSS3有哪些新特性？
CSS3實現(xiàn)
a、圓角（border-radius）
b、陰影（box-shadow），
c、對文字加特效（text-shadow、）
d、線性漸變（gradient）
e、變換（transform）
f、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)--旋轉(zhuǎn),縮放,定位,傾斜
g、增加了更多的CSS選擇器 、多背景、 rgba
h、在CSS3中唯一引入的偽元素是::selection.
i、媒體查詢，多欄布局
j、border-image
41、請你說一下你對Web Font的認(rèn)識?
web font是應(yīng)用在web中的一種字體技術(shù)，在CSS中使用font-face定義新的字體
font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中。
@font-face 能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，可以實現(xiàn)矢量圖標(biāo)。如下所示：
font-face優(yōu)點
(1)、可縮放性（Scalability）
基于字體的icon是與分辨率無關(guān)并能縮放到任何想要程度的技術(shù)。你的圖標(biāo)看起來毫不關(guān)心retina,HDPI,XHDPI等等屏幕，但渲染時會根據(jù)目標(biāo)設(shè)備自動調(diào)整，你將有能力應(yīng)對任何當(dāng)下，未來，或大多數(shù)任意規(guī)格的設(shè)備
(2)、尺寸（Size）
裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度，使用icon font時，你不需要根據(jù)不同設(shè)備準(zhǔn)備不同的圖片，你的APP只需要在啟動時加載一次icon font文件即可。
(3)、可維護(hù)性（Maintainability）
自你的icon打包進(jìn)一個字體文件，在項目自始至終你僅需要維護(hù)這個單一的字體文件。
通過管理字體文件你可以很自然的組織你的icon集合，任意的進(jìn)行修改或擴(kuò)展
(4)、可推廣性（Adoption）
然而，應(yīng)用這樣的icon fonts可能會影響你和你同事之間的工作流程，但說服讓他們采用這樣的技術(shù)也非常簡單，有數(shù)款免費或收費的工具幫你輕松達(dá)到目的并能看到很好的應(yīng)用結(jié)果，在幾乎任意（手機(jī)）移動平臺、瀏覽器或操作系統(tǒng)
(5)、靈活性（Flexibility）
應(yīng)用icon fonts技術(shù)中最有意義的一項能力是可以操縱icon fonts， 改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀
可交互性(Interactivity)：
由于靈活性以及能夠通過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，通過應(yīng)用icon fonts技術(shù)， 你能輕松的在不同狀態(tài)顯示對應(yīng)的不同效果，創(chuàng)建動畫。
42、請簡要說說CSS 預(yù)處理器與 CSS 后處理器？
廣義上說，目標(biāo)格式為CSS的預(yù)處理器是CSS預(yù)處理器，但本文特指以最終生成 CSS為目的的領(lǐng)域特定語言。
Sass、LESS、Stylus 是目前最主流的 CSS 預(yù)處理器。
優(yōu)點：語言級邏輯處理，動態(tài)特性，改善項目結(jié)構(gòu)
缺點：采用特殊語法，框架耦合度高，復(fù)雜度高
CSS 后處理器是對CSS進(jìn)行處理，并最終生成CSS的預(yù)處理器，它屬于廣義上的CSS 預(yù)處理器。
我們很久以前就在用CSS后處理器 了，最典型的例子是CSS壓縮工具（如 clean-css），只不過以前沒單獨拿出來說過。
還有最近比較火的 Autoprefixer，以 Can I Use上的瀏覽器支持?jǐn)?shù)據(jù) 為基礎(chǔ)，自動處理兼容性問題。
優(yōu)點：使用CSS語法，容易進(jìn)行模塊化，貼近 CSS 的未來標(biāo)準(zhǔn)
缺點：邏輯處理能力有限。
43、瀏覽器兼容包括哪些方面？兼容的一般標(biāo)準(zhǔn)是什么?
方面
(1)、CSS兼容
(2)、JavaScript兼容
(3)、HTML兼容
這三類也是前端的主要組成部分，都存在一定的兼容性問題。
兼容的一般標(biāo)準(zhǔn)
(1)、在不同的主流的瀏覽器上表現(xiàn)效果一致
(2)、能適應(yīng)不同的屏幕大小
(3)、能適應(yīng)不同的分辨率與色彩深度
44、說說你對CSS Hack的理解?
CSS Hack就是針對不同的瀏覽器或不同版本瀏覽器寫特定的CSS樣式達(dá)到讓瀏覽器兼容的過程。
a、條件注釋法
IE條件注釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視為
注釋。代碼如下所示：
b、樣式內(nèi)屬性標(biāo)記法
在CSS樣式的屬性名前或值后面添加特殊的字符讓不同的瀏覽器解析。
c、選擇器前綴法
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
45、請簡要說說什么是文檔模式 （X-UA-Compatible） ?
文檔模式是IE8瀏覽器以后的一種獨有技術(shù)，他可以通過meta指定當(dāng)前文檔的渲染模式，如可以把IE8降級成IE6、IE7使用。文檔模式的主要作用是影響瀏覽器顯示網(wǎng)頁HTML的方式，用于指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析并渲染網(wǎng)頁代碼。
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >最新IE
“X-UA-Compatible”的值有兩種方式：Emulate+IE版本號，單純版本號
EmulateIE8：如果聲明了文檔類型，則以IE8標(biāo)準(zhǔn)模式渲染頁面，否則將文檔模式設(shè)置為IE5
9：強(qiáng)制以IE9標(biāo)準(zhǔn)模式渲染頁面，忽略文檔類型聲明
x-ua-compatible 頭標(biāo)簽大小寫不敏感，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)
插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁時，實際上使用的是Google Chrome瀏覽器內(nèi)核
46、請說說javascript兼容的含義？
這里有兩層意思，第一可以使用javascript操作樣式與標(biāo)簽，強(qiáng)制瀏覽器兼容，比如先使用javascript判斷瀏覽器類型，再操作樣式與標(biāo)簽。
第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容，可以采取如下辦法：
(1)、使用第三方提代的javascript庫，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery這種成熟的javascript庫經(jīng)過多次的版本迭代，已經(jīng)變得非常成熟，世界上的網(wǎng)站到現(xiàn)在近60%都使用到了jQuery，他的兼容性不錯。
(2)、瀏覽器檢測、重新封裝
使用javascript判斷瀏覽器類型，對一些特點的方法或?qū)ο笾匦路庋b后使用屏蔽瀏覽的不兼容性。可以使用User-Agent、或特定對象。
47、談?wù)勀銓η岸诵阅軆?yōu)化的認(rèn)識?
在保證功能的前提下，性能也非常關(guān)鍵。從上圖可以看出如果性能太差，響應(yīng)速度慢將帶非常差的用戶體驗，會失去大量用戶。
好的性能要依托如下幾個方面：
(1)、服務(wù)器端
(2)、網(wǎng)絡(luò)速度，客戶端與服務(wù)器之間的每個網(wǎng)絡(luò)環(huán)節(jié)
(3)、客戶端軟件與硬件配置
(4)、前端的性能，資源的數(shù)量，大小，javascript的時間與空間復(fù)雜度等
要提高前端的性能可以從如下幾個方面入手：
(1)、盡量減少HTTP請求數(shù)量
(2)、壓縮
(3)、緩存
(4)、使用內(nèi)容發(fā)布網(wǎng)絡(luò)（CDN的使用）
(5)、DNS Prefetch
(6)、將CSS樣式表放在頂部
(7)、將javascript腳本放在底部
(8)、使用外部javascript和CSS
(9)、避免重定向
48、什么是內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）?
CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母臁⒏€(wěn)定，它是一個經(jīng)策略性部署的整體系統(tǒng)，包括分布式存儲、負(fù)載均衡、網(wǎng)絡(luò)請求的重定向和內(nèi)容管理4個要件。
比如我們在項目中使用jQuery ,加載本地服務(wù)器的jQuery可能不如資源公共庫中做過CDN優(yōu)化的資源快。
49、請簡要說說CoffeeScript、TypeScript是什么?
javascript變得日益重要，但有很多明顯的缺點，借助一種中間語言轉(zhuǎn)譯出優(yōu)雅的javascript是解決這些問題的方法。如CoffeeScript，TypeScript。
Coffee Script是JavaScript的轉(zhuǎn)譯語言。了解JavaScript的發(fā)展歷程：https://news.cnblogs.com/n/558565/
CoffeeScript的特點：
a、CoffeeScript語法類似 Ruby ，可以被編譯成 JavaScript
b、CoffeeScript取JavaScript之精華，而拋棄了諸如全局變量聲明、with等容易出錯的部分
c、CoffeeScript是JavaScript與程序員之間的橋梁，程序員看到的是優(yōu)雅的CoffeeScript接口，使得編程更簡潔，寫法更隨意
d、更少，更緊湊，和更清晰的代碼
e、通過規(guī)避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯率，更容易維護(hù)
f、在很多常用模式的實現(xiàn)上采用了JavaScript中的最佳實踐
g、CoffeeScript生成的JavaScript代碼都可以完全通過JSLint的檢測
TypeScript是一種由微軟開發(fā)的自由和開源的編程語言，它是JavaScript的一個超集，擴(kuò)展了JavaScript的語法，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭０驳滤埂ず査共?#xff0c;C#的首席架構(gòu)師，工作于TypeScript的開發(fā)。
50、談?wù)勀銓efore、after偽元素的認(rèn)識?
偽元素不是真的元素是通過CSS虛擬出的一個元素，CSS3的語法為了區(qū)分偽元素與偽類，使用"::"表示，但是前期為了兼容":"仍然可以使用。
before
在應(yīng)用樣式的元素內(nèi)的前部虛擬一個元素可以指定元素的內(nèi)容與樣式。
after
after也是一個與before類似的偽元素，不同的是他的位置是在內(nèi)部的尾部。
注意：
a、本質(zhì)上并不支持偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支持了E::after。
b、不支持設(shè)置屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。
c、IE10在使用偽元素動畫有一個問題：
.test:hover {}
.test:hover::after { /* 這時animation和transition才生效 */ }需要使用一個空的:hover來激活
51、內(nèi)容還會不斷補(bǔ)充。。。
博客數(shù)據(jù)來源聲明：
本博客大部分?jǐn)?shù)據(jù)來源于各大網(wǎng)站的收集整理改編，主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(wǎng)(https://www.nowcoder.com)、一些英文網(wǎng)站，還有一些論壇、博客、IT招聘等網(wǎng)站。還有少部分?jǐn)?shù)據(jù)時來源于本人自己整理添加，添加的內(nèi)容主要是本人認(rèn)為比較重要知識點，面試時可能會問到的題目，自己整理題目以及參考答案，答案僅供參考，答案可能存有錯誤或不足，歡迎大家批評指正或補(bǔ)充更好的答案。好讓我及時更正，以免誤導(dǎo)其他人。本博客僅提供參考作用。
轉(zhuǎn)載于:https://www.cnblogs.com/SeeYouBug/p/6189115.html
總結(jié)
以上是生活随笔為你收集整理的【干货分享】前端面试知识点锦集02（CSS篇）——附答案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php定时删除文件夹下文件(清理缓存文件
- 下一篇： 前端工程师必备：学习资源全网罗