2019-03-20（前端面試題目匯總）

轉(zhuǎn)載自# web前端開發(fā)面試遇到的題目

1扰藕、解釋html語(yǔ)義化？

回答：用正確的標(biāo)簽做正確的事情芳撒。html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化邓深、結(jié)構(gòu)更清晰、便于對(duì)瀏覽器笔刹、搜索引擎解析芥备；

即使在沒(méi)有css樣式的情況下，也以一種文檔格式顯示舌菜，并且是容易閱讀的萌壳；

搜索引擎的爬蟲也依賴于html標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;

使閱讀代碼的人對(duì)網(wǎng)站更容易對(duì)網(wǎng)站分塊日月，便于閱讀維護(hù)理解袱瓮。

2、塊級(jí)元素與行內(nèi)元素的區(qū)別爱咬？各自有哪些擦盾？

回答：css規(guī)范規(guī)定胯究，每個(gè)元素都有一個(gè)display屬性,確定該元素的類型芍阎，如div的display默認(rèn)值為“block”杯活，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”蜂绎，是“行內(nèi)”元素栅表。

區(qū)別：第一：塊級(jí)元素會(huì)獨(dú)占一行，其寬度自動(dòng)填充父元素寬度师枣；行內(nèi)元素不會(huì)獨(dú)占一行怪瓶，相鄰的行內(nèi)元素會(huì)排列在一行里，直到一行拍不下践美，才會(huì)換行劳殖。

第二：塊級(jí)元素可以設(shè)置width、height拨脉，行內(nèi)元素設(shè)置無(wú)效。（塊級(jí)元素即使設(shè)置了width寬度宣增，也是獨(dú)占一行）玫膀。

第三：塊級(jí)元素可以設(shè)置margin、padding爹脾，行內(nèi)元素水平方向有效帖旨，豎直方向無(wú)效箕昭。（例如：margin-left,margin-right、padding-left解阅、padding-right有效）落竹。

塊級(jí)元素：div、ul货抄、li述召、ol、dl蟹地、dt积暖、dd、h1怪与、h2夺刑、h3、h4...p分别、table form fieldset dir-目錄列表 menu

行內(nèi)元素：a b span img strong select label sub sup textarea input

空元素：br hr img input link meta

3遍愿、DOCTYPE的作用？標(biāo)準(zhǔn)模式和兼容模式各有什么區(qū)別耘斩？為什么html5只需要寫<!doctype html>?

回答：（1）沼填、<!doctype>聲明位于html文檔中的第一行，處于<html>標(biāo)簽之前煌往。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔倾哺。DOCTYPE不存在或者格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。

（2）刽脖、標(biāo)準(zhǔn)模式的排版和js運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行羞海；在兼容模式下，頁(yè)面以寬松的向后兼容的方式顯示曲管，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作却邓。

（3）、HTML不基于SGML院水，因此不需要對(duì)DTD進(jìn)行引用腊徙，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來(lái)運(yùn)行）；

而html4.01基于SGML檬某，所以需要對(duì)DTD進(jìn)行引用撬腾，才能告知瀏覽器文檔所使用的文檔類型。

4恢恼、link和@import的區(qū)別民傻？

回答：（1）、link屬于xhtml標(biāo)簽，除了加載css之外漓踢，還能用于定義rss,定義rel連接屬性等作用牵署；而@import是css提供的，只能用于加載css;

（2）喧半、頁(yè)面被加載時(shí)奴迅，link會(huì)同時(shí)被加載；而@import引用的css會(huì)等到頁(yè)面被加載完后再加載挺据。

（3）取具、@import是css2.1提出的，只有在IE5以上才能被識(shí)別吴菠，而link是xhtml標(biāo)簽者填，無(wú)兼容問(wèn)題。

5做葵、HTML5有哪些新特性占哟？移除了哪些元素？如何處理html5新標(biāo)簽的瀏覽器兼容問(wèn)題酿矢？如何區(qū)分html和html5?

回答：（1）榨乎、h5不是SGML的子集，主要是關(guān)于圖像瘫筐、位置蜜暑、存儲(chǔ)、多任務(wù)等功能的增加策肝。

繪畫canvas肛捍；用于媒介回放的video和audio元素；語(yǔ)義化更好的內(nèi)容元素：article之众、footer拙毫、header、nav棺禾、section缀蹄；本地離線存儲(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逝段。

（2）筛璧、移除的元素：純表現(xiàn)的元素：basefont\big\center\font\s\u;對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame\frameset\noframes;

（3）、處理和html5新標(biāo)簽的瀏覽器兼容問(wèn)題：

當(dāng)在頁(yè)面中使用html5新標(biāo)簽時(shí)惹恃，可能得到三種不同的情況：

1>結(jié)果1：新標(biāo)簽被當(dāng)做錯(cuò)誤處理并且忽略，在DOM構(gòu)建時(shí)會(huì)當(dāng)作這個(gè)標(biāo)簽不存在棺牧；

2>結(jié)果2：新標(biāo)簽當(dāng)作錯(cuò)誤處理巫糙，并在DOM構(gòu)建時(shí)，這個(gè)新標(biāo)簽會(huì)被構(gòu)造成行內(nèi)元素颊乘；

3>結(jié)果3：新標(biāo)簽被識(shí)別為html5標(biāo)簽参淹，然后用DOM節(jié)點(diǎn)對(duì)其進(jìn)行替換。

不能識(shí)別html5標(biāo)簽而不能使用乏悄，解決辦法如下：

1>方法1：實(shí)現(xiàn)標(biāo)簽被識(shí)別

通過(guò)document.creatElement(tagname)方法讓瀏覽器識(shí)別新標(biāo)簽浙值，瀏覽器支持標(biāo)簽后，還可以為新標(biāo)簽增添css樣式檩小。

2>方法2：javascript解決方案

a)使用html5shim:

在head中調(diào)用一下代碼：(也可以下載到自己的網(wǎng)站上進(jìn)行調(diào)用开呐，但是必須在head中)

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> </pre>

b)使用kill IE6

在</body>之前調(diào)用以下代碼：

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 　　　　　　</pre>

（4）、區(qū)分html和html5:doctype聲明规求、新增的結(jié)構(gòu)元素|功能元素筐付。

6、css選擇符阻肿？?jī)?yōu)先級(jí)算法瓦戚？哪些屬性可以繼承？

回答：（1）丛塌、id選擇器较解；（2）、類選擇器赴邻；（3）印衔、標(biāo)簽選擇器；（4）乍楚、相鄰選擇器（h1+p）;（5）当编、子選擇器（ul>li）;（6）、后代選擇器（li a）徒溪；（7）忿偷、通配符選擇器（*）；（8）臊泌、屬性選擇器（a[rel="external"]）;（9）鲤桥、偽類選擇器（a:hover）;

可繼承的屬性：font-size/font-family/color/UL LI Dl DD DT;

不可繼承的樣式：border/margin/padding/height/width/display/position/float/left...;

優(yōu)先級(jí)：！important>id>class>tag>*; !important比內(nèi)聯(lián)優(yōu)先級(jí)高渠概；內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）>嵌入樣式表（當(dāng)前文件中）>外部樣式表（外部文件中）

7茶凳、描述cookies,sessionStorage,localStorage的區(qū)別嫂拴？

回答：（1）、cookie是網(wǎng)站用于標(biāo)識(shí)用戶的身份而儲(chǔ)存在用戶本地終端（client side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）贮喧；cookie數(shù)據(jù)始終在同源的http中攜帶（即使不需要）筒狠，即會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞；（2）箱沦、sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器辩恼，僅在本地保存。

（3）谓形、存儲(chǔ)大性钜痢：cookie數(shù)據(jù)大小不能超過(guò)4k;sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多寒跳，可以達(dá)到5M或更大聘萨。

（4）、有效時(shí)間：localStorage存儲(chǔ)持久數(shù)據(jù)童太，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)米辐；

sessionStorage數(shù)據(jù)在當(dāng)前瀏覽器關(guān)閉后刪除；

cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效康愤，即使窗口或者瀏覽器關(guān)閉儡循。

8、javascript有幾種數(shù)據(jù)類型征冷？劃一下他們的內(nèi)存圖择膝？

回答： 棧:原始數(shù)據(jù)類型（number、string检激、Boolean肴捉、null、undefined）;

堆：引用數(shù)據(jù)類型（對(duì)象叔收、數(shù)組齿穗、和函數(shù)）；

兩種類型的區(qū)別：存儲(chǔ)位置不同：原始數(shù)據(jù)類型存儲(chǔ)在棧中的簡(jiǎn)單數(shù)據(jù)段饺律，占據(jù)空間小窃页，大小固定，屬于被頻繁使用數(shù)據(jù)复濒，所以放入棧中存儲(chǔ)脖卖；

引用數(shù)據(jù)類型存儲(chǔ)在堆中的對(duì)象，占據(jù)空間大巧颈，大小不固定畦木。如果存儲(chǔ)在棧中將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針砸泛，該指針指向堆中該實(shí)體的起始地址十籍。當(dāng)解釋器尋找引用值時(shí)蛆封，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體勾栗。
image

9惨篱、href和src的區(qū)別？

回答：(1)围俘、href表示超文本引用妒蛇，用于建立當(dāng)前元素和文檔之間的鏈接。常用的有l(wèi)ink楷拳、a上使用，當(dāng)前文檔和引用資源之間確立聯(lián)系吏奸，并行下載資源欢揖。

(2)、src是sourse的縮寫奋蔚，src指向的文檔會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在的位置她混。主要是引入，常用與img,script等元素上泊碑，替換當(dāng)前元素坤按，當(dāng)瀏覽器解析該元素時(shí)，會(huì)暫停其他資源的下載和處理馒过，直到完畢臭脓。

10、javascript中call()和apply()方法的區(qū)別腹忽？

回答：ECMAScript規(guī)范給所有函數(shù)都定義了這兩個(gè)方法call()和apply()来累。

call()方法定義：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象窘奏。

apply()方法定義：應(yīng)用某一對(duì)象的一個(gè)方法嘹锁，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

兩者的區(qū)別在與參數(shù)：call()和apply()的第一個(gè)參數(shù)都是要調(diào)用的函數(shù)的對(duì)象着裹，call()的剩余參數(shù)是傳遞給要調(diào)用的函數(shù)的值领猾，而apply()只有兩個(gè)參數(shù)，第一個(gè)是對(duì)象骇扇，第二個(gè)是數(shù)組摔竿，這個(gè)數(shù)組就是該函數(shù)的參數(shù)。

11匠题、javascript原型拯坟？原型鏈？以及如何實(shí)現(xiàn)繼承韭山？

回答：每個(gè)對(duì)象都會(huì)在內(nèi)部初始化一個(gè)屬性郁季，就是prototype（原型）冷溃，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性梦裂，那么他就會(huì)去prototype里面找這個(gè)屬性似枕，這個(gè)prototype又會(huì)有自己的prototype，于是就這樣一直找下去年柠，就是原型鏈的概念凿歼。

如何實(shí)現(xiàn)繼承：

1》構(gòu)造繼承：比如：現(xiàn)在有一個(gè)”動(dòng)物“對(duì)象的構(gòu)造函數(shù)

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　function Animal(){this.species = "動(dòng)物";
　　}</pre>

還有一個(gè)”貓“對(duì)象的構(gòu)造函數(shù)

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　　function Cat(name,color){this.name = name;this.color = color;
　　}</pre>

”貓“繼承”動(dòng)物“

構(gòu)造函數(shù)綁定：使用call()或者apply()方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上冗恨，即在子對(duì)象構(gòu)造函數(shù)中加一行：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　function Cat(name,color){
　　　　Animal.apply(this, arguments);
　　　　this.name = name;this.color = color;
　　}var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動(dòng)物</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

2》原型繼承：如果”貓“的prototype對(duì)象答憔，指向一個(gè)animal的實(shí)例，那么所有貓的實(shí)例就可以繼承animal了掀抹。

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　Cat.prototype = new Animal();
　　Cat.prototype.constructor = Cat;var cat1 = new Cat("大毛","黃色");
　　alert(cat1.species); // 動(dòng)物</pre>

3》實(shí)例繼承：

4》拷貝繼承：

原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)比較簡(jiǎn)單虐拓，建議使用構(gòu)造方式和原型混合方式。

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> function Parent(){ this.name = 'wang';
} function Child(){ this.age = 28;
}
Child.prototype = new Parent();//繼承了Parent傲武，通過(guò)原型

 var demo = new Child();
 alert(demo.age);
 alert(demo.name);//得到被繼承的屬性</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

12蓉驹、前端性能優(yōu)化的方法？

回答：（1）揪利、當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style态兴。

（2）、避免在頁(yè)面的主題布局中使用table疟位，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái)瞻润，顯示比div+css布局慢。

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

（4）楚午、減少http請(qǐng)求次數(shù)：CSS Sprites，JS尿招、CSS源碼壓縮矾柜，圖片大小控制合適；網(wǎng)頁(yè)GZIP壓縮就谜，CDN托管怪蔑，data緩存，圖片服務(wù)器丧荐。

（5）缆瓣、圖片預(yù)加載，將樣式表放在頂部虹统，將腳本放在底部弓坞，加上時(shí)間戳合冀。

（6）府阀、前端模板 JS+數(shù)據(jù)掩宜，減少由于html標(biāo)簽導(dǎo)致的貸款浪費(fèi)旦事，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地?cái)?shù)據(jù)族吻，減少請(qǐng)求次數(shù)帽借。

（7）、少用全局變量超歌，緩存DOM節(jié)點(diǎn)查找的結(jié)果砍艾。減少IO（輸入/輸出）讀取操作。

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

（9）、減少DOM操作禀综；部署前，圖片壓縮苔严、代碼壓縮定枷；優(yōu)化js代碼結(jié)構(gòu)，減少冗余代碼届氢；減少http請(qǐng)求欠窒，合理設(shè)置http緩存；使用內(nèi)容分發(fā)cdn加速退子；靜態(tài)資源緩存岖妄；圖片延遲加載；

13寂祥、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型荐虐？低版本的IE的盒子模型有什么不同？

回答：（1）丸凭、有兩種：IE盒子模型福扬、w3c盒子模型；（2）惜犀、盒模型：content(內(nèi)容)铛碑、padding（內(nèi)邊距）、margin（外邊距）虽界、 border（邊框）汽烦；（3）：區(qū)別：IE的content把padding和border計(jì)算了進(jìn)去。

14莉御、如何居中div?

回答：（1）撇吞、水平居中：給DIV設(shè)置一個(gè)寬度俗冻，然后添加margin:0 auto屬性。

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> div{ width:200px; margin:0 auto;
}</pre>

（2）梢夯、讓絕對(duì)定位的div居中：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */
}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

（3）言疗、水平垂直居中一：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距

div { position: relative; /* 相對(duì)定位或絕對(duì)定位均可 / width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; / 外邊距為自身寬高的一半 / background-color: pink; / 方便看效果 */

}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

（4）、水平垂直居中二：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 未知容器的寬高颂砸，利用 transform 屬性

div { position: absolute; /* 相對(duì)定位或絕對(duì)定位均可 / width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; / 方便看效果 */

}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

（5）噪奄、水平垂直居中三：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> 利用 flex 布局
實(shí)際使用時(shí)應(yīng)考慮兼容性

.container { display: flex; align-items: center; /* 垂直居中 / justify-content: center; / 水平居中 */

} .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */
} </pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

15、position的值定位原點(diǎn)是人乓？

回答：（1）勤篮、absolute：生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位色罚。

（2）碰缔、relative：生成相對(duì)定位的元素，相對(duì)于元素正常位置進(jìn)行定位戳护。

（3）金抡、fixed（老IE不支持）：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位腌且。

（4）梗肝、static：默認(rèn)值，沒(méi)有定位铺董，元素出現(xiàn)在正常的流中巫击。

（5）、inherit:規(guī)定從父元素繼承position的值精续。

16：清除浮動(dòng)的幾種方式坝锰？為什么要清除浮動(dòng)呢？

回答：（1）重付、添加新的元素顷级，應(yīng)用clear:both;（額外標(biāo)簽法）

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.clear{clear:both; height: 0; line-height: 0; font-size: 0}</pre>

（2）、父級(jí)div定義overflow:auto;

（3）确垫、使用：after方法愕把，作用與浮動(dòng)元素的父元素。（偽元素）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　.clearfix:after{ content:"";//設(shè)置內(nèi)容為空

height:0;//高度為0

line-height:0;//行高為0

display:block;//將文本轉(zhuǎn)為塊級(jí)元素

visibility:hidden;//將元素隱藏

clear:both//清除浮動(dòng)

} .clearfix{ zoom:1;為了兼容IE(觸發(fā)IE的haslayout屬性) 　　　
　}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

（4）森爽、使用雙偽元素

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.clearfix:before,.clearfix:after { content: ""; display: block; clear: both;

        } .clearfix { zoom: 1;

        }</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

原因：如果一個(gè)盒子中有一個(gè)子盒子恨豁，并且父盒子沒(méi)有設(shè)置高，子盒子在父盒子中設(shè)置了浮動(dòng)爬迟，那么將來(lái)父盒子的高度就是0橘蜜，下面的元素就會(huì)自動(dòng)部位。（所以可以給父級(jí)DIV定義height；也可以父級(jí)DIV一起浮動(dòng)）计福。

（當(dāng)設(shè)置了zoom的值之后跌捆，所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小，高度寬度就會(huì)重新計(jì)算了象颖，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染佩厚，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題说订。）

17抄瓦、css定義的權(quán)重？

回答：權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1陶冷，class的權(quán)重為10钙姊，id的權(quán)重為100，如下所示：（ps:如果權(quán)重相同埂伦，則最后定義的樣式會(huì)起作用煞额，但是要避免這樣的情況）

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">/權(quán)重為1/ div{
}
/權(quán)重為10/ .class1{
}
/權(quán)重為100/ #id1{
}
/權(quán)重為100+1=101/ #id1 div{
}
/權(quán)重為10+1=11/ .class1 div{
}
/權(quán)重為10+10+1=21/ .class1 .class2 div{
}</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

18、javascript作用域和閉包沾谜？

回答：變量作用域：包括全局變量和局部變量（函數(shù)內(nèi)部可以直接讀取全局變量&函數(shù)外部自然不能讀取函數(shù)內(nèi)部的局部變量）膊毁。

（1）、函數(shù)作用域：函數(shù)的局部變量?jī)H對(duì)函數(shù)內(nèi)部可見基跑。

（2）婚温、詞法作用域：函數(shù)的嵌套關(guān)系是定義的時(shí)候決定的，而不是調(diào)用的時(shí)候決定的涩僻，即嵌套關(guān)系是詞法分析時(shí)確定的，而非運(yùn)行時(shí)決定栈顷。

（3）逆日、全局作用域：在最外層定義的變量，全局對(duì)象的變量萄凤，任何地方隱匿定義的變量室抽。

（4）、沒(méi)有塊級(jí)作用域靡努。

閉包：就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)坪圾。也可以理解成”定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”；

閉包的用途就是一可以讀取函數(shù)內(nèi)部的變量惑朦，二就是讓這些變量的值始終保存在內(nèi)存中兽泄。（內(nèi)存會(huì)消耗過(guò)大，所以不能濫用閉包）漾月。

簡(jiǎn)單的閉包例子：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">　function f1(){var n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}return f2;
　　}var result=f1();
　　result(); // 999</pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

19病梢、AJAX的步驟？

回答：（1）、創(chuàng)建ajax對(duì)象蜓陌；（2）觅彰、發(fā)出HTTP請(qǐng)求；（3）钮热、接收服務(wù)器傳回的數(shù)據(jù)填抬；（4）、更新網(wǎng)頁(yè)數(shù)據(jù)隧期。

20飒责、一個(gè)頁(yè)面上兩個(gè)div左右鋪滿整個(gè)瀏覽器，要保證左邊的div一直為100px厌秒，右邊的div跟隨瀏覽器大小變化（比如瀏覽器為500读拆，右邊就為400；如果瀏覽器為900鸵闪，右邊為800）檐晕？

回答：（1）、浮動(dòng)布局：

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

<pre style="margin-top: 0px; margin-bottom: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div id="left">left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css"> *{ margin: 0; padding: 0;
} #left{ float: left; width: 220px; background-color: green;
} #content{ background-color: orange; margin-left: 220px;
}
</style></pre>

[
復(fù)制代碼

](javascript:void(0); "復(fù)制代碼")

21蚌讼、一個(gè)頁(yè)面從輸入U(xiǎn)RL到頁(yè)面加載顯示完成辟灰，這個(gè)過(guò)程發(fā)生了什么？（流程說(shuō)的越詳細(xì)越好）

回答：輸入地址

（1）篡石、瀏覽器查找域名的IP地址芥喇，這一步包括DNS具體的查找過(guò)程（包括：瀏覽器緩存-》系統(tǒng)緩存-》路由器緩存...）（2）、瀏覽器向web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求凰萨；（3）继控、服務(wù)器的永久重定向響應(yīng)（從http://example.com到http://www.example.com）；（5）胖眷、瀏覽器跟蹤重定向地址武通；（6）、服務(wù)器處理請(qǐng)求珊搀；（7）冶忱、服務(wù)器返回一個(gè)HTTP響應(yīng)；（8）境析、瀏覽器顯示HTML囚枪；（9）、瀏覽器發(fā)送請(qǐng)求獲取嵌入在HTML中的 資源（如圖片劳淆、音頻链沼、視頻、css沛鸵、js等等）忆植；（10）、瀏覽器發(fā)送異步請(qǐng)求。

22朝刊、JS跨域請(qǐng)求的方式耀里，能寫幾種寫幾種?

回答：（1）、通過(guò)jsonp跨域拾氓；

（2）冯挎、通過(guò)修改document.domain來(lái)跨子域；

（3）咙鞍、使用window.name來(lái)進(jìn)行跨域房官；

（4）、使用HTML5新引進(jìn)的window.postMessage方法來(lái)進(jìn)行跨域（ie6 7不支持）续滋；

（5）翰守、CORS需要服務(wù)器設(shè)置header:Access-Control-Allow-Origin；

（6）疲酌、nginx反向代理 這個(gè)方法可以不用目標(biāo)服務(wù)器配合蜡峰，不過(guò)需要搭建一個(gè)中轉(zhuǎn)nginx服務(wù)器，用于轉(zhuǎn)發(fā)請(qǐng)求朗恳。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末湿颅，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子粥诫，更是在濱河造成了極大的恐慌油航，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,546評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件怀浆，死亡現(xiàn)場(chǎng)離奇詭異谊囚，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)执赡，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門镰踏，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人搀玖，你說(shuō)我怎么就攤上這事余境∽つ牛” “怎么了灌诅？”我有些...
    開封第一講書人閱讀 164,911評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)含末。 經(jīng)常有香客問(wèn)我猜拾，道長(zhǎng)，這世上最難降的妖魔是什么佣盒？ 我笑而不...
    開封第一講書人閱讀 58,737評(píng)論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任挎袜，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘盯仪。我一直安慰自己紊搪，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布全景。 她就那樣靜靜地躺著耀石，像睡著了一般。 火紅的嫁衣襯著肌膚如雪爸黄。 梳的紋絲不亂的頭發(fā)上滞伟，一...
    開封第一講書人閱讀 51,598評(píng)論 1贊 305
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音炕贵，去河邊找鬼梆奈。 笑死，一個(gè)胖子當(dāng)著我的面吹牛称开，可吹牛的內(nèi)容都是我干的亩钟。 我是一名探鬼主播，決...
    沈念sama閱讀 40,338評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼钥弯，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼径荔！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起脆霎，我...
    開封第一講書人閱讀 39,249評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤总处，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后睛蛛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鹦马，經(jīng)...
    沈念sama閱讀 45,696評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年忆肾，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了荸频。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡客冈，死狀恐怖旭从，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情场仲，我是刑警寧澤和悦，帶...
    沈念sama閱讀 35,731評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站渠缕，受9級(jí)特大地震影響鸽素，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜亦鳞，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一馍忽、第九天 我趴在偏房一處隱蔽的房頂上張望棒坏。 院中可真熱鬧，春花似錦遭笋、人聲如沸坝冕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評(píng)論 0贊 22
  • 一樁弒父案瓦呼，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)徽诲。三九已至，卻和暖如春吵血，著一層夾襖步出監(jiān)牢的瞬間谎替，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工蹋辅， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钱贯，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,203評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓侦另，卻偏偏與公主長(zhǎng)得像秩命，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子褒傅，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5弃锐？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,486評(píng)論 1贊 45
  • 請(qǐng)參看我github中的wiki殿托，不定期更新霹菊。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,129評(píng)論 2贊 19
  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級(jí)和職位的變化，入門級(jí)到專家級(jí)支竹，廣度和深度都會(huì)有所增加旋廷。 題目類型： 理論知...
    怡寶丶閱讀 2,584評(píng)論 0贊 7
  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1贊 92
  • 妓女不是要等到有了性欲才接客扎运，你不是要等到有了靈感才寫作。 多讀書讀到某個(gè)句子說(shuō)不定就有想寫的沖動(dòng)了饮戳。 ...
    老張蹭茶閱讀 889評(píng)論 0贊 6