前端面試知識點錦集02（CSS篇）

目錄

• 2、CSS部分
• 一、解釋一下CSS的盒子模型？
• 二、請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？
• 三、請你說說CSS有什麼特殊性?（優先級、計算特殊值）
• 四、要動態改變層中內容能夠使用的方法？
• 五、常見瀏覽器兼容性問題與解決方案？
• 六、列出display的值並說明他們的做用？
• 七、如何居中div, 如何居中一個浮動元素?
• 八、CSS中 link 和@import 的區別是？
• 九、請列舉幾種清除浮動的方法(至少兩種)?
• 十、block，inline和inlinke-block細節對比？
• 十一、什麼叫優雅降級和漸進加強？
• 十二、說說浮動元素會引發的問題和你的解決辦法？
• 1三、你有哪些性能優化的方法？
• 1四、爲何要初始化CSS樣式？
• 1五、解釋下浮動和它的工做原理？清除浮動的技巧？
• 1六、CSS樣式表根據所在網頁的位置，可分爲哪幾種樣式表？
• 1七、談談你對CSS中刻度的認識？
• 1八、請你說說em與rem的區別？
• 1九、請你說說box-sizing屬性的的用法？
• 20、瀏覽器標準模式和怪異模式之間的區別是什麼？
• 2一、怪異Quirks模式是什麼，它和標準Standards模式有什麼區別？
• 2二、說說你對邊距摺疊的理解?
• 2三、內聯與塊級標籤有何區別？
• 2四、說說隱藏元素的方式有哪些？
• 2五、爲何重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？
• 2六、談談你對BFC與IFC的理解？(是什麼，如何產生，做用)
• 2七、說說你對頁面中使用定位(position)的理解？
• 2八、如何解決多個元素重疊問題？
• 2九、頁面佈局的方式有哪些？
• 30、overfloa:hidden是否造成新的塊級格式化上下文？
• 3一、解釋下 CSS sprites，以及你要如何在頁面或網站中使用它？
• 3二、書寫高效 CSS 時會有哪些問題須要考慮？
• 3三、css sprite是什麼,有什麼優缺點？
• 3四、CSS 屬性是否區分大小寫？
• 3五、display: none與visibility: hidden的區別？
• 3六、PNG,GIF,JPG的區別及如何選擇?
• 3七、如何水平居中一個元素?
• 3八、position:absolute和float屬性的異同 ?
• 3九、介紹一下box-sizing屬性？
• 40、CSS3有哪些新特性？
• 4一、請你說一下你對Web Font的認識?
• 4二、請簡要說說CSS 預處理器與 CSS 後處理器？
• 4三、瀏覽器兼容包括哪些方面？兼容的通常標準是什麼?
• 4四、說說你對CSS Hack的理解?
• 4五、請簡要說說什麼是文檔模式 （X-UA-Compatible） ?
• 4六、請說說javascript兼容的含義？
• 4七、談談你對前端性能優化的認識?
• 4八、什麼是內容分發網絡（CDN）?
• 4九、請簡要說說CoffeeScript、TypeScript是什麼?
• 50、談談你對before、after僞元素的認識?

2、CSS部分

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

回答一：
a、標準的css盒子模型：寬度=內容的寬度+邊框的寬度+加上內邊具的寬度
b、網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。
c、這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。CSS盒子模型就是在網頁設計中常常用到的CSS技術所使用的一種思惟模型。
回答二：
盒子模型也有人稱爲框模型，HTML中的多數元素都會在瀏覽器中生成一個矩形的區域，每一個區域包含四個組成部分，從外向內依次是：外邊距（Margin）、邊框（Border）、內邊距（Padding）和內容（Content），其實盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型，加上了doctype聲明，讓全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子。

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

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

2.一、基礎的選擇器

2.二、組合選擇器

2.三、屬性選擇器

2.四、僞類

2.五、僞元素

三、請你說說CSS有什麼特殊性?（優先級、計算特殊值）

優先級

(1)、同類型，同級別的樣式後者先於前者
(2))、ID > 類樣式 > 標籤 > *
(3)、內聯>ID選擇器>僞類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式 
(4)、具體 > 泛化的，特殊性即css優先級
(5)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
　　內嵌樣式：內嵌在元素中，<span style="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，按位比較，從左到右，只要一位高於則當即勝出，不然繼續比較。

四、要動態改變層中內容能夠使用的方法？

innerHTML，innerText

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

(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，遨遊中高度超出本身設置高度
問題症狀：IE六、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個都寫上就行，就能實現兼容

六、列出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，其它類型元素均不能夠

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

(1)、非浮動元素居中：能夠設置 margin:0 auto 令其居中, 定位 ,父級元素text-algin:center等等
(2)、浮動元素居中: 
方法一:設置當前div的寬度，而後設置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。
方法二:父元素和子元素同時左浮動，而後父元素相對左移動50%，再而後子元素相對左移動-50%。
方法三:position定位等等。

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

(1)、link屬於HTML標籤，而@import是CSS提供的; 
(2)、頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3)、import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
(4)、link方式的樣式的權重 高於@import的權重.

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

(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時，會出現滾動條。 
建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

十、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屬性的表象。

十一、什麼叫優雅降級和漸進加強？

優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.

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

十二、說說浮動元素會引發的問題和你的解決辦法？

問題：
（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 style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
(2)、使用after僞類
#parent:after{
　　content:" ";
　　height:0;
　　visibility:hidden;
　　display:block;
　　clear:both;
}
(3)、浮動外部元素
(4)、設置`overflow`爲`hidden`或者auto

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

回答一：

（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請求

1四、爲何要初始化CSS樣式？

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

1五、解釋下浮動和它的工做原理？清除浮動的技巧？

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
(1)、使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
(2)、使用overflow。
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
(3)、使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

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

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

1七、談談你對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不能直接修改，能夠被用戶樣式覆蓋。

1八、請你說說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的重要區別：它們計算的規則一個是依賴父元素另外一個是依賴根元素計算

1九、請你說說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

2一、怪異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模式下卻會失效。
（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是看文章看的，甚至徹底不知道。）

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

外邊距摺疊：相鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成一個外邊距（margin）
相鄰：沒有被非空內容、padding、border 或 clear 分隔開的margin特性. 非空內容就是說這元素之間要麼是兄弟關係或者父子關係
垂直方向外邊距合併計算:
a、參加摺疊的margin都是正值：取其中 margin 較大的值爲最終 margin 值。
b、參與摺疊的 margin 都是負值：取的是其中絕對值較大的，而後，從 0 位置，負向位移。
c、參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，而後，和正 margin 值中最大的 margin 相加。

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

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

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

a、使用CSS的display:none，不會佔有原來的位置
b、使用CSS的visibility:hidden，會佔有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"，不會佔有原來的位置

2五、爲何重置瀏覽器默認樣式，如何重置默瀏覽器認樣式？

每種瀏覽器都有一套默認的樣式表，即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
}

2六、談談你對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時元素將脫離標準流。

2七、說說你對頁面中使用定位(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）

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

使用z-index屬性能夠設置元素的層疊順序
z-index屬性
語法：z-index: auto | <integer>
默認值：auto
適用於：定位元素。即定義了position爲非static的元素
取值：
auto： 元素在當前層疊上下文中的層疊級別是0。元素不會建立新的局部層疊上下文，除非它是根元素。 
整數： 用整數值來定義堆疊級別。能夠爲負值。 說明：
檢索或設置對象的層疊順序。 
z-index用於肯定元素在當前層疊上下文中的層疊級別，並肯定該元素是否建立新的局部層疊上下文。 
當多個元素層疊在一塊兒時，數字大者將顯示在上面。

2九、頁面佈局的方式有哪些？

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

（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。

3一、解釋下 CSS sprites，以及你要如何在頁面或網站中使用它？

CSS Sprites就是把網頁中一些小圖片整合到一張圖片文件中，再利用CSS的`background-image`，`background- repeat`，`background-position`的組合進行背景定位，`background-position`能夠用數字能精確的定位出背景圖片的位置。能夠減小http請求。

3二、書寫高效 CSS 時會有哪些問題須要考慮？

a、樣式是：從右向左的解析一個選擇器
b、ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
c、不要tag-qualify （永遠不要這樣作 ul#main-navigation { } ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）
d、後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
e、想清楚你爲何這樣寫
f、CSS3的效率問題（CSS3選擇器（好比 :nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）
g、咱們知道#ID速度是最快的，那麼咱們都用ID，是否是很快。可是咱們不該該爲了效率而犧牲可讀性和可維護性`
注：Universal：普通，tag:標籤
可參考： http://blog.jobbole.com/55067/

3三、css sprite是什麼,有什麼優缺點？

回答一

CSS Sprites也就是一般說的CSS精靈，也有人稱爲雪碧圖，是對網頁中加載的圖片的處理技術。在一個網頁中可能有多張小的圖片，如圖標等，會向服務器發送多個請請求，請求數越多，服務器的壓力就越大，精靈技術就是先將多張小的圖片合併成一張圖片，而後在CSS中分開爲多張小圖片的一種技術。以下圖所示：

優勢：
a、利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；
b、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。
c、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
d、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。
缺點：
a、在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；
b、CSS Sprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置。
c、CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的CSS，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動CSS。
回答二
(1)、概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。
(2)、優勢：
a、 減小HTTP請求數，極大地提升頁面加載速度
b、增長圖片信息重複度，提升壓縮比，減小圖片大小
c、更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現
(3)、缺點：
a、圖片合併麻煩
b、維護麻煩，修改一個圖片可能須要重新佈局整個圖片樣式

3四、CSS 屬性是否區分大小寫？

不區分，HTML，CSS都對大小寫不敏感，但爲了更好的可讀性和團隊協做通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。

3五、display: none與visibility: hidden的區別？

聯繫：它們都能讓元素隱藏
區別：
a、display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
b、display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
c、修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
d、讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

3六、PNG,GIF,JPG的區別及如何選擇?

GIF
a、8位像素，256色
b、無損壓縮
c、支持簡單動畫
d、支持boolean透明
e、適合簡單動畫
JPEG
a、顏色限於256
b、有損壓縮
c、可控制壓縮質量
d、不支持透明
三、適合照片
PNG
a、有PNG8和truecolor PNG
b、PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
c、適合圖標、背景、按鈕
參考資料： [選擇正確的圖片格式]：http://www.yuiblog.com/blog/2008/11/04/imageopt-2/

3七、如何水平居中一個元素?

(1)、若是須要居中的元素爲"常規流中inline元素"
爲父元素設置text-align: center;便可實現
(2)、若是須要居中的元素爲"常規流中block元素"
a、爲元素設置寬度
b、設置左右margin爲auto
c、IE6下需在父元素上設置text-align: center;再給子元素恢復須要的值
(3)、若是須要居中的元素爲"浮動元素"
a、爲元素設置寬度
b、position: relative
c、浮動方向偏移量（left或者right）設置爲50%
d、浮動方向上的margin設置爲元素寬度一半乘以-1，變成負數如：margin-left: -250px;
(4)、若是須要居中的元素爲"絕對定位元素"
a、爲元素設置寬度
b、偏移量設置爲50%
c、偏移方向外邊距設置爲元素寬度一半乘以-1
(5)、若是須要居中的元素爲"絕對定位元素"
a、爲元素設置寬度
b、設置左右偏移量都爲0
c、設置左右外邊距都爲auto

3八、position:absolute和float屬性的異同 ?

A：共同點：對內聯元素設置`float`和`absolute`屬性，可讓元素脫離文檔流，而且能夠設置其寬高。
B：不一樣點：float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

3九、介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。
a、content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
b、border-box：讓元素維持IE傳統盒模型（IE6如下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

40、CSS3有哪些新特性？

CSS3實現
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)--旋轉,縮放,定位,傾斜
g、增長了更多的CSS選擇器 、多背景、 rgba 
h、在CSS3中惟一引入的僞元素是::selection.
i、媒體查詢，多欄佈局
j、border-image

4一、請你說一下你對Web Font的認識?

web font是應用在web中的一種字體技術，在CSS中使用font-face定義新的字體
font-face是CSS3中的一個模塊，他主要是把本身定義的Web字體嵌入到你的網頁中。
@font-face 可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，能夠實現矢量圖標。以下所示：

font-face優勢
(1)、可縮放性（Scalability）
基於字體的icon是與分辨率無關並能縮放到任何想要程度的技術。你的圖標看起來絕不關心retina,HDPI,XHDPI等等屏幕，但渲染時會根據目標設備自動調整，你將有能力應對任何當下，將來，或大多數任意規格的設備
(2)、尺寸（Size）
裁剪到正確的比例，icon font的文件的大小要比起位圖小到難以置信的程度，使用icon font時，你不須要根據不一樣設備準備不一樣的圖片，你的APP只須要在啓動時加載一次icon font文件便可。
(3)、可維護性（Maintainability）
自你的icon打包進一個字體文件，在項目自始至終你僅須要維護這個單一的字體文件。
經過管理字體文件你能夠很天然的組織你的icon集合，任意的進行修改或擴展
(4)、可推廣性（Adoption）
然而，應用這樣的icon fonts可能會影響你和你同事之間的工做流程，但說服讓他們採用這樣的技術也很是簡單，有數款免費或收費的工具幫你輕鬆達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平臺、瀏覽器或操做系統
(5)、靈活性（Flexibility）
應用icon fonts技術中最有意義的一項能力是能夠操縱icon fonts， 改變顏色，大小，僅僅幾行代碼就能夠在瞬間改變外觀
可交互性(Interactivity)：
因爲靈活性以及可以經過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，經過應用icon fonts技術， 你能輕鬆的在不一樣狀態顯示對應的不一樣效果，建立動畫。

4二、請簡要說說CSS 預處理器與 CSS 後處理器？

廣義上說，目標格式爲CSS的預處理器是CSS預處理器，但本文特指以最終生成 CSS爲目的的領域特定語言。
Sass、LESS、Stylus 是目前最主流的 CSS 預處理器。
優勢：語言級邏輯處理，動態特性，改善項目結構
缺點：採用特殊語法，框架耦合度高，複雜度高

CSS 後處理器是對CSS進行處理，並最終生成CSS的預處理器，它屬於廣義上的CSS 預處理器。
咱們好久之前就在用CSS後處理器 了，最典型的例子是CSS壓縮工具（如 clean-css），只不過之前沒單獨拿出來講過。
還有最近比較火的 Autoprefixer，以 Can I Use上的瀏覽器支持數據 爲基礎，自動處理兼容性問題。
優勢：使用CSS語法，容易進行模塊化，貼近 CSS 的將來標準
缺點：邏輯處理能力有限。

4三、瀏覽器兼容包括哪些方面？兼容的通常標準是什麼?

方面
(1)、CSS兼容
(2)、JavaScript兼容
(3)、HTML兼容
這三類也是前端的主要組成部分，都存在必定的兼容性問題。
兼容的通常標準
(1)、在不一樣的主流的瀏覽器上表現效果一致
(2)、能適應不一樣的屏幕大小
(3)、能適應不一樣的分辨率與色彩深度

4四、說說你對CSS Hack的理解?

CSS Hack就是針對不一樣的瀏覽器或不一樣版本瀏覽器寫特定的CSS樣式達到讓瀏覽器兼容的過程。
a、條件註釋法
IE條件註釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視爲
註釋。代碼以下所示：

<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 如下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->

b、樣式內屬性標記法
在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有效

4五、請簡要說說什麼是文檔模式 （X-UA-Compatible） ?

文檔模式是IE8瀏覽器之後的一種獨有技術，他能夠經過meta指定當前文檔的渲染模式，如能夠把IE8降級成IE六、IE7使用。文檔模式的主要做用是影響瀏覽器顯示網頁HTML的方式，用於指定IE的頁面排版引擎（Trident）以哪一個版本的方式來解析並渲染網頁代碼。
<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標準模式渲染頁面，不然將文檔模式設置爲IE5
9：強制以IE9標準模式渲染頁面，忽略文檔類型聲明
x-ua-compatible 頭標籤大小寫不敏感，必須用在 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(谷歌內嵌瀏覽器框架GCF)
插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核

4六、請說說javascript兼容的含義？

這裏有兩層意思，第一能夠使用javascript操做樣式與標籤，強制瀏覽器兼容，好比先使用javascript判斷瀏覽器類型，再操做樣式與標籤。
第二指javascript存在兼容問題，如一個對象在某些瀏覽器下沒有辦法使用，要讓javascript更加兼容，能夠採起以下辦法：
(1)、使用第三方提代的javascript庫，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery這種成熟的javascript庫通過屢次的版本迭代，已經變得很是成熟，世界上的網站到如今近60%都使用到了jQuery，他的兼容性不錯。
(2)、瀏覽器檢測、從新封裝
使用javascript判斷瀏覽器類型，對一些特色的方法或對象從新封裝後使用屏蔽瀏覽的不兼容性。能夠使用User-Agent、或特定對象。

4七、談談你對前端性能優化的認識?

在保證功能的前提下，性能也很是關鍵。從上圖能夠看出若是性能太差，響應速度慢將帶很是差的用戶體驗，會失去大量用戶。
好的性能要依託以下幾個方面：
(1)、服務器端
(2)、網絡速度，客戶端與服務器之間的每一個網絡環節
(3)、客戶端軟件與硬件配置
(4)、前端的性能，資源的數量，大小，javascript的時間與空間複雜度等
要提升前端的性能能夠從以下幾個方面入手：
(1)、儘可能減小HTTP請求數量
(2)、壓縮
(3)、緩存
(4)、使用內容發佈網絡（CDN的使用）
(5)、DNS Prefetch
(6)、將CSS樣式表放在頂部
(7)、將javascript腳本放在底部
(8)、使用外部javascript和CSS
(9)、避免重定向

4八、什麼是內容分發網絡（CDN）?

CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定，它是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。
好比咱們在項目中使用jQuery ,加載本地服務器的jQuery可能不如資源公共庫中作過CDN優化的資源快。

4九、請簡要說說CoffeeScript、TypeScript是什麼?

javascript變得日益重要，但有不少明顯的缺點，藉助一種中間語言轉譯出優雅的javascript是解決這些問題的方法。如CoffeeScript，TypeScript。
Coffee Script是JavaScript的轉譯語言。瞭解JavaScript的發展歷程：https://news.cnblogs.com/n/558565/
CoffeeScript的特色：
a、CoffeeScript語法相似 Ruby ，能夠被編譯成 JavaScript
b、CoffeeScript取JavaScript之精華，而拋棄了諸如全局變量聲明、with等容易出錯的部分
c、CoffeeScript是JavaScript與程序員之間的橋樑，程序員看到的是優雅的CoffeeScript接口，使得編程更簡潔，寫法更隨意
d、更少，更緊湊，和更清晰的代碼
e、經過規避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減小出錯率，更容易維護
f、在不少經常使用模式的實現上採用了JavaScript中的最佳實踐
g、CoffeeScript生成的JavaScript代碼均可以徹底經過JSLint的檢測

TypeScript是一種由微軟開發的自由和開源的編程語言，它是JavaScript的一個超集，擴展了JavaScript的語法，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格，C#的首席架構師，工做於TypeScript的開發。

50、談談你對before、after僞元素的認識?

僞元素不是真的元素是經過CSS虛擬出的一個元素，CSS3的語法爲了區分僞元素與僞類，使用"::"表示，可是前期爲了兼容":"仍然能夠使用。
before
在應用樣式的元素內的前部虛擬一個元素能夠指定元素的內容與樣式。
after
after也是一個與before相似的僞元素，不一樣的是他的位置是在內部的尾部。
注意：
a、本質上並不支持僞元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，因此等同變相支持了E::after。 
b、不支持設置屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。 
c、IE10在使用僞元素動畫有一個問題：
.test:hover {}
.test:hover::after { /* 這時animation和transition才生效 */ }須要使用一個空的:hover來激活

 

本文轉自：http://www.cnblogs.com/SeeYouBug/p/6189115.html