Html+css

1.對(duì)WEB標(biāo)準(zhǔn)以及w3c的理解與認(rèn)識(shí)。
標(biāo)簽閉合，標(biāo)簽小寫，不亂嵌套：提高搜索機(jī)器人的搜索幾率；

使用外聯(lián)的css和js，結(jié)構(gòu)行為表現(xiàn)的分離：文件下載與頁面加載速度更快，內(nèi)容能被更廣泛的設(shè)備所訪問；

更少的代碼和組件：容易維護(hù)，改版方便，不需要變動(dòng)頁面內(nèi)容，提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站的易用性。

2.Xhtml和html有什么區(qū)別。
Html（超文本標(biāo)記語言）是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)。

Xhtml（可擴(kuò)展超文本標(biāo)記語言）是一種置標(biāo)語言，表現(xiàn)方式與html類似，不過語法上更加嚴(yán)格，主要不同：

1，所有元素必須被正確嵌套，

2，所有標(biāo)記必須閉合，

3，標(biāo)簽名，屬性名必須小寫字母，

4，所有的屬性必須用“”括起來，

5，所有非標(biāo)簽一部分的><&都必須以編碼形式，

6，所有屬性必須要有值，

7，注釋中不要有--

8，圖片必須要有說明文字

3.css的引入方式有哪些？link和@import的區(qū)別是？
四種：內(nèi)聯(lián)，內(nèi)嵌，外鏈，導(dǎo)入

區(qū)別：

1，link屬于xhtml標(biāo)簽，@import完全是css提供的一種方式，link除了加載css還可以定義rss，定義rel屬性等，@import只能加載css。

2，加載順序差別：link引用的css是同時(shí)被加載的，@import引用的css會(huì)等到頁面全部被下載完才會(huì)再被加載。

3，兼容性差別，@import是css2.1提出，ie5以上才支持，link沒有兼容問題。

4，使用dom控制樣式的差別，當(dāng)用javascript去控制樣式的時(shí)候，只能使用link，@import不是dom能控制的。

5，@import可以在css中再次引入其他樣式表。

4.css選擇符有哪些？哪些屬性可以繼承？優(yōu)先級(jí)如何計(jì)算？內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高？
標(biāo)簽選擇符，類選擇符，id選擇符

繼承的不如指定的，id>class>Tagname

Important優(yōu)先級(jí)高 

5.前端頁面由哪三層構(gòu)成，分別是什么？作用是什么？
結(jié)構(gòu)層：html

由html或者xhtml負(fù)責(zé)創(chuàng)建，運(yùn)用標(biāo)簽對(duì)網(wǎng)頁內(nèi)容的含義作出描述。

表示層：css

由css負(fù)責(zé)創(chuàng)建，對(duì)如何顯示有關(guān)內(nèi)容做出回答。

行為層：javascript

由javascript負(fù)責(zé)創(chuàng)建，負(fù)責(zé)回答應(yīng)該如何對(duì)事件作出反應(yīng)。

6.css的基本語句構(gòu)成是？
選擇器，屬性，屬性值

7.你曾經(jīng)在哪些瀏覽器測試過兼容？這些瀏覽器的內(nèi)核分別是什么？
Ie（ie內(nèi)核），火狐（Gecko），谷歌（webkit），opera（presto）

8.<img>標(biāo)簽上title與alt屬性的區(qū)別是什么？
Alt是在你的圖片因?yàn)槟撤N原因不能加載的時(shí)候在頁面顯示的提示信息，它會(huì)直接輸出在原本加載圖片的地方，title是在鼠標(biāo)懸停在圖片上的顯示的小提示，鼠標(biāo)離開就沒了，絕大數(shù)html標(biāo)簽都支持title。 

9.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的  使用display

2.3像素問題 使用float引起的 使用dislpay:inline -3px 

3.超鏈接hover 點(diǎn)擊后失效  使用正確的書寫順序 link visited hover active

4.Ie z-index問題 給父級(jí)添加position:relative

5.Png 透明 使用js代碼 改

6.Min-height 最小高度 ！Important 解決’

7.select 在ie6下遮蓋 使用iframe嵌套

8.為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

10.描述css reset的作用和用途。
Css reset重置瀏覽器的默認(rèn)css樣式，瀏覽器種類不同，默認(rèn)樣式不一樣，通過使用css reset重置，讓他們統(tǒng)一，方便開發(fā)。

11.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？期待的解決方案包括:
1，盡可能減少http請(qǐng)求數(shù)（文件合并）

2，使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

3，添加Expire/Cache-Control頭

4，啟用Gzip壓縮

5，css放在頁面最上面

6，scrip放在頁面最下面

7，避免在css中使用Expressions

8，把js和css放在外部文件中

9，減少dns查詢

10，壓縮javascript和css

11，避免重定向

12，移除重復(fù)腳本

13，配置實(shí)體標(biāo)簽

14，使用ajax緩存

12.什么是語義化的html？
根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合式的標(biāo)簽（代碼語義化），便于開發(fā)者的閱讀和寫出更加優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器更好地解析。

 13.清除浮動(dòng)有幾種方式？各自的優(yōu)缺點(diǎn)是？
1,父級(jí)定義height（優(yōu)點(diǎn)：代碼少，簡單易掌握；缺點(diǎn)：只適合固定高度元素，無法高度自適應(yīng)）

2，結(jié)尾處使用空標(biāo)簽清除浮動(dòng)：Clear:both（優(yōu)點(diǎn)：理論上能清除所有標(biāo)簽的浮動(dòng)，簡單代碼少瀏覽器支持好；缺點(diǎn)：增加了無意義的標(biāo)簽）

3，父級(jí)定義偽類after和zoom（優(yōu)點(diǎn)：瀏覽器支持好；缺點(diǎn)：代碼多，兩句代碼結(jié)合使用才能讓主流瀏覽器都支持）

4，父級(jí)定義overflow:hidden（優(yōu)點(diǎn)：代碼少，簡單，瀏覽器支持好；缺點(diǎn)：必須定義width或者zoom，同時(shí)不能定義height，不能和position配合使用）

5，父級(jí)定義overflow:auto（優(yōu)點(diǎn)：代碼少，簡單，瀏覽器支持好；缺點(diǎn)：必須定義width或者zoom，同時(shí)不能定義height，內(nèi)部元素高度超過父級(jí)會(huì)出現(xiàn)滾動(dòng)條）

還有，父級(jí)一起浮動(dòng)，父級(jí)定義display:table，結(jié)尾加br的clear：both等

14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
所謂的標(biāo)準(zhǔn)模式是指，瀏覽器按W3C標(biāo)準(zhǔn)解析執(zhí)行代碼；怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣，所以我們稱之為怪異模式。瀏覽器解析時(shí)到底使用標(biāo)準(zhǔn)模式還是怪異模式，與你網(wǎng)頁中的DTD聲明直接相關(guān)，DTD聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型，會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示，忽略DTD聲明,將使網(wǎng)頁進(jìn)入怪異模式(quirks mode)。

標(biāo)準(zhǔn)模式中

IE6不認(rèn)識(shí)!important聲明，IE7、IE8、Firefox、Chrome等瀏覽器認(rèn)識(shí)；而在怪異模式中，IE6/7/8都不認(rèn)識(shí)!important聲明

15.解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它
是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當(dāng)訪問該頁面時(shí)，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了。

頁面icon很多的情況下使用合適。

16.討論CSS hacks，條件引用或者其他?
各個(gè)瀏覽器都認(rèn)識(shí)，這里給firefox用；

 \9所有的ie瀏覽器可識(shí)別；

  \0 是留給ie8的

 + + ie7定了；

 _ _專門留給神奇的ie6；

 :root #test { } :root是給ie9的，

 @media all and (min-width:0px){ #test {} } 這個(gè)是老是跟ie搶著認(rèn)\0的神奇的opera，必須加個(gè)\0,不然firefox，chrome，safari也都認(rèn)識(shí)。。。

 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {} }最后這個(gè)是瀏覽器新貴chrome和safari的。

<!--[if IE 6]><link href="ie6.css" />< ![endif]-->這種注釋的方式只有IE瀏覽器支持，其他瀏覽器只會(huì)把它當(dāng)做html注釋，不起任何作用。一般使用JavaScript或者服務(wù)器端程序判斷User Agent。

17.解釋下瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器?
從后往前判斷。瀏覽器先產(chǎn)生一個(gè)元素集合，這個(gè)集合往往由最后一個(gè)部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個(gè)部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。

18.你能描述一下漸進(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è)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

19.CSS字母大寫?
text-transform 值：
Capitalize 英文拼音的首字母大寫
Uppercase 英文拼音字母全大寫
Lowercase 英文拼音字母全小寫

20.CSS選擇器都有哪些

• 派生選擇器（用HTML標(biāo)簽申明）
• id選擇器（用DOM的ID申明）
• 類選擇器（用一個(gè)樣式類名申明）
• 屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）

除了前3種基本選擇器，還有一些擴(kuò)展選擇器，包括

• 后代選擇器（利用空格間隔，比如div .a{  }）
• 群組選擇器（利用逗號(hào)間隔，比如p,div,#a{  }）

 21.超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？
答案：被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

 22.瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

 23.px和em的區(qū)別
PX:

PX實(shí)際上就是像素，用PX設(shè)置字體大小時(shí)，比較穩(wěn)定和精確。但是這種方法存在一個(gè)問題，當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁面時(shí)，如果改變了瀏覽器的縮放，這時(shí)會(huì)使用我們的Web頁面布局被打破。這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶來說，就是一個(gè)大問題了。因此，這時(shí)就提出了使用“em”來定義Web頁面的字體。EM:

EM就是根據(jù)基準(zhǔn)來縮放字體的大小。EM實(shí)質(zhì)是一個(gè)相對(duì)值，而非具體的數(shù)值。這種技術(shù)需要一個(gè)參考點(diǎn)，一般都是以<body>的“font-size”為基準(zhǔn)。如WordPress官方主題Twenntytwelve的基準(zhǔn)就是14px=1em。

另外，em是相對(duì)于父元素的屬性而計(jì)算的，如果想計(jì)算px和em之間的換算，這個(gè)網(wǎng)站不錯(cuò)，輸入數(shù)據(jù)就可以px和em相互計(jì)算。狠擊這里：px和em換算

Rem:

EM是相對(duì)于其父元素來設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小。而Rem是相對(duì)于根元素<html>，這樣就意味著，我們只需要在根元素確定一個(gè)參考值。

瀏覽器的兼容性

除了IE6-IE8r，其它的瀏覽器都支持em和rem屬性，px是所有瀏覽器都支持。

因此為了瀏覽器的兼容性，可“px”和“rem”一起使用，用"px"來實(shí)現(xiàn)IE6-8下的效果，然后使用“Rem”來實(shí)現(xiàn)代瀏覽器的效果。

 24.透明度

html{

filter:alpha(opacity=50);  /* ie 有效*/

-moz-opacity:0.5; /* Firefox  有效*/

opacity: 0.5; /* 通用，其他瀏覽器  有效*/

 }

Javascript

1.javascript的typeof返回哪些數(shù)據(jù)類型？
Object，number，function，boolean，undefined； 

2.例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換。
強(qiáng)制Number(),String(),Boolean(),Object();

隱式 + - ==  if   while  for in  alert

 3.Split()和join()的區(qū)別。
Join() 函數(shù)獲取一批字符串，然后用分隔符字符串將它們聯(lián)接起來，從而返回一個(gè)字符串。

Split() 函數(shù)獲取一個(gè)字符串，然后在分隔符處將其斷開，從而返回一批字符串。

split，是把一串字符（根據(jù)某個(gè)分隔符）分成若干個(gè)元素存放在一個(gè)數(shù)組里。而Join是把數(shù)組中的字符串連成一個(gè)長串，可以大體上認(rèn)為是split的逆操作。

 4.事件綁定和普通事件有什么區(qū)別？
普通添加事件的方法不支持添加多個(gè)事件，最下面的事件會(huì)覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個(gè)。

 5.數(shù)組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除

Unshift()頭部添加  shift()頭部刪除

6.Ie和dom事件流的區(qū)別？
1.執(zhí)行順序不一樣

2.參數(shù)不一樣

3.事件加不加on

4.this指向問題

7.Ie和標(biāo)準(zhǔn)下有哪些兼容性的寫法？

Var ev = ev || window.event

document.documentElement.clientWidth || document.body.clientWidth

Var target = ev.srcElement||ev.target

8.Ajax的get和post方式的區(qū)別？
1、使用Get請(qǐng)求時(shí),參數(shù)在URL中顯示,而使用Post方式是放在虛擬載體里面,不會(huì)顯示出來。

2、 對(duì)于get方式，服務(wù)器端用Request.QueryString獲取變量的值，對(duì)于post方式，服務(wù)器端用Request.Form獲取提交的數(shù)據(jù)。兩種方式的參數(shù)都可以用Request來獲得。

3、get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制。但理論上，因服務(wù)器的不同而異.

4、get安全性非常低，post安全性較高。

5、get請(qǐng)求需注意緩存問題,post請(qǐng)求不需擔(dān)心這個(gè)問題。

6、post請(qǐng)求必須設(shè)置Content-Type值為application/x-form-www-urlencoded

7、發(fā)送請(qǐng)求時(shí),因?yàn)間et請(qǐng)求的參數(shù)都在url里,所以send函數(shù)發(fā)送的參數(shù)為null,而post請(qǐng)求在使用send方法時(shí),卻需賦予其參數(shù)

9.call和apply的區(qū)別？
call方法:

語法：call(thisObj，Object)

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

說明：

call 方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。

如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。

apply方法：

語法：apply(thisObj，[argArray])

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

說明：

如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError。

如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj， 并且無法被傳遞任何參數(shù)。

10.Ajax請(qǐng)求時(shí)，如何解析json數(shù)據(jù)？
使用eval parse 鑒于安全性考慮 使用parse更靠譜

11.什么是javascript的本地對(duì)象，內(nèi)置對(duì)象和宿主對(duì)象？
本地對(duì)象：獨(dú)立于宿主環(huán)境的ECMAScript實(shí)現(xiàn)提供的對(duì)象。它們包括：Object，F(xiàn)unction，Array，String，Boolean，Number，Date，RegExp，Error，EvalError，RangeError，ReferenceError ，SyntaxErro，TypeError  URIError 可以實(shí)例化。

內(nèi)置對(duì)象 Global和Math ：由ECMASscript實(shí)現(xiàn)提供的、獨(dú)立于宿主環(huán)境的所有對(duì)象不可以實(shí)例化。

宿主對(duì)象：所有的非本地對(duì)象都是宿主對(duì)象即由ECMAscript實(shí)現(xiàn)的宿主環(huán)境提供的對(duì)象。所有BOM和DOM對(duì)象都是宿主對(duì)象，document,window 等。

12.Document load和document ready的區(qū)別？
頁面加載完成有兩種事件，一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。

13.編寫一個(gè)數(shù)組去重的方法。
1.創(chuàng)建一個(gè)新的數(shù)組存放結(jié)果

2.創(chuàng)建一個(gè)空對(duì)象

3.for循環(huán)時(shí)，每次取出一個(gè)元素與對(duì)象進(jìn)行對(duì)比，如果這個(gè)元素不重復(fù)，則把它存放到結(jié)果數(shù)組中，同時(shí)把這個(gè)元素的內(nèi)容作為對(duì)象的一個(gè)屬性，并賦值為1，存入到第2步建立的對(duì)象中。

var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //測試數(shù)組
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
    if (o[s[i]]) {
        count++;//重復(fù)+1
    } else {
        o[s[i]] = 1;//不重復(fù)設(shè)置屬性
        tmp.push(s[i])//加入新數(shù)組
}}
alert(count);alert(tmp)

14.事件委托。

利用冒泡的原理，把事件加到父級(jí)上，觸發(fā)執(zhí)行效果。使用事件委托技術(shù)能讓你避免對(duì)特定的每個(gè)節(jié)點(diǎn)添加事件監(jiān)聽器；相反，事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會(huì)分析從子元素冒泡上來的事件，找到是哪個(gè)子元素的事件。

15.作用域鏈。

當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí)，會(huì)創(chuàng)建變量對(duì)象的的一個(gè)作用域鏈（scope chain）。作用域鏈的用途，是保證對(duì)執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。作用域鏈的前端，始終都是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對(duì)象。如果這個(gè)環(huán)境是一個(gè)函數(shù)，則將其活動(dòng)對(duì)象作為變量對(duì)象。

每一個(gè)函數(shù)都有自己的執(zhí)行環(huán)境，當(dāng)執(zhí)行流進(jìn)一個(gè)函數(shù)時(shí)，函數(shù)環(huán)境就會(huì)被推入一個(gè)環(huán)境棧中，而在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出，把控制權(quán)返回給之前的執(zhí)行環(huán)境，這個(gè)棧也就是作用域鏈。

當(dāng)執(zhí)行函數(shù)時(shí)，將創(chuàng)建函數(shù)的執(zhí)行環(huán)境(調(diào)用對(duì)象),并將該對(duì)象置于鏈表開頭，然后將父級(jí)函數(shù)的調(diào)用對(duì)象鏈接在之后，最后是全局對(duì)象。

16.閉包。

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成"定義在一個(gè)函數(shù)內(nèi)部的函數(shù)"。所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。

1）由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。

2）閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

17.如何阻止事件冒泡和默認(rèn)事件。

//如果提供了事件對(duì)象，則這是一個(gè)非IE瀏覽器 
if  ( e  &&  e.stopPropagation )  { 
　　e.stopPropagation();   //因此它支持W3C的stopPropagation()方法
} else {
　　window.event.cancelBubble  =  true;  //否則，我們需要使用IE的方式來取消事件冒泡  
　　return  false; 
}
//如果提供了事件對(duì)象，則這是一個(gè)非IE瀏覽器 
if  ( e  &&  e.preventDefault ) {
　　e.preventDefault();  //阻止默認(rèn)瀏覽器動(dòng)作(W3C)  
}  else  { 
　　window.event.returnValue  =  false;  //IE中阻止函數(shù)器默認(rèn)動(dòng)作的方式
　　return  false;
}

18.javascript的同源策略。

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號(hào)的組合

19.JS排序算法。

var sort = {
 debug: function(str) {
   if (window.console && window.console.log) {
   console.log(str);
   }
 },
 swap: function(arr, index1, index2) { //數(shù)組數(shù)據(jù)交換
  var temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
 },
 bubbleSort: function(arr) { //冒泡排序
  this.debug("冒泡排序before:" + arr);
  var len = arr.length;
   for (var outer = 0; outer < len - 1; outer++) { //比較的輪數(shù)
    for (var inner = 0; inner < len - outer - 1; inner++) { //每輪比較的次數(shù)
     if (arr[inner] > arr[inner + 1]) {
      this.swap(arr, inner, inner + 1)
     }
    }
    this.debug("第" + (outer + 1) + "輪后:" + arr);
   }
   this.debug("冒泡排序after:" + arr);
  },
 selectionSort: function(arr) { //選擇排序
  this.debug("選擇排序before:" + arr);
  var min, len = arr.length;
  for (var outer = 0; outer < len - 1; outer++) {
   min = outer;
   // 比較最小項(xiàng)目和第outer項(xiàng)之后的剩余數(shù)組項(xiàng), 以尋找更小項(xiàng)
   for (var inner = outer + 1; inner < len; inner++) {
    if (arr[inner] < arr[min]) {
     min = inner;
     this.debug("min--" + min);
    }
   }
   this.swap(arr, outer, min);
   this.debug("第" + (outer + 1) + "輪后:" + arr);
  }
  this.debug("選擇排序after:" + arr);
 },
 insertionSort: function(arr) { //插入排序
  this.debug("插入排序before:" + arr);
  var temp, inner, len = arr.length;
  for (var outer = 1; outer < len; outer++) {
   temp = arr[outer];
   inner = outer;
   while (inner > 0 && arr[inner - 1] >= temp) {
    arr[inner] = arr[inner - 1];
    --inner;
   }
   arr[inner] = temp;
  }
  this.debug("插入排序after:" + arr);
 },
 shellSort: function(arr) { //希爾排序
  this.debug("希爾排序before:" + arr);
  var gaps = [5, 3, 1],
  temp;
  for (var g = 0; g < gaps.length; g++) {
   for (var i = gaps[g]; i < arr.length; i++) {
    temp = arr[i];
    for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
     arr[j] = arr[j - gaps[g]];
    }
    arr[j] = temp;
   }
  }
  this.debug("希爾排序after:" + arr);
 },
 shellSortDynamic: function(arr) { //動(dòng)態(tài)計(jì)算間隔序列的希爾排序
 this.debug("動(dòng)態(tài)計(jì)算間隔序列的希爾排序before:" + arr);
 var N = arr.length,
 h = 1;
 while (h < N / 3) {
  h = 3 * h + 1;
 }
 while (h >= 1) {
  for (var i = h; i < N; i++) {
   for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
    this.swap(arr, j, j - h);
   }
  }
  h = (h - 1) / 3;
 }
 this.debug("動(dòng)態(tài)計(jì)算間隔序列的希爾排序after:" + arr);
},
mergeSort: function(arr) { //歸并排序
 this.debug("歸并排序before:" + arr);
 var len = arr.length,
 step = 1,
 left,
 right;
 var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
  var rightArr = new Array(stopRight - startRight + 1),
  leftArr = new Array(stopLeft - startLeft + 1),
  k = startRight,
  m = 0,
  n = 0;
  for (var i = 0; i < (rightArr.length - 1); ++i) {
   rightArr[i] = arr[k];
   ++k;
  }
  k = startLeft;
  for (var i = 0; i < (leftArr.length - 1); ++i) {
   leftArr[i] = arr[k];
   ++k;
  }
  rightArr[rightArr.length - 1] = Infinity; //哨兵值
  leftArr[leftArr.length - 1] = Infinity; //哨兵值
  for (var k = startLeft; k < stopRight; ++k) {
   if (leftArr[m] <= rightArr[n]) {
    arr[k] = leftArr[m];
    m++;
   } else {
    arr[k] = rightArr[n];
    n++
   }
  }
 }
 if (len < 2) {
  return;
 }
 while (step < len) {
 left = 0;
 right = step;
 while (right + step <= len) {
  mergeArray(arr, left, left + step, right, right + step);
  left = right + step;
  right = left + step;
 }
 if (right < len) {
  mergeArray(arr, left, left + step, right, len);
 }
 step *= 2;
 }
this.debug("歸并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
 this.debug("快速排序before:" + arr);
 var _quickSort = function(arr) {
 var len = arr.length,
 lesser = [],
 greater = [],
 pivot,
 meCall = arguments.callee;
 if (len == 0) {
  return [];
 }
 pivot = arr[0];
 for (var i = 1; i < len; i++) {
  if (arr[i] < pivot) {
   lesser.push(arr[i])
  } else {
   greater.push(arr[i])
  }
 }
 return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //線性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 適用于已排好序的線性結(jié)構(gòu)
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
    return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);

20.解釋jsonp的原理，以及為什么不是真正的ajax。

1、Ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題，無論你是靜態(tài)頁面、動(dòng)態(tài)網(wǎng)頁、web服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)；

2、但是Web頁面上調(diào)用js文件時(shí)則不受是否跨域的影響（凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；

3、于是可以判斷，當(dāng)前階段如果想通過純web端（ActiveX控件、服務(wù)端代理、屬于未來的HTML5之Websocket等方式不算）跨域訪問數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn)js格式的文件里，供客戶端調(diào)用和進(jìn)一步處理； 

4、有一種叫做JSON的純字符數(shù)據(jù)格式可以簡潔的描述復(fù)雜數(shù)據(jù)，更妙的是JSON還被js原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)； 

5、web客戶端通過與調(diào)用腳本一模一樣的方式，來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件（一般以JSON為后綴），顯而易見，服務(wù)器之所以要?jiǎng)討B(tài)生成JSON文件，目的就在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。 

6、客戶端在對(duì)JSON文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了，這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像AJAX，但其實(shí)并不一樣。

7、為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。 

1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來”很像，目的也一樣，都是請(qǐng)求一個(gè)url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝；

2、但ajax和jsonp其實(shí)本質(zhì)上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容，而jsonp的核心則是動(dòng)態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。

3、所以說，其實(shí)ajax與jsonp的區(qū)別不在于是否跨域，ajax通過服務(wù)端代理一樣可以實(shí)現(xiàn)跨域，jsonp本身也不排斥同域的數(shù)據(jù)的獲取。

4、還有就是，jsonp是一種方式或者說非強(qiáng)制性協(xié)議，如同ajax一樣，它也不一定非要用json格式來傳遞數(shù)據(jù)，如果你愿意，字符串都行，只不過這樣不利于用jsonp提供公開服務(wù)。

總而言之，jsonp不是ajax的一個(gè)特例，哪怕jquery等巨頭把jsonp封裝進(jìn)了ajax，也不能改變著一點(diǎn)！

21.CSS預(yù)處理。
Css預(yù)處理器定義了一種新的語言將Css作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作了。預(yù)處理器通常可以實(shí)現(xiàn)瀏覽器兼容，變量，結(jié)構(gòu)體等功能，代碼更加簡潔易于維護(hù)。

目前比較流行的兩種是Sass和Less，其他的還有 Stylus 、Dtcss等。不用你就out了嗎，還是要視情況而定？LESS CSS是個(gè)強(qiáng)大的工具，它彌補(bǔ)了css沒有變量、無法運(yùn)算等一些“先天缺陷”。

22.原型鏈。
函數(shù)的原型對(duì)象constructor默認(rèn)指向函數(shù)本身，原型對(duì)象除了有原型屬性外，為了實(shí)現(xiàn)繼承，還有一個(gè)原型鏈指針proto，該指針指向上一層的原型對(duì)象，而上一層的原型對(duì)象的結(jié)構(gòu)依然類似，這樣利用proto一直指向Object的原型對(duì)象上，而Object的原型對(duì)象用Object.proto = null表示原型鏈的最頂端，如此變形成了javascript的原型鏈繼承，同時(shí)也解釋了為什么所有的javascript對(duì)象都具有Object的基本方法。

23.你知道attribute和property的區(qū)別么。
1. 定義

Property：屬性，所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element并添加了一些屬性，添加的這些屬性分別對(duì)應(yīng)于每個(gè)HTML元素都有下面的這5個(gè)標(biāo)準(zhǔn)特性：id，title，lang，dir，className。DOM節(jié)點(diǎn)是一個(gè)對(duì)象，因此，他可以和其他的JavaScript對(duì)象一樣添加自定義的屬性以及方法。property的值可以是任何的數(shù)據(jù)類型，對(duì)大小寫敏感，自定義的property不會(huì)出現(xiàn)在html代碼中，只存在js中。

Attribute：特性，區(qū)別于property，attribute只能是字符串，大小寫不敏感，出現(xiàn)在innerHTML中，通過類數(shù)組attributes可以羅列所有的attribute。

2. 相同之處

標(biāo)準(zhǔn)的 DOM properties 與 attributes 是同步的。公認(rèn)的（非自定義的）特性會(huì)被以屬性的形式添加到DOM對(duì)象中。如，id，align，style等，這時(shí)候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性。不過傳遞給getAttribute()的特性名與實(shí)際的特性名相同。因此對(duì)于class的特性值獲取的時(shí)候要傳入“class”。

3. 不同之處

對(duì)于有些標(biāo)準(zhǔn)的特性的操作，getAttribute與點(diǎn)號(hào)(.)獲取的值存在差異性。如href，src，value，style，onclick等事件處理程序。

href：getAttribute獲取的是href的實(shí)際值，而點(diǎn)號(hào)獲取的是完整的url，存在瀏覽器差異。

4.瀏覽器兼容性上的差別

在IE<9的瀏覽器中，可以用點(diǎn)號(hào)和getAttribute在相互之間訪問自定義屬性。

IE<8（包括IE8種的IE7兼容模式），property和attribute相同。因?yàn)閍ttribute對(duì)大小寫不敏感，在這種情況下，用getAttribute訪問特性的時(shí)候，瀏覽器會(huì)選擇第一次出現(xiàn)的值。

24.解釋下 JavaScript 中 this 是如何工作的。
在函數(shù)中：this 通常是一個(gè)隱含的參數(shù)。

在函數(shù)外（頂級(jí)作用域中）：在瀏覽器中this 指的是全局對(duì)象；在Node.js中指的是模塊(module)的導(dǎo)出(exports)。

傳遞到eval()中的字符串：如果eval()是被直接調(diào)用的，this 指的是當(dāng)前對(duì)象；如果eval()是被間接調(diào)用的，this 就是指全局對(duì)象。

25.解釋下原型繼承的原理?當(dāng)查找一個(gè)對(duì)象的屬性時(shí)，JavaScript 會(huì)向上遍歷原型鏈，直到找到給定名稱的屬性為止。

26.AMD vs CommonJS?
CommonJS 是javascript模塊化編程的一種規(guī)范，主要是在服務(wù)器端模塊化的規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對(duì)象的屬性。

CommonJS加載模塊是同步的，只有加載完成，才能執(zhí)行后面的操作，主要是由于服務(wù)端的編程模塊文件都存在于本地硬盤，所以加載較快。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。異步方式加載模塊，模塊的加載不影響它后面語句的執(zhí)行。所有依賴這個(gè)模塊的語句，都定義到一個(gè)回調(diào)函數(shù)中，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

27.AMD vs CMD?
1. 對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依賴就近，AMD 推崇依賴前置。

3. AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒有全局 require，而是根據(jù)模塊系統(tǒng)的完備性，提供 seajs.use 來實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD 里，每個(gè) API 都簡單純粹。

4. 還有一些細(xì)節(jié)差異，具體看這個(gè)規(guī)范的定義就好，就不多說了。

28.擴(kuò)展 JavaScript 內(nèi)置對(duì)象?
一般來說，業(yè)界公認(rèn)的是持后一種觀點(diǎn)，不過如果你覺得你的代碼是可控的話，擴(kuò)展內(nèi)置對(duì)象的prototype是很方便的一種方式（prototype庫中大量使用了這種手段），尤其是擴(kuò)展后以原對(duì)象實(shí)例為this上下文調(diào)用，api比較美觀直接，否則的話，把對(duì)象實(shí)例作為參數(shù)傳給方法，看起來就不那么“面向?qū)ο?rdquo;了，當(dāng)然，這個(gè)問題可以通過給原對(duì)象封裝一層wrap來解決，比如jquery的包裝，可以在$實(shí)例化的dom對(duì)象上調(diào)用方法，并且可以鏈?zhǔn)秸{(diào)用。

29.如何從瀏覽器的 URL 中獲取查詢字符串參數(shù)?

//正則

function getQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

    var r = window.location.search.substr(1).match(reg);

    if (r != null) return unescape(r[2]); return null;

}

//獲取URl參數(shù)

function parseUrl(url) {

    var parse = url.substring(url.indexOf("?") + 1),

    params = parse.split("&"),

    len = params.length,

    item = [],

    param = {};

    for (var i = 0; i < len; i++) {

        item = params[i].split("=");

        param[item[0]] = item[1];

    }

    return param;

}

// demo:

parseUrl("www.baidu.com/js?name=baidu&age=22&page=3")

// 結(jié)果

{name: "haorooms", age: "21", page: "2"}

30.什么是 "use strict"; ? 使用它的好處和壞處分別是什么?
嚴(yán)格模式

1. 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;

2. 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全;

3. 提高編譯器效率，增加運(yùn)行速度;

4. 為未來新版本的Javascript做好鋪墊。

缺點(diǎn)：

現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時(shí)這些本來是嚴(yán)格模式的文件，被 merge 后，這個(gè)串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)。

31.常見兼容性問題?
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)生的雙倍距離 #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í)別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。

接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。

css

  .bb{

   /*所有識(shí)別*/

  . /*IE6、7、8識(shí)別*/

  +/*IE6、7識(shí)別*/

  _/*IE6識(shí)別*/

  }

IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,

也可以使用getAttribute()獲取自定義屬性;

Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

IE下,even對(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 {}

32.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

繪畫 canvas

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

本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術(shù)webworker, websockt, 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)元素\功能元素

 33.前端需要注意哪些SEO?
合理的title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內(nèi)容高度概括，長度合適，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同；keywords列舉出重要關(guān)鍵詞即可
語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁
重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長度有限制，保證重要內(nèi)容一定會(huì)被抓取
重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容
少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容
非裝飾性圖片必須加alt
提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

34.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別?
offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，如果有滾動(dòng)條，也不包含滾動(dòng)條

scrollWidth/scrollHeight返回值包含content + padding + 溢出內(nèi)容的尺寸

 以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論