覽器兼容性問題著實(shí)讓人頭疼，從最初的IE6瀏覽器到現(xiàn)在HTML5+CSS3的興起，依然會(huì)存在兼容性問題，這里分享幾個(gè)小技巧來避免這個(gè)問題。

CSS3風(fēng)格的前綴

如果你正在使用最新的 CSS 代碼，比如 box-sizing，或者 background-clip等，確保你使用了合適的供應(yīng)商前綴。

使用樣式重置

大家可以從網(wǎng)上下載寫好的樣式模板，也可以自己去寫，當(dāng)然建議下載一個(gè)完整版，自行保存，這樣每次使用的時(shí)候可以直接拿來。

避免padding和width一起使用

當(dāng)你給一個(gè)包含 width 的元素加 padding，那它實(shí)際顯示的要比本應(yīng)顯示的大。因?yàn)?width 和 padding 會(huì)加到一起。比如一個(gè)元素 width 是 100px，又給它加了一個(gè) 10px 的 padding。那某些瀏覽器會(huì)將該元素顯示成 120px。

為了解決這個(gè)問題，可以用如下代碼：

清除浮動(dòng)

在寫頁面的時(shí)候要確保我們把浮動(dòng)都清理掉了，如果不清理掉，可能會(huì)出現(xiàn)很奇怪的情況。

可以用下面 CSS 代碼清理浮動(dòng)：

如果要把你大部分代碼都包起來，有個(gè)更簡(jiǎn)單的方法就是把它添加到我們的 wrap 類里面：

這樣的話浮動(dòng)就沒清理掉了，想學(xué)習(xí)更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干貨。

掌握這幾個(gè)小技巧，讓它成為日常開發(fā)的習(xí)慣，會(huì)避免90%的跨瀏覽器不兼容問題，拿走不謝。

.行內(nèi)元素和塊級(jí)元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級(jí)元素?

行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素；其中img是行元素

塊級(jí)元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；

行元素轉(zhuǎn)換為塊級(jí)元素方式：display：block；

2.將多個(gè)元素設(shè)置為同一行?清除浮動(dòng)有幾種方式?

將多個(gè)元素設(shè)置為同一行：float，inline-block

清除浮動(dòng)的方式：方法一：添加新的元素 、應(yīng)用 clear：both；

方法二：父級(jí)div定義 overflow: hidden；

方法三：利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。

.clear{zoom:1;}

.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪異盒模型box-sizing？彈性盒模型|盒布局?

在標(biāo)準(zhǔn)模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin

在怪異模式下的盒模型下，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;

box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算。

4.簡(jiǎn)述幾個(gè)css hack?

(1) 圖片間隙

在div中插入圖片，圖片會(huì)將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；

dt li 中的圖片間隙。hack：給<img>添加display：block；

(2) 默認(rèn)高度，IE6以下版本中，部分塊元素，擁有默認(rèn)高度（低于18px）

hack1：給元素添加：font-size：0；

hack2：聲明：overflow：hidden；

表單行高不一致

hack1：給表單添加聲明：float：left；height： ；border： 0；

鼠標(biāo)指針

hack：若統(tǒng)一某一元素鼠標(biāo)指針為手型：cursor：pointer；

當(dāng)li內(nèi)的a轉(zhuǎn)化塊元素時(shí)，給a設(shè)置float，IE里面會(huì)出現(xiàn)階梯狀

hack1：給a加display：inline-block；

hack2：給li加float：left；

5.href和src區(qū)別? title和alt

href (Hypertext Reference)指定網(wǎng)絡(luò)資源的位置（超文本引用），從而在當(dāng)前元素或者當(dāng)前文檔和由當(dāng)前屬性定義的需要的錨點(diǎn)或資源之間定義一個(gè)鏈接或者關(guān)系，在 link和a 等元素上使用。

src (Source)屬性僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。

title：既是html標(biāo)簽，又是html屬性，title作為屬性時(shí)，用來為元素提供額外說明信息.

alt：alt是html標(biāo)簽的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息.

6.transform？animation？區(qū)別?animation-duration

Transform:它和width、left一樣，定義了元素很多靜態(tài)樣式實(shí)現(xiàn)變形、旋轉(zhuǎn)、縮放、移位及透視等功能，通過一系列功能的組合我們可以實(shí)現(xiàn)很炫酷的靜態(tài)效果（非動(dòng)畫)。

Animation:作用于元素本身而不是樣式屬性,屬于關(guān)鍵幀動(dòng)畫的范疇，它本身被用來替代一些純粹表現(xiàn)的javascript代碼而實(shí)現(xiàn)動(dòng)畫,可以通過keyframe顯式控制當(dāng)前幀的屬性值.

animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

7.nth-of-type | nth-child?

舉例說明：

<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>

li:nth-of-type(2):表示ul下的第二個(gè)li元素

li:nth-child(2)：表示既是li元素又是在ul下的第二個(gè)元素（找不到）。

建議一般使用nth-of-type，不容易出問題。

8. :before 和 ::before 區(qū)別?

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。 對(duì)于CSS2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的。

9.如何讓一個(gè)div 上下左右居中?

答：有三種方法。

方法1： .div1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } <div class="div1"></div> 方法2： .div2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } <div class="div2"></div> 方法3： .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <div class="div3"></div>

10.css2.0 和css3.0

答：css3加強(qiáng)了css2的功能，增加了新的屬性和新的標(biāo)簽，并且刪除了一些冗余的標(biāo)簽，在布局方面減少了代碼量。以前比較復(fù)雜的布局現(xiàn)在一個(gè)屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動(dòng)畫之類的)，還有在盒子模型和列表模塊都進(jìn)行了改進(jìn)。不過CSS3兼容性不好，只有一些高級(jí)版本的瀏覽器支持。

11.彈性盒子模型?flex|box區(qū)別?

(1) 引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的條目進(jìn)行排列、對(duì)齊和分配空白空間。

即便容器中條目的尺寸未知或是動(dòng)態(tài)變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會(huì)根據(jù)布局的需要，調(diào)整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。

當(dāng)容器的尺寸由于屏幕大小或窗口尺寸發(fā)生變化時(shí)，其中包含的條目也會(huì)被動(dòng)態(tài)地調(diào)整。比如當(dāng)容器尺寸變大時(shí)，其中包含的條目會(huì)被拉伸以占滿多余的空白空間；當(dāng)容器尺寸變小時(shí)，條目會(huì)被縮小以防止超出容器的范圍。彈性盒布局是與方向無關(guān)的。

在傳統(tǒng)的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；

而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內(nèi)在的方向限制，可以由開發(fā)人員自由操作。

(2) flex和box的區(qū)別: display：box 是老規(guī)范，要兼顧古董機(jī)子就加上它； 父級(jí)元素有display:box;屬性之后。他的子元素里面加上box-flex屬性。可以讓子元素按照父元素的寬度進(jìn)行一定比例的分占空間。 flex是最新的，董機(jī)老機(jī)子不支持的；

父元素設(shè)置display:flex后，子元素寬度會(huì)隨父元素寬度的改變而改變，而display:box不會(huì)。 Android UC瀏覽器只支持display: box語法；而iOS UC瀏覽器則支持兩種方式。

12.viewport 所有屬性 ？

(1)width :設(shè)置layout viewport的寬度，為一個(gè)正整數(shù)，或字符串'device-width';

(2)initial-scale:設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(3)minimum-scale:允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(4)maximum-scale:允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)。

(5)height:設(shè)置layout viewport的高度，這個(gè)屬性對(duì)我們并不重要，很少使用

(6)user-scalable:是否允許用戶進(jìn)行縮放，值為‘no’或者‘yes’。

安卓中還支持：target-densitydpi，表示目標(biāo)設(shè)備的密度等級(jí)，作用是決定css中的1px 代表多少物理像素

(7)target-densitydpi:值可以為一個(gè)數(shù)值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個(gè)字符串中的一個(gè)

13.如何理解HTML結(jié)構(gòu)的語義化？

所謂標(biāo)簽語義化，就是指標(biāo)簽的含義。語義化的主要目的就是讓大家直觀的認(rèn)識(shí)標(biāo)簽(markup)和屬性(attribute)的用途和作用，對(duì)搜索引擎友好，有了良好的結(jié)構(gòu)和語義我們的網(wǎng)頁內(nèi)容便自然容易被搜索引擎抓取，這種符合搜索引擎收索規(guī)則的做法，網(wǎng)站的推廣便可以省下不少的功夫，而且可維護(hù)性更高，因?yàn)榻Y(jié)構(gòu)清晰,十分易于閱讀。這也是搜索引擎優(yōu)化SEO重要的一步。

14.偽類選擇器和偽元素？c3中引入的偽類選擇器有？c3中偽元素有?

偽類用一個(gè)冒號(hào)來表示，而偽元素則用兩個(gè)冒號(hào)來表示。

偽類選擇器：

由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。

偽元素選擇器：

并不是針對(duì)真正的元素使用的選擇器，而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器；

c3中引入的偽類選擇器：

:root()選擇器，根選擇器，匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同于<html>元素。

:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有，哪怕是一個(gè)空格。

:target()選擇器來對(duì)頁面某個(gè)target元素(該元素的id被當(dāng)做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點(diǎn)擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用。

:first-child()選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。

:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素。

:nth-last-child()從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素

:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似，不同的是它只計(jì)算父元素中指定的某種類型的子元素。

:only-child表示的是一個(gè)元素是它的父元素的唯一一個(gè)子元素。

:first-line為某個(gè)元素的第一行文字使用樣式。

:first-letter 為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式。

:before 在某個(gè)元素之前插入一些內(nèi)容。

:after 在某個(gè)元素之后插入一些內(nèi)容。

c3中偽元素：

::first-line選擇元素的第一行，比如說改變每個(gè)段落的第一行文本的樣式

::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見過最多的就是清除浮動(dòng)

::selection用來改變?yōu)g覽網(wǎng)頁選中文的默認(rèn)效果

15.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

* 拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section) 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除 表單控件，calendar、date、time、email、url、search 新的技術(shù)webworker, websocket, Geolocation

* 移除的元素 純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

支持HTML5新標(biāo)簽：

* IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

* 如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

16.placeholder?如何在ie8上兼容placeholder這個(gè)效果

方法一：

首先判斷瀏覽器是否支持placeholder屬性，如果不支持的話，就遍歷所有input輸入框，獲取placeholder屬性的值填充進(jìn)輸入框作為提示信息，同時(shí)字體設(shè)置成灰色。

當(dāng)輸入框獲得焦點(diǎn)( focus )同時(shí)輸入框內(nèi)文字等于設(shè)置的提示信息時(shí)，就把輸入框內(nèi)清空；

當(dāng)輸入框失去焦點(diǎn)( blur )同時(shí)輸入框內(nèi)文字為空時(shí)，再把獲取的placeholder屬性的值填充

進(jìn)輸入框作為提示信息，同時(shí)字體設(shè)置成灰色；

當(dāng)輸入框內(nèi)有輸入( keydown )時(shí)，此時(shí)輸入框內(nèi)的提示信息已經(jīng)由focus事件清除，此時(shí)只需要把字體再恢復(fù)成黑色即可

此方法的缺點(diǎn)是，不適用于加載完DOM時(shí)即獲得焦點(diǎn)的輸入框，因?yàn)樵谟脩舻慕嵌龋虞d完頁面時(shí)看到的獲得焦點(diǎn)的那個(gè)輸入框，它的提示文字是看不到的。

HTML：<input type="text" id="uname" name="uname" placeholder="請(qǐng)輸入用戶名"/>CSS：.phcolor{ color:#999;}JS$(function(){ 
 //判斷瀏覽器是否支持placeholder屬性
 supportPlaceholder='placeholder'in document.createElement('input'),
 placeholder=function(input){
 var text = input.attr('placeholder'),
 defaultValue = input.defaultValue;
 if(!defaultValue){
 input.val(text).addClass("phcolor");
 }
 input.focus(function(){
 if(input.val() == text){
 $(this).val("");
 }
 });
 input.blur(function(){
 if(input.val() == ""){
 $(this).val(text).addClass("phcolor");
 }
 });
 //輸入的字符不為灰色
 input.keydown(function(){
 $(this).removeClass("phcolor");
 });
 };
 //當(dāng)瀏覽器不支持placeholder屬性時(shí)，調(diào)用placeholder函數(shù)
 if(!supportPlaceholder){
 $('input').each(function(){
 text = $(this).attr("placeholder");
 if($(this).attr("type") == "text"){
 placeholder($(this));
 }
 });
 }});

方法二：

此方法的思路是做一張含有提示文字的圖片作為input輸入框的背景圖，初始時(shí)獲得焦點(diǎn)同時(shí)加載背景圖；

當(dāng)輸入框不為空時(shí)，去掉背景圖；

當(dāng)輸入框?yàn)榭諘r(shí)，加載背景圖；

當(dāng)用戶鍵盤按鍵且輸入框不為空( 輸入字符 )時(shí)，去掉背景圖；

當(dāng)用戶鍵盤按鍵且輸入框?yàn)榭? 刪除字符 )時(shí)，加載背景圖。

此方法的缺點(diǎn)是：需要為每一個(gè)提示文字不同的input制作背景圖片，并且設(shè)置input的樣式。

CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){ 
 //判斷瀏覽器是否支持placeholder屬性
 supportPlaceholder='placeholder' in document.createElement('input');
 if(!supportPlaceholder){
 //初始狀態(tài)添加背景圖片
 $("#uname").attr("class","phbg");
 //初始狀態(tài)獲得焦點(diǎn)
 $("#uname").focus;
 function destyle(){
 if($("#uname").val() != ""){
 $("#uname").removeClass("phbg");
 }else{
 $("#uname").attr("class","phbg");
 }
 }
 //當(dāng)輸入框?yàn)榭諘r(shí)，添加背景圖片；有值時(shí)去掉背景圖片
 destyle();
 $("#uname").keyup(function(){
 //當(dāng)輸入框有按鍵輸入同時(shí)輸入框不為空時(shí)，去掉背景圖片；有按鍵輸入同時(shí)為空時(shí)（刪除字符），添加背景圖片
 destyle();
 });
 $("#uname").keydown(function(){
 //keydown事件可以在按鍵按下的第一時(shí)間去掉背景圖片
 $("#uname").removeClass("phbg");
 });
 }});

方法三：

使用插件：Placeholders.js

17.常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理。

* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。

* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

* 浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

* 漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。

css// .bb{ background-color:#f1ee18; .background-color:#00deff; +background-color:#a200ff; _background-color:#1e0bd1; }

* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。

* IE下,event對(duì)象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對(duì)象有pageX,pageY屬性,但是沒有x,y屬性. * 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

* 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會(huì)觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在可以使用[html5]( http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題

ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。

解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。

* ie6對(duì)png圖片格式支持不好(引用一段腳本處理)

18.簡(jiǎn)述前端優(yōu)化的方式 舊的雅虎34條|h5新添加的方式

1、盡量減少HTTP請(qǐng)求次數(shù)

2、減少DNS查找次數(shù)

3、避免跳轉(zhuǎn)

4、可緩存的AJAX

5、推遲加載內(nèi)容

6、預(yù)加載

7、減少DOM元素?cái)?shù)量

8、根據(jù)域名劃分頁面內(nèi)容

9、使iframe的數(shù)量最小

10、不要出現(xiàn)404錯(cuò)誤

11、使用內(nèi)容分發(fā)網(wǎng)絡(luò)

12、為文件頭指定Expires或Cache-Control 13、Gzip壓縮文件內(nèi)容

14、配置ETag

15、盡早刷新輸出緩沖

16、使用GET來完成AJAX請(qǐng)求

17、把樣式表置于頂部

18、避免使用CSS表達(dá)式（Expression）

19、使用外部JavaScript和CSS

20、削減JavaScript和CSS

21、用<link>代替@import

22、避免使用濾鏡

23、把腳本置于頁面底部

24、剔除重復(fù)腳本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x擁有同樣的API，但是不再支持IE6、7、8。

推薦使用 1.x version，除非你確定IE6、7、8用戶不再訪問網(wǎng)站。

jquery1.11屬于1.x 版本，其兼容IE6、7、8，所以也支持IE9.

20.塊級(jí)？行內(nèi)？空元素?

行內(nèi)元素：和有他元素都在一行上，高度、行高及外邊距和內(nèi)邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內(nèi)元素

塊級(jí)元素：總是在新行上開始，高度、行高及外邊距和內(nèi)邊距都可控制，可以容納內(nèi)斂元素和其他元素；

空元素：在HTML元素中，沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。<br> 就是沒有關(guān)閉標(biāo)簽的空元素。

21.media屬性？screen？All？max-width?min-width?

media 屬性規(guī)定被鏈接文檔將顯示在什么設(shè)備上。media 屬性用于為不同的媒介類型規(guī)定不同的樣式。Screen計(jì)算機(jī)默認(rèn)屏幕，all適用于所有設(shè)備，max-width超過最大寬度就不執(zhí)行，min-width必須大于最小寬度才執(zhí)行。

22.meta標(biāo)簽的name屬性值？

name 屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

meta標(biāo)簽的name屬性語法格式是：＜meta name="參數(shù)" content="具體的參數(shù)值"＞。

其中name屬性主要有以下幾種參數(shù)：

A 、Keywords(關(guān)鍵字)說明：keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。

B 、description(網(wǎng)站內(nèi)容描述) 說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容.

C 、robots(機(jī)器人向?qū)?說明：robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。

content的參數(shù)有all,none,index,noindex,follow,nofollow,默認(rèn)是all。

舉例：＜meta name="robots" content="none"＞D 、author(作者)

23.一般做手機(jī)頁面切圖有幾種方式?

響應(yīng)式布局，彈性布局display：flex，利用js編寫設(shè)定比例，給根元素設(shè)定像素，使用rem為單位。

24.px/em/rem有什么區(qū)別？ 為什么通常給font-size 設(shè)置的字體為62.5%

相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

1、em的值并不是固定的；

2、em會(huì)繼承父級(jí)元素的字體大小。使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

rem是相對(duì)于瀏覽器進(jìn)行縮放的。1rem默認(rèn)是16px，在響應(yīng)式布局中，一個(gè)個(gè)除來轉(zhuǎn)換成rem，太麻煩，所以重置rem

body{font-size=62.5% } 此時(shí)1rem = 10px;若是12px則是1.2rem.

25.sass和scss有什么區(qū)別?sass一般怎么樣編譯的

文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名；語法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

26.如果對(duì)css進(jìn)行優(yōu)化如何處理？

壓縮打包，圖片整合，避免使用Hack，解決兼容問題，使用簡(jiǎn)寫，讓CSS能保證日后的維護(hù)。

27.如何對(duì)css文件進(jìn)行壓縮合并? gulp ?

使用gulp, 首頁全局安裝gulp。

1、npm install --global gulp

2、其次局部安裝gulp。npm install gulp --save-dev

3、在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {

// 將你的默認(rèn)的任務(wù)代碼放在這});

4、運(yùn)行g(shù)ulp。（默認(rèn)的名為 default 的任務(wù)（task）將會(huì)被運(yùn)行，想要單獨(dú)執(zhí)行特定的任務(wù)（task），請(qǐng)輸入 gulp <task> <othertask>）

gulp

合并和壓縮JS、CSS文件

壓縮JS，CSS文件需要引用如下組件：

gulp-minify-css: 壓縮css

28.組件? 模塊化編程？

組件化編程: 將js css html包裝一起提供方法和效果；

模塊化化: 將相同的功能抽取出來 存放在一個(gè)位置進(jìn)行編程

29.圖片和文字在同一行顯示?

1 在css中給div添加上“vertical-align:middle”屬性。

2 分別把圖片和文字放入不同的div中，然后用“margin”屬性進(jìn)行定位，就可以使他們顯示在同一行。

3 把圖片設(shè)置為背景圖片。

30.禁止事件冒泡

event.stopPropagation()

31.禁止默認(rèn)事件

event.preventDefault()

32.a標(biāo)簽中 active hover link visited 正確的設(shè)置順序是什么?

a標(biāo)簽的link、visited、hover、active是有一定順序的

a:link

a:visited

a:hover

a:active

33.a標(biāo)簽中 如何禁用href 跳轉(zhuǎn)頁面 或 定位鏈接

e.preventDefault();

href="javascript：void(0);

34.手機(jī)端上 圖片長(zhǎng)時(shí)間點(diǎn)擊會(huì)選中圖片，如何處理?

onselect=function() {

return false

}

35.video標(biāo)簽的幾個(gè)個(gè)屬性方法

src：視頻的URL poster：視頻封面，沒有播放時(shí)顯示的圖片 preload：預(yù)加載 autoplay：自動(dòng)播放 loop：循環(huán)播放 controls：瀏覽器自帶的控制條 width：視頻寬度 height：視頻高度

36.常見的視頻編碼格式有幾種?視頻格式有幾種?

視頻格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式

視頻編碼格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

37.canvas在標(biāo)簽上設(shè)置寬高 和在style中設(shè)置寬高有什么區(qū)別？

canvas標(biāo)簽的width和height是畫布實(shí)際寬度和高度，繪制的圖形都是在這個(gè)上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒指定或值不正確，就被設(shè)置成默認(rèn)值 。

38.border-image？box-sizing?

Border-image : 圖形化邊框

Box-sizing : 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

語法 ：box-sizing：content-box | border-box

Content-box : padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型 .

Border-box : padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。

39.漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。

降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

“優(yōu)雅降級(jí)”觀點(diǎn)

“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本。

在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。

“漸進(jìn)增強(qiáng)”觀點(diǎn)

“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。

內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

那么問題來了。現(xiàn)在產(chǎn)品經(jīng)理看到IE6,7,8網(wǎng)頁效果相對(duì)高版本現(xiàn)代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會(huì)如何說服他？

40.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型 和 彈性盒模型?

IE當(dāng)padding+border的值小于width或者h(yuǎn)eight:

盒模型的寬度=margin(左右)+width（width已經(jīng)包含了padding和border的值）

盒模型的高度=margin(上下)+height（height已經(jīng)包含了padding和border的值）

當(dāng)padding+border的值大于width或者h(yuǎn)eight:

盒模型的寬度=margin(左右)+padding(左右)+border(左右)

盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個(gè)默認(rèn)行高 19px） 所以相當(dāng)于是padding+border和width或者h(yuǎn)eight比大小，誰大取誰。

以上幾種DOCTYPE都是標(biāo)準(zhǔn)的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會(huì)觸發(fā)標(biāo)準(zhǔn)模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks 模式） CSS3box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算，也是默認(rèn)模式；

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算；

Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個(gè)盒子在其他盒子中的分布方式以及如何處理可用的空間。使用該模型，可以很輕松的創(chuàng)建自適應(yīng)瀏覽器窗口的流動(dòng)布局或自適應(yīng)字體大小的彈性布局。

41.animation對(duì)應(yīng)的屬性

寫法：animation: name duration timing-function delay iteration-count direction;

下面是對(duì)應(yīng)的屬性的介紹

animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。

animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

animation-timing-function 規(guī)定動(dòng)畫的速度曲線。

animation-delay 規(guī)定在動(dòng)畫開始之前的延遲。

animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。

animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

42.transition?

css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫效果改變CSS的屬性值 注意區(qū)別transform，transform是進(jìn)行2D轉(zhuǎn)換的 如移動(dòng)，比例化，反過來，旋轉(zhuǎn)，和拉伸元素。

43.h5新特性？

1、繪畫的 canvas 元素

2、用于媒介回放的 video 和 audio 元素

3、對(duì)本地離線存儲(chǔ)的更好的支持

4、新的特殊內(nèi)容元素，比如 article、footer、header、nav、section 5、新的表單控件，比如 calendar、date、time、email、url、search

44.canvas 如何繪制一個(gè)三角形|正方形

moveto 是移動(dòng)到某個(gè)坐標(biāo)， lineto 是從當(dāng)前坐標(biāo)連線到某個(gè)坐標(biāo)。

這兩個(gè)函數(shù)加起來就是畫一條直線。 畫線要用“筆”，那么MoveTo()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數(shù)確定終止位置（xend,yend）,這樣一條線就畫出來了。 每次與前面一個(gè)坐標(biāo)相連 。

stroke() 方法會(huì)實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色。

<!DOCTYPE HTML5><html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>畫布</title>
 </head> <body>
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
 Your browser does not support the canvas element. </canvas>
 <script type="text/javascript">
 var c=document.getElementById("myCanvas");//三角形
 var cxt=c.getContext("2d");
 cxt.moveTo(10,10);
 cxt.lineTo(50,50);
 cxt.lineTo(10,50);
 cxt.lineTo(10,10);
 cxt.stroke();//正方形
 var cxt2=c.getContext("2d");
 cxt2.moveTo(60,10);
 cxt2.lineTo(100,10);
 cxt2.lineTo(100,50);
 cxt2.lineTo(60,50);
 cxt2.lineTo(60,10);
 cxt2.stroke();
 </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮動(dòng)的幾種方式？

1、父級(jí)div定義 height

2、結(jié)尾處加空div標(biāo)簽 clear:both

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

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

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

6、父級(jí)div 也一起浮動(dòng)

7、父級(jí)div定義 display:table

47.為什么要初始化CSS樣式。

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

48.CSS3有哪些新特性？

CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），

對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）

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

//旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄布局 border-image

49.解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它。

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請(qǐng)求的開銷，因?yàn)檎?qǐng)求耗時(shí)比較長(zhǎng)；請(qǐng)求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個(gè)。對(duì)于未來而言，就不需要這樣做了，因?yàn)橛辛薫http2`。

50.什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍

<style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)住E會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長(zhǎng)短跟網(wǎng)速，電腦速度都有關(guān)系。

解決方法：只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。

51.a點(diǎn)擊出現(xiàn)框，解決方法:

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

參考答案

(1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同

問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

碰到頻率:100%

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

備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。

(2)瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到，float布局最常見的瀏覽器兼容問題）

解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題。

(3)瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(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。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe。

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

問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。

碰到幾率：20%

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

備注 ： 因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）

(6) 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容

問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important;

height:200px; overflow:visible;}

備注：在B/S系統(tǒng)前端開時(shí)，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題。

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

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

列出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： 隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間

inline： 指定對(duì)象為內(nèi)聯(lián)元素。

block： 指定對(duì)象為塊元素。

list-item：指定對(duì)象為列表項(xiàng)目。

inline-block： 指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）

table： 指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）

inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）

table-caption：指定對(duì)象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）

table-cell：指定對(duì)象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）

table-row：指定對(duì)象作為表格行。類同于html標(biāo)簽<tr>（CSS2）

table-row-group：指定對(duì)象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）

table-column：指定對(duì)象作為表格列。類同于html標(biāo)簽<col>（CSS2）

table-column-group： 指定對(duì)象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）

table-header-group： 指定對(duì)象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）

table-footer-group： 指定對(duì)象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）

run-in：根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）

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

inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

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

inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

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

inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

如何居中div, 如何居中一個(gè)浮動(dòng)元素?

參考答案

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

(2)、浮動(dòng)元素居中:

方法一:設(shè)置當(dāng)前div的寬度，然后設(shè)置margin-left:50%; position:relative; left:-250px;其中的left是寬度的一半。

方法二:父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)左移動(dòng)-50%。

方法三:position定位等等。

CSS中l(wèi)ink 和@import 的區(qū)別是？

參考答案

(1)、link屬于HTML標(biāo)簽，而@import是CSS提供的;

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

(3)、import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無兼容問題;

(4)、link方式的樣式的權(quán)重高于@import的權(quán)重.

請(qǐng)列舉幾種清除浮動(dòng)的方法(至少兩種)?

參考答案

(1)、父級(jí)div定義 height

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

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、容易掌握

缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題

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

(2)、結(jié)尾處加空div標(biāo)簽 clear:both

原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題

缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不好

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

(3)、父級(jí)div定義

偽類:after 和 zoom

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

優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

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

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

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

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。

建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。

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

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好

缺點(diǎn)：內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條。

建議：不推薦使用，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。

block，inline和inlinke-block細(xì)節(jié)對(duì)比？

參考答案

?

display:block

a、block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。

b、block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。

c、block元素可以設(shè)置margin和padding屬性。

? display:inline

a、inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?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不會(huì)產(chǎn)生邊距效果。

? display:inline-block

a、簡(jiǎn)單來說就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。

補(bǔ)充說明

a、一般我們會(huì)用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級(jí)別，其實(shí)display的參數(shù)遠(yuǎn)遠(yuǎn)不止這三種，僅僅是比較常用而已。

b、IE（低版本IE）本來是不支持inline-block的，所以在IE中對(duì)內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識(shí)別的，但使用display:inline-block在IE下會(huì)觸發(fā)layout，從而使內(nèi)聯(lián)元素?fù)碛辛薲isplay:inline-block屬性的表象。

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

參考答案

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

漸進(jìn)增強(qiáng)： 從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。

說說浮動(dòng)元素會(huì)引起的問題和你的解決辦法

參考答案

問題：

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

（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后

（3）若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)

解決方法：

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

.clearfix:after{content: ".";display: block;height: 0;clear:

both;visibility: hidden;}

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

清除浮動(dòng)的幾種方法：

(1)、額外標(biāo)簽法，<div

style="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡(jiǎn)潔。）

(2)、使用after偽類

parent:after{

content:" ";

height:0;

visibility:hidden;

display:block;

clear:both;

}

(3)、浮動(dòng)外部元素

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

你有哪些性能優(yōu)化的方法？

參考答案

回答一：

（1）、減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存

，圖片服務(wù)器。

（2）、前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)

（3）、用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

（4）、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

（5）、少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

（6）、避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

（7）、圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳。

回答二：

(1)、減少HTTP請(qǐng)求次數(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請(qǐng)求

為什么要初始化CSS樣式？

參考答案

因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。

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

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

解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧？

參考答案

浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

(1)、使用空標(biāo)簽清除浮動(dòng)。

這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。

(2)、使用overflow。

給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after偽對(duì)象清除浮動(dòng)。

該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置height:0，否則該元素會(huì)比實(shí)際高出若干像素；

CSS樣式表根據(jù)所在網(wǎng)頁的位置，可分為哪幾種樣式表？

參考答案

行內(nèi)樣式表，內(nèi)嵌樣式表，外部樣式表

談?wù)勀銓?duì)CSS中刻度的認(rèn)識(shí)？

參考答案

在CSS中刻度是用于設(shè)置元素尺寸的單位。

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

b、一些屬性可能允許有負(fù)長(zhǎng)度值，或者有一定的范圍限制。如果不支持負(fù)長(zhǎng)度值，那應(yīng)該變換到能夠被支持的最近的一個(gè)長(zhǎng)度值。

c、長(zhǎng)度單位包括：相對(duì)單位和絕對(duì)單位。

相對(duì)長(zhǎng)度單位有： em, ex, ch, rem, vw, vh, vmax,

vmin

絕對(duì)長(zhǎng)度單位有： cm, mm, q, in, pt, pc, px

絕對(duì)長(zhǎng)度單位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

文本相對(duì)長(zhǎng)度單位：em

相對(duì)長(zhǎng)度單位是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(相對(duì)父元素的字體大小倍數(shù))

body { font-size: 14px; }

h1 { font-size: 16px; }

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

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

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

文本相對(duì)長(zhǎng)度單位：rem

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)

只相對(duì)于根元素的大小

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

請(qǐng)你說說em與rem的區(qū)別？

參考答案

rem

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)

只相對(duì)于根元素的大小

rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說它就是一個(gè)相對(duì)單位。

作用：利用rem可以實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式布局，可以利用html元素中字體的大小與屏幕間的比值設(shè)置font-size的值實(shí)現(xiàn)當(dāng)屏幕分辨率變化時(shí)讓元素也變化，以前的天貓tmall就使用這種辦法

em

文本相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸(默認(rèn)16px)。(相對(duì)父元素的字體大小倍數(shù))

em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它與rem之間其實(shí)很相似，區(qū)別在。（相對(duì)是的HTML元素的字體大，默認(rèn)16px）

em與rem的重要區(qū)別： 它們計(jì)算的規(guī)則一個(gè)是依賴父元素另一個(gè)是依賴根元素計(jì)算

請(qǐng)你說說box-sizing屬性的的用法？

參考答案

設(shè)置或檢索對(duì)象的盒模型組成模式

a、box-sizing:content-box： padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(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)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即( Element width = width ) 此屬性表現(xiàn)為怪異模式下的盒模型。

瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？

參考答案

在“標(biāo)準(zhǔn)模式”(Standards Mode) 頁面按照 HTML 與 CSS 的定義渲染，而在“怪異模式”(Quirks Mode)就是瀏覽器為了兼容很早之前針對(duì)舊版本瀏覽器設(shè)計(jì)、并未嚴(yán)格遵循W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式。瀏覽器基于頁面中文件類型描述的存在以決定采用哪種渲染模式；如果存在一個(gè)完整的DOCTYPE則瀏覽器將會(huì)采用標(biāo)準(zhǔn)模式，而如果它缺失則瀏覽器將會(huì)采用怪異模式。

強(qiáng)烈建議閱讀加深理解：怪異模式（Quirks Mode）對(duì) HTML 頁面的影響，這里列下瀏覽器標(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）圖片元素的垂直對(duì)齊方式:

對(duì)于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 屬性默認(rèn)取值為baseline。而當(dāng)inline元素的內(nèi)容只有圖片時(shí)，如table的單元格table-cell。在 IE Quirks Mode 下，table單元格中的圖片的 vertical-align 屬性默認(rèn)為bottom，因此，在圖片底部會(huì)有幾像素的空間。

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

CSS 中，描述font的屬性有font-family，font-size，font-style，font-weigh,上述屬性都是可以繼承的。而在IE Quirks Mode 下，對(duì)于table 元素，字體的某些屬性將不會(huì)從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 中對(duì)于元素的百分比高度規(guī)定如下，百分比為元素包含塊的高度，不可為負(fù)值。如果包含塊的高度沒有顯式給出，該值等同于“auto”（即取決于內(nèi)容的高度）。所以百分比的高度必須在父元素有聲明高度時(shí)使用。

b、當(dāng)一個(gè)元素使用百分比高度時(shí)，在IE Standards Mode 下，高度取決于內(nèi)容的變化，而在Quirks Mode 下，百分比高度則被正確應(yīng)用。

（6）

元素溢出的處理：

在 IE Standard Mode 下，overflow取默認(rèn)值 visible，即溢出可見，這種情況下，溢出內(nèi)容不會(huì)被裁剪，呈現(xiàn)在元素框外。而在Quirks Mode 下，該溢出被當(dāng)做擴(kuò)展box來對(duì)待，即元素的大小由其內(nèi)容決定，溢出不會(huì)被裁剪，元素框自動(dòng)調(diào)整，包含溢出內(nèi)容。

怪異Quirks模式是什么，它和標(biāo)準(zhǔn)Standards模式有什么區(qū)別？

參考答案

從IE6開始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對(duì)CSS的支持很差， IE6將對(duì)CSS提供更好的支持，然而這時(shí)的問題就來了，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？

在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫?huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。

盒模型： 在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

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

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

（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的，甚至完全不知道。）

說說你對(duì)邊距折疊的理解?

參考答案

外邊距折疊： 相鄰的兩個(gè)或多個(gè)外邊距 (margin) 在垂直方向會(huì)合并成一個(gè)外邊距（margin）

相鄰： 沒有被非空內(nèi)容、padding、border 或 clear 分隔開的margin特性. 非空內(nèi)容就是說這元素之間要么是兄弟關(guān)系或者父子關(guān)系

垂直方向外邊距合并計(jì)算:

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

b、參與折疊的margin 都是負(fù)值：取的是其中絕對(duì)值較大的，然后，從0 位置，負(fù)向位移。

c、參與折疊的margin 中有正值，有負(fù)值：先取出負(fù) margin 中絕對(duì)值中最大的，然后，和正margin 值中最大的 margin 相加。

內(nèi)聯(lián)與塊級(jí)標(biāo)簽有何區(qū)別？

參考答案

Html中的標(biāo)簽?zāi)J(rèn)主要分為兩大類型，一類為塊級(jí)元素，另一類是行內(nèi)元素，許多人也把行內(nèi)稱為內(nèi)聯(lián)，所以叫內(nèi)聯(lián)元素，其實(shí)就是一個(gè)意思。為了很好的布局，必須理解它們間的區(qū)別。

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

參考答案

a、使用CSS的display:none，不會(huì)占有原來的位置

b、使用CSS的visibility:hidden，會(huì)占有原來的位置

c、使用HTML5中的新增屬性hidden="hidden"，不會(huì)占有原來的位置

為什么重置瀏覽器默認(rèn)樣式，如何重置默瀏覽器認(rèn)樣式？

參考答案

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

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

b、使用CSSReset可以將所有瀏覽器默認(rèn)樣式設(shè)置成一樣。

c、normalize：也許有些cssreset過于簡(jiǎn)單粗暴，有點(diǎn)傷及無辜，normalize是另一個(gè)選擇。bootstrap已經(jīng)引用該css來重置瀏覽器默認(rèn)樣式，比普通的cssreset要精細(xì)一些，保留瀏覽器有用的默認(rèn)樣式，支持包括手機(jī)瀏覽器在內(nèi)的超多瀏覽器，同時(shí)對(duì)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}

談?wù)勀銓?duì)BFC與IFC的理解？(是什么，如何產(chǎn)生，作用)

參考答案

(1)、什么是BFC與IFC

a、BFC（Block Formatting Context）即“塊級(jí)格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)。一個(gè)框在常規(guī)流中必須屬于一個(gè)格式化上下文，你可以把BFC想象成一個(gè)大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。

b、BFC是W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其它環(huán)境中的布局。比如浮動(dòng)元素會(huì)形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。也可以說BFC就是一個(gè)作用范圍。

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

(2)、如何產(chǎn)生BFC

當(dāng)一個(gè)HTML元素滿足下面條件的任何一點(diǎn)，都可以產(chǎn)生Block Formatting Context：

a、float的值不為none

b、overflow的值不為visible

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

d、position的值不為relative和static

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

(3)、BFC的作用與特點(diǎn)

a、不和浮動(dòng)元素重疊，清除外部浮動(dòng)，阻止浮動(dòng)元素覆蓋

如果一個(gè)浮動(dòng)元素后面跟著一個(gè)非浮動(dòng)的元素，那么就會(huì)產(chǎn)生一個(gè)重疊的現(xiàn)象。常規(guī)流（也稱標(biāo)準(zhǔn)流、普通流）是一個(gè)文檔在被顯示時(shí)最常見的布局形態(tài)，當(dāng)float不為none時(shí)，position為absolute、fixed時(shí)元素將脫離標(biāo)準(zhǔn)流。

說說你對(duì)頁面中使用定位(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)的定位，對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用，也就是使用left，right，bottom，top將不會(huì)生效。

(2)、relative

相對(duì)定位，對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。

(3)、absolute

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

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

(4)、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。

(5)、center

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

(6)、page

與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個(gè)absolute模式。（CSS3）

(7)、sticky

對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。（CSS3）

如何解決多個(gè)元素重疊問題？

參考答案

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

z-index屬性

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

默認(rèn)值：auto

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

取值：

auto：元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文，除非它是根元素。

整數(shù)： 用整數(shù)值來定義堆疊級(jí)別。可以為負(fù)值。 說明：

檢索或設(shè)置對(duì)象的層疊順序。

z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別，并確定該元素是否創(chuàng)建新的局部層疊上下文。

當(dāng)多個(gè)元素層疊在一起時(shí)，數(shù)字大者將顯示在上面。