1、常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
答：
(1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(2) 內核：Trident，Gecko，Presto，Webkit。
2、 說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 以下）
答：
(1) 行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。
塊級元素：各占據一行，垂直方向排列。從新行開始結束接着一個斷行。
(2) 兼容性：display:inline-block;*display:inline;*zoom:1;
3、 談談浮動和清除浮動，清除浮動有哪些方式？比較好的方式是哪一種？
浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上。
答：
(一)
（1）父級div定義height。
（2）結尾處加空div標簽clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標簽clear:both。
(二) 比較好的是第3種方式，好多網站都這么用。
4、box-sizing常用的屬性有哪些？分別有什么作用？
答：
(1)box-sizing: content-box|border-box|inherit;
(2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
5、Doctype作用？標准模式與兼容模式各有什么區別?
答：
(1) 告知瀏覽器的解析器用什么文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
(2) 標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
6、HTML5 為什么只需要寫<!DOCTYPE html> ？
答：
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
7、 頁面導入樣式時，使用link和@import有什么區別？
答：
（1）link屬於XHTML標簽，除了加載CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。
引入方式3種：行內添加定義style屬性值，頁面頭部內內嵌調用和外鏈調用，
區別：
1.link是xhtml標簽，除了加載css外，還可以定義RSS等其他事務，@import只能加載CSS
2.link引用CSS時候，頁面載入的時候同時加載，@import需要頁面網頁完全載入后加載
3.link是XHTML標簽，沒有兼容問題，@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4.link支持使用javascript控制DOM去改變樣式，但是@import不支持。
8、介紹一下你對瀏覽器內核的理解？
答：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
9、html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
答：
(一)
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉后自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(二)
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素
10、簡述一下你對HTML語義化的理解？
答：
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
11、position的值， relative和absolute分別是相對於誰進行定位的？
absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支持）生成絕對定位的元素，通常相對於瀏覽器窗口或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 默認值。沒有定位，元素出現在正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出
12、 什么叫優雅降級和漸進增強？
答：
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。
13、display:none和visibility:hidden的區別？
display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，就不存在。
visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。
CSS中link 和@import的區別是？
(1) link屬於HTML標簽，而@import是CSS提供的;
(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;
(3) import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
(4) link方式的樣式的權重 高於@import的權重.
14、position:absolute和float屬性的異同
共同點：對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，並且可以設置其寬高。
不同點：float仍會占據位置，absolute會覆蓋文檔流中的其他元素。
15、介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。
content-box：讓元素維持W3C的標准盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content
標准瀏覽器下，按照W3C規范對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。
16、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增偽類有那些？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li:nth-child）
17、CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢，多欄布局
border-image
CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別如下：
content-box（默認）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
18、對BFC規范的理解？
BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關系）的margin會發生折疊。
（W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行布局，以及與其他元素的關系和相互作用。
19、說說你對語義化的理解？
（1）去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
（2）有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標簽來確定上下文和各個關鍵字的權重；
（3）方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
（4）便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標准的團隊都遵循這個標准，可以減少差異化。
20、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標簽之前。告知瀏覽器以何種模式來渲染文檔。
（2）嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標准運行。
（3）在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
21、你知道多少種Doctype文檔類型？
該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標准）模式（也就是嚴格呈現模式）用於呈現遵循最新標准的網頁，而 Quirks
（包容）模式（也就是松散呈現模式或者兼容模式）用於呈現為傳統瀏覽器而設計的網頁。
22、HTML與XHTML——二者有什么區別
區別：
（1）所有的標記都必須要有一個相應的結束標記
（2）所有標簽的元素和屬性的名字都必須使用小寫
（3）所有的XML標記都必須合理嵌套
（4）所有的屬性必須用引號""括起來
（5）把所有<和&特殊符號用編碼表示
（6）給所有屬性賦一個值
（7）不要在注釋內容中使“--”
（8）圖片必須有說明文字
23、常見兼容性問題？
png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入
_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。
接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
/*所有識別*/
. /*IE6、7、8識別*/
+/*IE6、7識別*/
_/*IE6識別*/
}
怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標准模式來解析網頁，但在IE中會觸發
怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在
可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。
24、ie各版本和chrome可以並行下載多少個資源
IE6 兩個並發，iE7升級之后的6個並發，之后版本也是6個
Firefox，chrome也是6個
25、談談你對重構的理解
網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，
在擴展的同時保持一致的UI。
對於傳統的網站來說重構通常是：
表格(table)布局改為DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規范的CSS、如對IE6有效的)
對於移動平台的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴格按規范編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
增強用戶體驗
通常來說對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
程序的性能優化(如數據讀寫)
采用CDN來加速資源加載
對於JS DOM的優化
26、什么樣的前端代碼是好的
高復用低耦合，這樣文件小，好維護，而且好擴展。
27、對web標准以及w3c的理解和認識
答:標簽閉合，標簽小寫，不亂嵌套，提高搜索機器人搜索幾率。使用外鏈css和js腳本，結構行為表現分離，內容能被更多廣泛的設備所訪問,更少的代碼和組件，容易維護，改版方便，不需要變動頁面內容。
28、.Html和xhtml有什么區別?
html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不同:
XHTML元素必須正確的被嵌套，元素必須關閉，標簽必須小寫，必須有根元素。
29、.嚴格模式和混雜模式的區分，以及如何觸發這2種模式?
嚴格模式就是瀏覽器根據web標准去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如
混雜模式是一種向后兼容的解析方法。
觸發標准模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式可以在html文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明
30、.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img
31、CSS選擇符有哪些?優先級算法如何計算?內聯和Important哪個優先級高
回答：CSS選擇符有類選擇符，屬性選擇符，ID選擇符，優先級算法是基於特殊性值進行計算的。分別如下：ID屬性 0.1.0.0
類屬性選擇器，屬性選擇器，偽類 0.0.1.0 元素選擇符，偽元素選擇符 0.0.0.1
通配選擇器對特殊性沒有任何貢獻值。
important優先級高
32.前端頁面有哪三層構成，分別是什么，作用是什么?
結構層：html 表示層:css 行為層：js
33、GET和POST的區別，何時使用POST？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
34、HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
（1）頁面頭部像下面一樣加入一個manifest的屬性；
（2）在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
（3）在離線狀態時，操作window.applicationCache進行需求實現。
35、瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的
在線的情況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問APP，那么瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過APP並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲。 離線的情況下，瀏覽器就直接使用離線存儲的資源。
36、xhtml和html有什么區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：①XHTML 元素必須被正確地嵌套；②XHTML元素必須被關閉；③標簽名必須用小寫字母；④XHTML 文檔必須擁有根元素。
37、css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
38、寫出幾種IE6 BUG的解決方法
①雙邊距BUG float引起的 使用display
②3像素問題 使用float引起的 使用dislpay:inline -3px
③超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
④Ie z-index問題 給父級添加position:relative
⑤Png 透明 使用js代碼 改
⑥Min-height 最小高度 ！Important 解決’
⑦select 在ie6下遮蓋 使用iframe嵌套
⑧為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
39、標簽上title與alt屬性的區別是什么?
Alt當圖片不顯示時用文字代表。Title為該屬性提供信息。
40、描述css reset的作用和用途。
Reset重置瀏覽器的CSS默認屬性瀏覽器的品種不同，樣式不同，然后重置，讓他們統一。
41、解釋css sprites，如何使用。
CSS精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。
42、瀏覽器標准模式和怪異模式之間的區別是什么?
盒子模型，渲染模式的不同；
使用 window.top.document.compatMode 可顯示為什么模式。
43、你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合並、文件最小化/文件壓縮、使用CDN托管，緩存的使用。
44、什么是語義化的HTML?
直觀的認識標簽，對於搜索引擎的抓取有好處。
46、iframe有那些缺點？
（1）頁面樣式調試麻煩，出現多個滾動條；
（2）瀏覽器的后退按鈕失效；
（3）過多會增加服務器的HTTP請求；
（4）小型的移動設備無法完全顯示框架；
（5）產生多個頁面，不易管理；
（6）不容易打印；
（7）代碼復雜，無法被一些搜索引擎解讀。
47、HTML5的form如何關閉自動完成功能
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的項目就可以了。
但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。
關閉輸入框的自動完成功能有3種方法：
（1）在IE的Internet選項菜單里的內容--自動完成里面設置
（2）設置Form的autocomplete為"on"或者"off"來開啟或者關閉自動完成功能
（3）設置輸入框的autocomplete為"on"或者"off"來開啟或者關閉該輸入框的自動完成功能
測試代碼：（在每個form輸入文字然后提交，然后再回來看看能否自動完成，注意要提交后才能有歷史記錄，才可能自動完成；提交后頁面可能出錯，不用管它，后退回去即可）
xml 代碼
打開自動完成功能的Form<br>
<form name="form1" autocomplete="on">
打開自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
關閉自動完成功能的Form<br>
<form name="form1" autocomplete="off">
打開自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
48、如何在頁面上實現一個圓形的可點擊區域？
使用Dreamweaver制作熱點
49、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:black"></div>
50、tite與h1的區別、b與strong的區別、i與em的區別？
（1）b和strong的區別
盲人朋友使用閱讀設備閱讀網絡時：<strong>會重讀，<b>不會
兩者雖然在網頁中顯示效果一樣，但實際目的不同。
<b>這個標簽對應 bold，即文本加粗，其目的僅僅是為了加粗顯示文本，是一種樣式／風格需求；
<strong>這個標簽意思是加強字符的語氣，表示該文本比較重要，提醒讀者／終端注意。為了達到這個目的，瀏覽器等終端將其加粗顯示；
總結：<b>為了加粗而加粗，<strong>為了標明重點而加粗，也可以用其它方式來強調，比如下划線，比如字體加大，比如紅色，等等，可以通過css來改變strong的具體表現。
（2）i和em的區別
同樣，I是Italic(斜體)，而em是emphasize(強調)。
（3）title與h1的聯系：
從網站角度看，title更重於網站信息。title可以直接告訴搜索引擎和用戶這個網站是關於什么主題和內容的。
從文章角度看，h1則是用於概括文章主題。用戶進入內容頁，想看到的當然就是文章的內容，h1文章標題就是最重要的。文章標題最好只有一個，多個h1會導致搜索引擎不知道這個頁面哪個標題內容最重要，導致淡化這個頁面的標題和關鍵詞，起不到突出主題的效果。
區別：
h1突出文章主題，面對用戶，更突出其視覺效果，突出網站標題或關鍵字用title。一篇文章，一個頁面最好只用一個h1，多個h1會稀釋主題。一個網站可以有多個title,最好一個單頁用一個title，以便突出網站頁面主體信息，從seo看，title權重比h1高，適用性比h1廣。標記了h1的文字頁面給予的權重會比頁面內其他權重高很多。一個好的網站是h1和title並存，既突出h1文章主題，又突出網站主題和關鍵字。達到雙重優化網站的效果。
51、介紹一下標准的CSS的盒子模型？與低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四個屬性組成的外邊距(margin)、內邊距(padding)、邊界(border)、內容區(width和height);
標准的CSS盒子模型和低端IE CSS盒子模型不同：寬高不一樣
標准的css盒子模型寬高就是內容區寬高；
低端IE css盒子模型寬高 內邊距﹢邊界﹢內容區；
52、CSS3新增偽類有那些？
p:last-of-type 選擇其父元素的最后的一個P元素
p:last-child 選擇其父元素的最后子元素(一定是P才行)
p:first-of-type 選擇其父元素的首個P元素
p:first-child 選擇其父元素的首個p元素(一定是p才行)
p:only-child 選擇其父元素的只有一個元素(而且這個元素只能是p元素，不能有其他元素)
p:only-of-type 選擇其父元素的只有一個p元素(不能有第二個P元素，其他元素可以有)
選第N個
p:nth-child(n) 選擇其父元素的第N個 剛好是p的元素
p:nth-last-child(n) ..............................................從最后一個子元素開始計數
p:nth-of-type(n) 選擇其父元素的n個元素
p:nth-last-of-type(n) ........................從最后一個子元素開始計數
53、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
（一）元素水平居中的方式
1）行級元素水平居中對齊（父元素設置 text-align:center）
[html] view plain copy
- <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
- <span>行級元素垂直居中</span>
- </div>
2) 塊級元素水平居中對齊（margin: 0 auto）
[html] view plain copy
- <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
- <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>
- </div>
3）浮動元素水平居中
- 寬度不固定的浮動元素
html代碼
[html] view plain copy
- <div class="outerbox">
- <div class="innerbox">我是浮動的</div>
- </div>
CSS樣式
[css] view plain copy
- .outerbox{
- float:left;
- position:relative;
- left:50%;
- }
- .innerbox{
- float:left;
- position:relative;
- right:50%;
- }
- 寬度固定的互動元素
html代碼
[html] view plain copy
- <div class="outerbox">
- <div>我是浮動的</div>
- </div>
css代碼
[css] view plain copy
- .outerbox{
- /*方便看效果 */
- width:500px ;
- height:300px; /*高度可以不設*/
- margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/
- position:relative; /*相對定位*/
- left:50%;
- top:50%;
- }
4）讓絕對定位的元素水平居中對齊
[css] view plain copy
- .center{
- position: absolute; /*絕對定位*/
- width: 500px;
- height:300px;
- background: red;
- margin: 0 auto; /*水平居中*/
- left: 0; /*此處不能省略，且為0*/
- right: 0; /*此處不能省略，且為0*/
- }
經驗分享：水平居中的主要屬性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
（二）元素垂直居中對齊
1）對行級元素垂直居中（heiht與line-height的值一樣）
[css] view plain copy
- height:300px;
- line-height:300px;
2）對塊級元素垂直居中對齊
2.1 父元素高度固定的情況
1）父元素的height與line-height值相同
2）需要垂直居中的元素
vertical-align:middle;// 垂直居中對齊
display:inline|inline-block 塊級元素轉行級元素
HTML代碼
[html] view plain copy
- <div class="center">
- <div class="inner"></div>
- </div>
CSS代碼
[css] view plain copy
- .center{
- width: 500px;
- height:300px;
- line-height: 300px;
- border:1px solid;
- }
- .inner{
- background: blue;
- width: 300px;
- height: 100px;
- display: inline-block;
- vertical-align: middle;
- }
2.2 父元素高度不固定的情況
父元素的padding-top和padding-bottom一樣
54、CSS3有哪些新特性？
（1）選擇器
（2） RGBA和透明度
（3）多欄布局
（4）多背景圖
（5） Word Wrap
（6） 文字陰影
（7） @font-face屬性
（8）圓角(邊框半徑)
（9） 邊框圖片
（10） 盒陰影
（11）盒子大小
（12）媒體查詢
（13） 語音
55、用純CSS創建一個三角形的原理是什么？
采用的是均分原理
盒子都是一個矩形或正方形，從形狀的中心，向4個角上下左右划分4個部
代碼的實現
第一步 保證元素是塊級元素
第二步 設置元素的邊框
第三步 不需要顯示的邊框使用透明色
示例代碼
[css] view plain copy
- .square{
- width:0;
- height:0;
- margin:0 auto;
- border:6px solid transparent;
- border-top: 6px solid red;
- }
56、一個滿屏 品 字布局 如何設計?
（1）元素水平居中對齊
1) 使用margin對齊(推薦)
2) 使用left：50%
3) 使用text-align：行內元素居中對齊，給父元素設置text-align： center
（2）元素對相對窗口定位
1) 使用filxed（推薦）：總是根據瀏覽器的窗口來進行元素的定位
2) 使用absolute定位
3) 使用html和body的width和height填充這個窗口
（3）元素左右定位
1) 使用float左右浮動
2) 使用絕對定位進行左右定位（推薦）
第一種方式：
<!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>
57、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
有時，在寫頁面的時候，會需要將<li>這個塊狀元素橫排顯示，此時就需要將display屬性設置為inline-block，此時問題出現了，在兩個<li>元素之間會出現大約8px左右的空白間隙，
引起這種空白間隔的原因：
瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是我們上面的代碼<li>換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度。
解決方案：
方法一：既然是因為<li>換行導致的，那就可以將<li>代碼全部寫在一排，如下
- <div class="wrap"><h3>li標簽空白測試</h3><ul><li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li></ul></div>
再刷新頁面看就沒有空白了，就是這么神奇~
方法二：我們為了代碼美觀以及方便修改，很多時候我們不可能將<li>全部寫在一排，那怎么辦？既然是空格占一個字符的寬度，那我們索性就將<ul>內的字符尺寸直接設為0，將下面樣式放入樣式表，問題解決。
.wrap ul{font-size:0px;}
- 1
但隨着而來的就是<ul>中的其他文字就不見了，因為其尺寸被設為0px了，我們只好將他們重新設定字符尺寸。
方法三：本來以為方法二能夠完全解決問題，但經測試，將li父級標簽字符設置為0在Safari瀏覽器依然出現間隔空白；既然設置字符大小為0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。同樣隨來而來的問題是li內的字符間隔也被設置了，我們需要將li內的字符間隔設為默認。
.wrap ul{letter-spacing: -5px;}1
之后記得設置li內字符間隔
.wrap ul li{letter-spacing: normal;}
58、為什么要初始化CSS樣式。
因為瀏覽器的兼容的問題，不同瀏覽器有些標簽的默認值是不同的，如果沒有CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
59、absolute的containing block計算方式跟正常流有什么不同？
containing block
一般來說，盒子本身就為其子孫建立了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體采用哪個 containing block 來計算，需要分情況來討論：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則則由這個祖先元素的 padding box 構成。
根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
對於 position 為 static 或 relative 的元素，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
對於 position:fixed 的元素，其 containing block 由 viewport 建立；
對於 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，然后判斷：
如果都找不到，則為 initial containing block。
60、CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？
visibility有如下屬性值：
| 屬性值 |
屬性值描述 |
| visible |
默認值。元素是可見的。 |
| hidden |
元素是不可見的，相當於display：hidden；，但此時仍占用頁面空間 |
| collapse |
當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。 |
| inherit |
規定應該從父元素繼承 visibility 屬性的值。 |
visibility的第三種值collapse：
- 對於一般的元素，它的表現跟display:hidden是一樣的。
- 但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none一樣，也就是說，它們占用的空間也會釋放。
- 在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區別。
- 在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。
在不同瀏覽器下的區別：
61、position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？
一、'display'、'position' 和 'float' 的相互關系
（1）'display' 的值為 'none'
如果 'display' 的值為 'none'，那么 'position' 和 'float' 不起作用。在這種情況下，元素不產生框。因此浮動和定位無效。
（2） 'position' 的值是 'absolute' 或 'fixed'
否則，如果 'position' 的值是 'absolute' 或 'fixed'，框就是絕對定位的，'float' 計算后的值應該是 'none'，並且，'display' 會被按照上表設置。 框的位置將由 'top'，'right'，'bottom' 和 'left' 屬性和該框的包含塊確定。
也就是說，當元素是絕對定位時，浮動失效，'display' 會被按規則重置。
（3）'float' 的值不是 "none"。
按照規則，SPAN 是行內元素，因此不能夠設置其寬度和高度。但是浮動后，'display' 值按照轉換對應表設置后，成為塊級元素
（4）元素是根元素
如果元素是根元素，'display' 的值按照轉換對應表設置。
（5） 否則，應用指定的 'display' 特性值。
二、position跟display、overflow、float下的margin collapse。
margin collapse我覺得這里的意思應該是Collapsing margins，即外邊距折疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合並成一個外邊距。
其中所說的 margin 毗鄰，可以歸結為以下兩點：
•這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。
•這些 margin 都處於普通流中。
（1）兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會折疊。
（2）浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊.
（3）創建了塊級格式化上下文的元素，不和它的子元素發生 margin 折疊
62、對BFC規范(塊級格式化上下文：block formatting context)的理解？
一. BFC 是什么？
有了上面的基礎后，可以正式介紹 BFC 了。從樣式上看，具有 BFC 的元素與普通的容器沒有什么區別，但是從功能上，具有 BFC 的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，並且 BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如 overflow 方法）就是觸發了浮動元素的父元素的 BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。
簡單來說，BFC 就是一種屬性，這種屬性會影響着元素的定位以及與其兄弟元素之間的相互作用。
二.如何觸發 BFC
上面介紹了 BFC 的定義，那么如何觸發 BFC 呢？
滿足下面任一條件的元素，會觸發為 BFC ：
浮動元素，float 除 none 以外的值
絕對定位元素，position（absolute，fixed）
display 為以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）
但是，"display:table" 本身並不產生 BFC，而是由它產生匿名框，匿名框中包含 "display:table-cell" 的框會產 BFC。 總之，對於 "display:table" 的元素，產生 BFC 的是匿名框而不是 "display:table"。
在 CSS3 中，BFC 叫做 Flow Root，並增加了一些觸發條件：
display 的 table-caption 值
position 的 fixed 值，其實 fixed 是 absolute 的一個子類，因此在 CSS2.1 中使用這個值也會觸發 BFC ，只是在 CSS3 中更加明確了這一點。
值得注意的是，在前面 Kayo 已經說明過了，BFC 並不是元素，而是某些元素帶有的一些屬性，因此，是上面這些元素產生了 BFC ，而它們本身並不是 BFC ，這個概念需要區分清楚。
三. BFC 的特性
從整體上看，BFC 是隔離了的容器，這個具體可以表現為三個特性：
（1）BFC 會阻止外邊距折疊
兩個相連的 div 在垂直上的外邊距會發生疊加，有些書籍會把這個情況列作 bug ，這里 Kayo 並不同意，這種折疊雖然會給不熟悉 CSS 布局的開發者帶來一些不便，但實際上它具有完整且具體的折疊規則，並且在主流瀏覽器中都存在，因此 Kayo 更認為這應該是 CSS 的特性。當然，在實際開發中，或許我們有時會不需要這種折疊，這時可以利用 BFC 的其中一個特性——阻止外邊距疊加。
在舉例說明 BFC 如何阻止外邊距折疊之前，首先說明一下外邊距折疊的規則：僅當兩個塊級元素相鄰並且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距才會疊加。也就是說，即便兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會折疊。因此，阻止外邊距折疊只需產生新的 BFC 。
效果如圖：
也可以看 Demo 。
如上圖的例子，三個 div 各包含一個 p 元素，三個 div 及其包含的 p 元素都有頂部和底部的外邊距，但只有第三個 div 的邊距沒有與它的子元素 p 的外邊距折疊。這是因為第三個 div 創建了新的 BFC ，由此可見：創建了 BFC 的元素，不和它的子元素發生外邊距折疊。
（2）BFC 可以包含浮動的元素
這也正是使用 overflow: hidden 與 overflow: auto 方法閉合浮動的原理，使用 overflow: hidden 或 overflow: auto 觸發浮動元素的父元素的 BFC 特性，從而可以包含浮動元素，閉合浮動。
W3C 的原文是“'Auto' heights for block formatting context roots”，也就是 BFC 會根據子元素的情況自動適應高度，即使其子元素中包括浮動元素。
效果如圖：
也可以看 Demo 。
上面的例子中，有兩個 div ，它們各包含一個設置了浮動的 p 元素，但第一個 div 出現了“高度塌陷”，這是因為內部的浮動元素脫離了普通流，因此該 div 相當於一個空標簽，沒有高度和寬度，即高度為 0 ，上下邊框也重疊在一起。而第二個 div 使用 overflow: hidden 觸發了 BFC ，可以包含浮動元素，因此能正確表現出高度，其邊框位置也正常了。
（3）BFC 可以阻止元素被浮動元素覆蓋
如上文所說，浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發 BFC 后可以阻止這種情況的發生。
效果如圖：
也可以看 Demo 。
如上圖的例子，藍色背景的 div 使用 overflow: hidden 觸發了 BFC ，它並不會被它的兄弟浮動元素覆蓋，而是處於它的旁邊。值得注意的是，以上的情況僅僅是元素寬度之和沒有超出父元素寬度的情況，假設浮動元素寬度和它的非浮動兄弟元素寬度都沒有超過父元素寬度，但兩個元素的寬度加起來超出了父元素寬度的時候，非浮動元素會下降到下一行，即處於浮動元素下方，效果如下圖：
也可以看 Demo 。
四. BFC 與 hasLayout
細心的童鞋會發現，在上面的例子中，除了使用 overflow: hidden 觸發 BFC 外，還使用了一個 *zomm: 1 的屬性，這是 IEhack ，因為 IE6-7 並不支持 W3C 的 BFC ，而是使用私有屬性 hasLayout 。從表現上來說，hasLayout 跟 BFC 很相似，只是 hasLayout 自身存在很多問題，導致了 IE6-7 中一系列的 bug 。觸發 hasLayout 的條件與觸發 BFC 有些相似，具體情況 Kayo 會另寫文章介紹。這里 Kayo 推薦為元素設置 IE 特有的 CSS 屬性 zoom: 1 觸發 hasLayout ，zoom 用於設置或檢索元素的縮放比例，值為“1”即使用元素的實際尺寸，使用 zoom: 1 既可以觸發 hasLayout 又不會對元素造成其他影響，相對來說會更為方便。
這時我們需要注意一個問題：既然 hasLayout 有着跟 BFC 相似的功能，那么在實際開發中，就要為需要觸發 BFC 的元素同時觸發 hasLayout ，這樣 BFC 和 hasLayout 具有的一些特殊性質可以在現代瀏覽器和 IE 中同時產生，避免一個元素在不同瀏覽器間的表現因為 BFC 或 hasLayout 出現差異。事實上，在實際開發中很多莫名其妙的問題其實都是因此而產生的。當然同樣地，如果一個元素沒有觸發 BFC ，也要盡量保證它沒有觸發 hasLayout 。
63、移動端的布局用過媒體查詢嗎？
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適合相應的設備顯示；即響應式布局
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
64、使用 CSS 預處理器嗎？喜歡那個？
一、什么是CSS預處理器
CSS預處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發者只需要使用這種語言進行編碼工作，減少枯燥無味的CSS代碼的編寫過程的同時，它能讓你的CSS具備更加簡潔、適應性更強、可讀性更加、層級關系更加明顯、更易於代碼的維護等諸多好處。
CSS預處理器種類繁多，本次就以Sass、Less、Stylus進行比較。
二、語法
在使用CSS預處理器之前最重要的是了解語法，我只寫過stylus，就從網上找了下另外兩種語法的格式，與大家對比分享。
首先Sass和Less都是用的是標准的CSS語法，因此你可以很方便的把已完成的CSS代碼轉為預處理器識別的代碼，Sass默認使用 .sass擴展名，而Less默認使用.Less擴展名。
一下是兩者的語法
/* style.scss or style.less */
h1 {
color: #0982C1;
}
你注意到Sass同時也支持老語法，就是不包含花括號和分號的書寫格式。
/* style.sass */
h1
color: #0982c1
然而Stylus支持的語法就更多樣性，它默認使用.styl的文件擴展名，下面是Stylus語法。
/* style.styl */
h1 {
color: #0982C1;
}
/* omit brackets */
h1
color: #0982C1;
/* omit colons and semi-colons */
h1
color #0982C1
三、變量
你可以在CSS預處理中聲明變量，並在整個樣式單中使用，支持任何類型的變量，例如：顏色、數值（是否包含單位）、文本。然后你可以任意的調取和使用該變量。Sass的變量是必須$開始，然后變量名和值要冒號隔開，跟CSS屬性書寫格式一致。
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $publicColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
而Less的變量名使用@符號開始：
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @publicColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
Stylus對變量名沒有任何限定，你可以是$開始，也可以是任意字符，而且與變量值之間可以用冒號、空格隔開，需要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量，但其對應的值並不會賦予該變量，換句話說，在 Stylus 的變量名不要用 @ 開頭。
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth
上面三種不同的CSS寫法，最終將會生成相同結果：
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
最容易體現它的好處的是，假設你在CSS中使用同一種顏色數十次，如果你要修改顯色，需要找到並修改十次相同的代碼，而有了CSS預處理器，修改一個地方就夠了。
四、嵌套
如果你需要在CSS中相同的parent引用多個元素，你需要一遍一遍的去寫parent。例如：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
然而如果用CSS預處理器，就可以少些很多單詞，而且父節點關系一目了然。
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
stylus還可省略花括號，書寫更加方便，根據個人喜好還可刪除中間冒號。
section
margin: 10px;
nav
height: 25px;
a
color: #0982C1;
&:hover
text-decoration: underline;
最終生成CSS結果是：
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
65、瀏覽器是怎樣解析CSS選擇器的？
按照從上到下，從右到左的順序解析。
.list a {color:blue;}
- 1
先解析到 a 標簽，並將頁面上所有 a 標簽的字體顏色都按照 color:red 進行渲染（藍色），再解析到 .list ，將頁面上所有 .list 類目下的 a 標簽的字體渲染成藍色。是的，你沒有看錯，瀏覽器解析CSS從來就是這么苦逼。
66、margin和padding分別適合什么場景使用？
◆何時應當使用margin
需要在border外側添加空白時。
空白處不需要背景（色）時。
上下相連的兩個盒子之間的空白，需要相互抵消時。如15px+20px的margin，將得到20px的空白。
◆何時應當時用padding
需要在border內測添加空白時。
空白處需要背景（色）時。
上下相連的兩個盒子之間的空白，希望等於兩者之和時。如15px+20px的padding，將得到35px的空白。
◆瀏覽器兼容性問題
在IE5.x、IE6中，為float的盒子指定margin時，左側margin可能會變成兩倍的寬度。通過改用padding或指定盒子為display:inline可以解決。
67、抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）
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/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
68、元素豎向的百分比設定是相對於容器的高度嗎？
（1）豎向百分比 ——之height
.con{
width: 200px;
height: 100px;
background: gray;
margin-left: 200px;
}
p{
/*margin-top: 20%;*/
background: cornflowerblue;
height: 50%;
}
<div class="con">
<p>這是測試的內容！</p>
</div>
可見對於height屬性取值百分比，是現對於容器高度的
（2）豎向百分比——之 間距
對於margin-top、margin-bottom、padding-top、padding-bottom這些豎直方向的內外邊距屬性的百分比取值，
參考的其實是容器的寬度而不是高低。
p{
margin-top: 20%;
background: cornflowerblue;
/*height: 50%;*/
}
69、什么是響應式設計？
隨着移動設備的流行使用，在移動設備端展示的互聯網信息量越來越大，因此網頁內容為了適應移動設備端的顯示效果，從而出現了響應式布局設計理念。
響應式布局設計的理念是：
頁面的布局方式應當根據用戶所處的設備環境（系統平台，屏幕尺寸，屏幕方向）進行正確的響應布局調整，無論用戶使用的是筆記本還是手機或者平板，我們的網站頁面都能夠自動切換分辨率，圖片大小尺寸以及相關的腳本功能，響應式Web設計的目的就是為了：只需一個網站前台源碼，卻能兼容多個終端，而不是為了每個終端去單獨設計網站前台。
70、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？）
答：視差滾動（Parallax Scrolling）就是這樣的效果之一。這種技術通過在網頁向下滾動的時候，控
制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
原理：（1）CSS3實現
優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
（2）jquery實現
通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優點：能兼容到各個版本的，效果可控性好
缺點：開發起來對制作者要求高
（3）插件實現方式
例如：parallax-scrolling，兼容性十分好
71、::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。
單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。
偽元素由雙冒號和偽元素名稱組成。雙冒號是在css3規范中引入的，用於區分偽類和偽元素。但是偽類兼容現存樣式，瀏覽器需要同時支持舊的偽類，比如:first-line、:first-letter、:before、:after等。
對於CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。
72、如何修改chrome記住密碼后自動填充表單的黃色背景 ？
- 情景一：input文本框是純色背景的
- input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0px 1000px white inset;
- border: 1px solid #CCC!important;
- }
- 思路二： 關閉瀏覽器自帶填充表單功能
- 設置表單屬性 autocomplete="off/on" 關閉自動填充表單，自己實現記住密碼
- <!-- 對整個表單設置 -->
- <form autocomplete="off" method=".." action="..">
- <!-- 或對單一元素設置 -->
- <input type="text" name="textboxname" autocomplete="off">
73、你對line-height是如何理解的？
“行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離。基線實在英文字母中用到的一個概念，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。
該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值
74、設置元素浮動后，該元素的display值是多少？
無論行內元素還是塊元素，被設置浮動之后，display屬性值都變為block;
75、怎么讓Chrome支持小於12px 的文字
Chrome 27之前的中文版桌面瀏覽器會默認設定頁面的最小字號是12px，英文版則沒有限制，主要是因為chrome認為漢字小於12px就會增加識別難度，尤其是中文常用的宋體和微軟雅黑。而我們在實際項目中，對於數字/英文內容，其他字體的文本可能會有特殊的需求要求它們以更小的字號來顯示，這個時候就需要取消瀏覽器的自動調整功能了。
一般解決方案是禁止webkit瀏覽器配置調整網頁的字體大小。如下CSS定義方式：
[css] view plaincopy
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }
再講一下text-size-adjust屬性，該屬性用來設定文字大小是否根據設備(瀏覽器)來自動調整顯示大小，safari 3.0+，chrome 1.0+可以支持。屬性值，可以為三種：
percentage：字體顯示的大小；
auto：默認，字體大小會根據設備/瀏覽器來自動調整；
none:字體大小不會自動調整
據說該屬性最初專門是為iPhone版safari設計的，用來自動調整普通網頁在iPhone手機端字體的展現問題，不過，既然是webkit的私有屬性，現在也經常用在webkit內核的桌面瀏覽器限制頁面展示。實際上，這是webkit的一個bug。在最新版的Chrome已經修復。
需要注意的是，不合理的使用-webkit-text-size-adjust:none會造成許多不好的影響。比如將其定義為全局屬性的話，在Chrome中當用戶放大縮小頁面（PC上按住Ctrl滾動鼠標滾輪可縮放網頁）的時候，文字卻維持定義的大小而不放縮，給用戶帶來的不太友好的體驗。所以我們在使用時，最好定義為局部有效，而不要圖省事一句html{-webkit-text-size-adjust:none;}了事。
由於沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，我們就只能通過自己手動設置了：工具->首選項->高級->字體->最小字體大小（像素）。
PC桌面版Chrome 27正式取消了-webkit-text-size-adjust屬性的支持，實際上是修正了原有的bug。如果定義該屬性在Chrome調試窗口會顯示Unknown property name，所有字號最小為12px。但是，移動端chrome/safari目前依然支持-webkit-text-size-adjust屬性。因為此屬性的濫用會使得webkit內核的瀏覽器失去調節能力，對於有視覺障礙的瀏覽者非常不友好（尤其是移動終端），那么現在該如何實現原來的需求呢？
我們可以嘗試通過對文字區域局部應用以下樣式解決：
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
}
12×0.75=9，對於其它瀏覽器來說，12px以下的字號都是可以識別的，這里僅需要對於Chrome瀏覽器進行縮放。可是如何分辨是Safari還是Chrome，目前尚沒有有效的CSS hack。可以通過javascript來判斷是否為Chrome。判斷方法：var isChrome = !!window.chrome;當檢測為Chrome的時候，將.chrome_adjust這個類添加到對應的標簽。
但是，問題還沒有解決。看到網頁在三種瀏覽器的不同表現：
1）、Chrome下由於啟用了縮放，所以字符間距出現問題，影響了美觀，這時候如果追求完美，可能你還會想到js判斷為Chrome后再用CSS屬性letter-spacing去修復；
2）、Firefox不認識-webkit，所以表現正常，9px；
3）、Opera 12.5+能夠識別-webkit-前綴（Opera 12.15版本，內核暫未更換為webkit，但是已能夠識別-webkit-前綴了，而且在檢查元素時還抹掉了前綴），但又能夠顯示12px以下的字號，結果變成了9×0.75，影響了肉眼的識別，這時候，又得給opera添加-o-transform: scale(1);這個屬性。
[css] view plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1); //針對能識別-webkit的opera browser設置
}
76、讓頁面里的字體變清晰，變細用CSS怎么做？
CSS3里面加入了一個“-webkit-font-smoothing”屬性。這個屬性可以使頁面上的字體抗鋸齒,使用后字體看起來會更清晰舒服。加上之后就頓時感覺頁面小清晰了。
77、font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
要搞清楚這個問題，首先要明白字體是怎么回事。一種字體有粗體、斜體、下划線、刪除線等諸多屬性。
但是並不是所有字體都做了這些，一些不常用的字體，或許就只有個正常體，如果你用Italic，就沒有效果了~這時候你就要用Oblique.
可以理解成Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜！
italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果.
77、position:fixed;在android下無效怎么處理？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
78、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
79、display:inline-block 什么時候會顯示間隙？
inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距
80、overflow: scroll時不能平滑滾動的問題怎么處理？
（1）阻止所有能導致頁面滾動的事件。//scroll不能阻止，只能阻止mousewheel，鼠標拽滾動條就悲劇了；
（2）bodyoverflow:hidden//win下右側滾動條會消失導致頁面橫移，移動端阻止不了；
（3）把滾動部分單獨放在一個div里，和彈出部分同級，body和window同高。//所有涉及offset/scrollTop的方法都要修改。fix並且width100%的元素(比如微博頂欄)會壓在內容區滾動條上；
（4）彈出時算scrollTop，給內容區fix然后top移動到目前位置，同時body給一個overflow-y:scroll強撐出滾動條。
81、有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
box-sizing方案 和 absolute position方案
（1）外層box-sizing: border-box; 同時設置padding: 100px 0 0；
（2）內層100像素高的元素向上移動100像素，或使用absolute定位防止占據空間；
（3）另一個元素直接height: 100%; 代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }
</style>
</head>
<body>
<div class="outer">
<div class="A"></div>
<div class="B"></div>
</div>
</body>
</html>
第二種css 代碼 如下 ：
html, body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }
第三種css 代碼 如下：
html, body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
82、png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
三種都是圖片格式，但它們保存的方式不同，所以區別很大，PNG：這是三種中質量最好的一種，保存圖像是靜態圖，可以保留32位色，也能保留透明與半透明區域，如果你是位圖像設計者，要保存一幅自己設計的並且只有一個圖層的圖，建議你選擇Png，但是很多網站不支持PNG上傳 JPG：這是目前使用最廣泛的格式之一，因為其高質量的壓縮率導致的圖片大小減少，而且也支持32位色彩，因此被廣泛使用，一般情況下，任何支持圖片的地方都支持jpg，也為靜態圖，但確點是不支持透明區域 GIF：這也是目前使用最廣泛的格式之一，和jpg相比，有以下不同：顏色數只支持256色，支持透明區域，不支持半透明區域，可以保存為動態圖
83、style標簽寫在body后與body前有什么區別？
寫在head標簽中利於瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。
寫在body標簽后由於瀏覽器以逐行方式對html文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）
84、頁面重構怎么操作？
網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。
也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。
對於傳統的網站來說重構通常是：
表格(table)布局改為DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規范的CSS、如對IE6有效的)
對於移動平台的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴格按規范編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
增強用戶體驗
通常來說對於速度的優化也包含在重構中
壓縮JS、CSS、image等前端資源(通常是由服務器來解決)
程序的性能優化(如數據讀寫)
采用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存
87、你用的得心應手用的熟練地編輯器&開發環境是什么樣子？
Sublime Text 3 + 相關插件編寫前端代碼
Google chrome 、Mozilla Firefox瀏覽器 +firebug 兼容測試和預覽頁面UI、動畫效果和交互功能
Node.js+Gulp
git 用於版本控制和Code Review
88、平時如何管理你的項目？
先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；
編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；
標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；
頁面進行標注（例如 頁面 模塊 開始和結束）；
CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
JS 分文件夾存放 命名以該JS功能為准的英文翻譯。
89、移動端（Android IOS）怎么做好用戶體驗?
清晰的視覺縱線、
信息的分組、極致的減法、
利用選擇代替輸入、
標簽及文字的排布方式、
依靠明文確認密碼、
合理的鍵盤利用
90、Label的作用是什么？是怎么用的？（加 for 或 包裹）
label標簽是用來定義表單控制間的關系，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
主要有以下兩種用法用法：
一、
[html] view plain copy
- <label for = "Name">Number:</label>
- <input type="text" name="Name" id="Name" />
二、
[html] view plain copy
- <label>Data:<input type="text" name="B" /><label>