前端網(wǎng)頁(yè)相關(guān)及瀏覽器兼容問(wèn)題

1、TML、DIV+CSS 布局，,jquery 并掌握 CSS 在各種瀏覽器版本下的差異和兼容性在設(shè)計(jì)的時(shí)候，應(yīng)該注意 css 樣式兼容不同瀏覽器問(wèn)題，特別是對(duì)完全使用 DIV CSS 設(shè)計(jì)的網(wǎng)，就應(yīng)該更注意 IE6 IE7 FF 對(duì)CSS 樣式的兼容，不然，你的網(wǎng)亂可能出去不想出現(xiàn)的效果！所有瀏覽器 通用height: 100px;IE6_height: 100px;IE6*height: 100px;IE7*+height: 100px;IE7、FF 共用height: 100px !important;一、CSS HACK1, !important隨著 IE7 對(duì)!important 的支

2、持, !important 方法現(xiàn)在只針對(duì) IE6 的 HACK.(注意寫(xiě)法.記得該位置需要提前.)以下為的內(nèi)容： #wrapperwidth: 100px!important; width: 80px;2, IE6/IE7 對(duì) FireFox以下為的內(nèi)容：*+html 與 *html 是 IE 特有的, firefox 暫不支持.而*+html 又為 IE7 特有. #wrapper#wrapper width: 120px; *html #wrapper width: 80px;*+html #wrapper width: 60px;注意:*+html 對(duì) IE7 的 HACK 必須保證

3、HTML 頂部有關(guān)于 clear float 的原理可參見(jiàn) How To Clear Floats Without Structural Markup將以下代碼加入 Global CSS 中,給需要閉合的 div 加上以下為的內(nèi)容：.clearfix:aftercontent:”.”; display:block; height:0; clear:both; visibility:hidden;.clearfixdisplay:inline-block;class=”clearfix”即可,屢試不爽.clearfix display:block;三、其他兼容技巧1, FF 下給 div 設(shè)置

4、padding后會(huì)導(dǎo)致 width 和 height 增加, 但I(xiàn)E 不會(huì).(可用!important解決) 如 width:115px !important;width:120px;padding:5px;必須注意的是， !important; 一定要2, 居中問(wèn)題.面。垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過(guò) vertical-align: middle.( 注意內(nèi)容不要換行.)水平居中. margin: 0 auto;(當(dāng)然不是萬(wàn)能)3, 若需給 a4, FF 和 IE倍等問(wèn)題.內(nèi)內(nèi)容加上 樣式,需要設(shè)置 display: block;(常見(jiàn)于導(dǎo)航

5、)對(duì) BOX理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float 的div 在ie 下 margin 加5, ul在 FF 下面默認(rèn)有 list-style 和 padding .最好事先, 以避免不必要的麻煩.(常見(jiàn)于導(dǎo)航和內(nèi)容列表)6, 作為外部 wrapper 的 div 不要定死高度,適應(yīng).最好還加上 overflow: hidden.以達(dá)到高度自7, 關(guān)于手形光標(biāo). cursor: poer.兼容代碼:兼容最的模式。而hand只適用于 IE.submitbutton floeft;width: 40px;height: 57px;margop: 24px;margin-right: 1

6、2px;*html .submitbutton margop: 21px;*+html .submitbutton margop: 21px;瀏覽器兼容：當(dāng)使用不同的瀏覽器（Firefox IE7 IE6）同一個(gè)，或者頁(yè)面的時(shí)候，會(huì)出現(xiàn)一些不兼容，有的顯示出來(lái)正常，有的顯示出來(lái)不正常，在編寫(xiě) CSS 的時(shí)候會(huì)很惱火，剛修復(fù)了這個(gè)瀏覽器，結(jié)果另外一個(gè)瀏覽器卻出了新問(wèn)題。而兼容就是一種辦法，能讓你在一個(gè) CSS 里面獨(dú)立的寫(xiě)支持不同瀏覽器的樣式。這下就和諧了。呵呵！最近微軟發(fā)布的IE7 瀏覽器的兼容性確實(shí)給一些網(wǎng)頁(yè)制作添加了一個(gè)沉重的負(fù)擔(dān)，雖然 IE7 已經(jīng)標(biāo)準(zhǔn)化，但還是有許多和 FF 不同的地方

7、，所以需要用到 IE7 的兼容。有一點(diǎn)邏輯的人都會(huì)知道可以用 IE 和 FF 的兼容結(jié)合起來(lái)使用，下面介紹三個(gè)兼容，例如：（適合新手，呵呵，高手就在這里路過(guò)吧。）程序代碼第一個(gè)兼容，IE FF 所有瀏覽器 公用（其實(shí)也不算是兼容）height:100px;第二個(gè)兼容 IE6_height:100px;第三個(gè)兼容 IE6 IE7 公用*height:100px;介紹完了這三個(gè)兼容了，下面再來(lái)看看如何在一個(gè)樣式里分別給一個(gè)屬性定義 IE6IE7 FF的兼容，看下面的代碼，順序不能錯(cuò)哦：程序代碼height:100px;*height:120px;_height:150px;下面我簡(jiǎn)單解釋一下各瀏覽

8、器怎樣理解這三個(gè)屬性：在 FF 下，第 2、3 個(gè)屬性 FF 不認(rèn)識(shí)，所以它讀的是 height:100px;在 IE7 下，第三個(gè)屬性 IE7 不認(rèn)識(shí)，所以它讀第 1、2 個(gè)屬性，又因?yàn)榈诙€(gè)屬性覆蓋了第一個(gè)屬性，所以 IE7 最終讀出的是第 2 個(gè)屬性 *height:120px;在 IE6 下，三個(gè)屬性 IE6 都認(rèn)識(shí)，所以三個(gè)屬性都可以，又因?yàn)榈谌齻€(gè)屬性覆蓋掉前 2 個(gè)屬性，所以 IE6 最終的是第三個(gè)屬性。1 針對(duì)firefox ie6 ie7 的 css 樣式現(xiàn)在大部分都是用!important 來(lái) hack，對(duì)于 ie6 和 firefox 測(cè)試可以正常顯示，但是 ie7 對(duì)!i

9、mportant 可以正確解釋?zhuān)瑫?huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！找到一個(gè)針對(duì) IE7 不錯(cuò)的 hack 方式就是使用“*+html”，現(xiàn)在用 IE7 瀏覽一下，應(yīng)該沒(méi)有問(wèn)題了。現(xiàn)在寫(xiě)一個(gè) CSS 可以這樣：以下為的內(nèi)容：#1 color: #333; * html #1 color: #666; *+html #1 color: #999; 那么在 firefox 下字體顏色顯示為#333，IE6 下字體顏色顯示為#666，IE7 下字體顏色顯示為#999。2 css 布局中的居中問(wèn)題主要的樣式定義如下：body TEXT-ALIGN: center;#center MARGIN-RIGHT: aut

10、o; MARGIN-LEFT: auto; 說(shuō)明：首先在父級(jí)元素定義 TEXT-ALIGN: center;這個(gè)的意思就是在父級(jí)元素內(nèi)的內(nèi)容居中；對(duì)于 IE 這樣設(shè)定就已經(jīng)可以了。但在 mozilla 中不能居中。解決辦法就是在auto;MARGIN-LEFT: auto; ”素定義時(shí)候設(shè)定時(shí)再加上“MARGIN-RIGHT:需明的是，如果你想用這個(gè)方法使整個(gè)頁(yè)面要居中，建議不要套在一個(gè) DIV 里，你可以依次拆出多個(gè) div，只要在每個(gè)拆出的 div 里定義 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。盒模型不同解釋#box width:600px;

11、 /for ie6.0- width:500px; /for ff+ie6.0#box width:600px!important /for ff width:600px; /for ff+ie6.0 width :500px; /for ie6.0-浮動(dòng) ie 產(chǎn)生的雙倍距離#box floeft; width:100px; margin:0 0 0 100px; /這種情況之下 IE 會(huì)產(chǎn)生 200px 的距離 display:inline; /使浮動(dòng)忽略這里細(xì)說(shuō)一下block,inline 兩個(gè)元素,Block 元素的特點(diǎn)是:總是在新行上開(kāi)始,高度,寬度,行高,邊距都可以控制(塊元素);

12、Inline 元素的特點(diǎn)是:和其他元素在同一行上,不可控制(內(nèi)嵌元素);#box display:block; /可以為內(nèi)嵌元素模擬為塊元素 display:inline; /實(shí)現(xiàn)同一行排列的的效果 diplay:table;IE 不認(rèn)得 min-這個(gè)定義，但實(shí)際上它把正常的 width 和height 當(dāng)作有 min 的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用 min-width 和 min-height 的話(huà)，IE 下面根本等于沒(méi)有設(shè)置寬度和高度。比如要設(shè)置背景，這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣：#box width: 80px;

13、 height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;6 頁(yè)面的最小寬度min-width 是個(gè)非常方便的 CSS 命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但 IE 不認(rèn)得這個(gè)，而它實(shí)際上把 width 當(dāng)做最小寬度來(lái)使。為了讓這一命令在 IE 上也能用，可以把一個(gè)放到 下，然后為 div 指定一個(gè)類(lèi)：然后 CSS 這樣設(shè)計(jì)：#container min-width: 600px; width:expres“600px”: “auto” );

14、_r_r(tWidth 600?第一個(gè) min-width 是正常的；但第 2 行的 width 使用了 Javascript，這只有 IE 才認(rèn)得，這也會(huì)讓你的 HTML 文檔不太正規(guī)。它實(shí)際上通過(guò) Javascript 的判斷來(lái)實(shí)現(xiàn)最小寬度。清除浮動(dòng).hackbox display:table; /將對(duì)象作為塊元素級(jí)的表格顯示或者.hackbox clear:both;或者加入:after（偽對(duì)象）,設(shè)置在對(duì)象后發(fā)生的內(nèi)容，通常和 content 配合使用，IE 不支持此偽對(duì)象，非 Ie 瀏覽器支持，所 以并不影響到 IE/WIN 瀏覽器。這種的最麻煩的#box:after content

15、: “.”; display: block; height: 0; clear: both; visibility: hidden;DIV 浮動(dòng) IE 文本產(chǎn)生 3 象素的 bug左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有 3px 的間距.#box floeft; width:800px;#left floeft; width:50%;#right width:50%;*html#left margin-right:-3px; /這句是關(guān)鍵HTML 代碼 9 屬性選擇器(這個(gè)不能算是兼容,是隱藏 css 的一個(gè) bug)divid這個(gè)對(duì)于 IE6.0 和 IE6.0

16、 以下的版本都隱藏,FF 和 OPera 作用選擇器還是有區(qū)別的,子選擇器的范圍從形式來(lái)說(shuō)縮小了,屬性選擇器的范屬性選擇器圍比較大,如10 IE 捉迷藏中,所有p中有 id 的都是同樣式的.當(dāng) div 應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些，DIV 等這個(gè)時(shí)候容易發(fā)生捉迷藏。有些內(nèi)容顯示不出來(lái)，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁(yè)面。解決辦法：對(duì)#layout 使用 line-height 屬性 或者給#layout 使用固定高和寬。頁(yè)面結(jié)構(gòu)盡量簡(jiǎn)單。11 高度不適應(yīng)高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或 paddign 時(shí)。例：p 對(duì)象中

17、的內(nèi)容CSS：#box background-color:#eee; #box p margop: 20px;margin-bottom: 20px; text-align:center; 解決方法：在 P 對(duì)象上下各加 2 個(gè)空的 div 對(duì)象 CSS 代碼：.1height:0px;overflow:hidden;或者為 DIV 加上 border 屬性。IE 瀏覽器（也就是 IE 下不顯示）*:lang(zh) select font:12px !important; select:empty font:12px !important;這里 select 是選擇符，根據(jù)情況更換。第二句是

18、 MAC 上 safari 瀏覽器獨(dú)有的。僅 IE7 識(shí)別*+html 當(dāng)需要只針對(duì) IE7 做樣式的時(shí)候就可以采用這個(gè)兼容。IE6 及 IE6 以下識(shí)別* html 這個(gè)地方要特別注意很多都寫(xiě)了是 IE6 的兼容其實(shí) IE5.x 同樣可以識(shí)別這個(gè)兼容。其它瀏覽器不識(shí)別。html body select 這句與上一句的作用相同。僅 IE6 不識(shí)別select display :none;這里主要是通過(guò) CSS 注釋分開(kāi)一個(gè)屬性與值，流釋在冒號(hào)前。僅 IE6 與 IE5 不識(shí)別select display :none;這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè) CSS 注釋。僅 IE5

19、不識(shí)別select display:none;這一句是在上一句中去掉了屬性區(qū)的注釋。只有 IE5 不識(shí)別盒模型解決方法selct width:IE5.x 寬度; voice-family :; voice-family:inherit; width:正確寬度;盒模型的清除方法不是通過(guò)!important 來(lái)處理的。這點(diǎn)要明確。清除浮動(dòng)select:after content:.; display:block; height:0; clear:both; visibility:hidden;在 Firefox 中，級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的兼容

20、來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題。截字省略號(hào)select -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; 這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前 Firefox 并不支持。只有 Opera 識(shí)別media all and (min-width: 0px) select 針對(duì) Opera 瀏覽器做單獨(dú)的設(shè)定。以上都是寫(xiě) CSS 中的一些兼容，建議遵循正確的嵌套(div ul li 嵌套結(jié)構(gòu)關(guān)系)，這樣可以減少你使用兼

21、容的頻率，不要進(jìn)入理解誤區(qū)，并不是一個(gè)頁(yè)面就需要很多的兼容來(lái)保持多瀏覽器兼容)，很多情況下也許一個(gè)兼容都不用也可以讓瀏覽器工作得非常好，這些都是用來(lái)解決局部的兼容性問(wèn)題，如果希望把兼容性的內(nèi)容也分離出來(lái)，不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫(xiě)在 CSS 中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫(xiě)在 HTML中的通過(guò)條件來(lái)或是導(dǎo)入需要的補(bǔ)丁樣式。IE5.x 的過(guò)濾器，只有 IE5.x 可見(jiàn)media tty icontent:; import ie5win.css;IE5/MAC 的過(guò)濾器，一般用不著下面是 IE 的條件注釋?zhuān)瑐€(gè)人覺(jué)得用條件注釋調(diào)用相應(yīng)兼容是比較完美的多瀏覽器兼容的解決辦法。

22、把需要兼容的地方單獨(dú)放到一個(gè)文件里面，當(dāng)瀏覽器版本符合的時(shí)候就可以調(diào)用那個(gè)被兼容的樣式，這樣不僅使用起來(lái)非常方便，而且對(duì)于制作這個(gè) CSS 本身來(lái)講，可以更嚴(yán)格的觀察到是否有必要使用兼容，很多情況下，當(dāng)我本人寫(xiě) CSS 如果把全部代碼包括兼容都寫(xiě)到一個(gè) CSS 文件的時(shí)候的時(shí)候會(huì)很隨意，想怎么兼容就怎么兼容，而你獨(dú)立出來(lái)寫(xiě)的時(shí)候，你就會(huì)不自覺(jué)的考慮是否有必要兼容，是先兼容 CSS？還是先把主 CSS 里面的東西調(diào)整到盡可能的不需要兼容？當(dāng)你僅用很少的兼容就讓很多瀏覽器很乖很聽(tīng)話(huà)的時(shí)候，你是不是很有成就感呢？你知道怎么選擇了吧呵呵IE 的 if 條件兼容 自己可以靈活使用參看這篇 IE 條件注釋

23、Only IE所有的 IE 可識(shí)別只有 IE5.0 可以識(shí)別Only IE 5.0+IE5.0 包換 IE5.5 都可以識(shí)別僅 IE6 可識(shí)別Only IE 7/-IE6 以及 IE6 以下的 IE5.x 都可識(shí)別Only IE 7/-僅 IE7 可識(shí)別Css 當(dāng)中有許多的東西不按照某些規(guī)律來(lái)的話(huà)，會(huì)讓你很心煩，雖然你可以通過(guò)很多的兼容，很多的!important 來(lái)控制它，但是你會(huì)發(fā)現(xiàn)長(zhǎng)此以往你會(huì)很不甘心，看看許多優(yōu)秀的 ，他們的 CSS 讓 IE6,Ie7,Firefox,甚至 Safari,Opera 運(yùn)行起來(lái)完美無(wú)缺是不是很羨慕？而他們看似復(fù)雜的模版下面使用的兼容少得 。其實(shí)你要知道

24、IE 和 Firefox 并不不是那么的不和諧，找到一定的方法，是完全可以讓他們和諧共處的。不要你認(rèn)為發(fā)現(xiàn)了兼容的辦法，你就掌握了一切，并不是兼容的。div ul li 的嵌套順序今天只講一個(gè)規(guī)則。就是的三角關(guān)系。經(jīng)驗(yàn)就是在最外面，里面是，然后再是，當(dāng)然里面又可以嵌套什么的，但是并不建議你嵌套很多東西。當(dāng)你符合這樣的規(guī)則的時(shí)候，那些倒霉的，不聽(tīng)話(huà)的間隙就不會(huì)在里面出現(xiàn)了，當(dāng)你僅僅是里面放，而不用的時(shí)候，你會(huì)發(fā)現(xiàn)你的間隙十分難控制，一般情況下，IE6 和 IE7 會(huì)憑空多一些間距。但很多情況你來(lái)到下一行，間隙就沒(méi)了，但是前面的內(nèi)容又空了很大一塊，出現(xiàn)這種情況雖然你可以改變 IE 的 Margin

25、，然后調(diào)整 Firefox 下面的 Padding，以便使得兩者顯示起來(lái)得效果很相似，但是你得 CSS 將變得臭長(zhǎng)無(wú)比，你不得不多考慮。可能出現(xiàn)這種問(wèn)題補(bǔ)救措施，雖然你知道千篇一律來(lái)兼容它們，但是你會(huì)煩得具體嵌套寫(xiě)法遵循上面得嵌套方式， 然后在 CSS 里面告訴 ulMargin:0px;Padding:0px;list-style:none;，其中 list-style:none 是不讓標(biāo)記的最前方顯示圓點(diǎn)或者數(shù)字等目錄類(lèi)型的標(biāo)記，因?yàn)?IE 和 Firefox 顯示出來(lái)默認(rèn)效果有些不一樣。因此這樣不需要做任何手腳，你的 IE6、和 IE7、Firefox 顯示出來(lái)的東西(外距，間距，高度，

26、寬度)就幾乎沒(méi)什么區(qū)別了，也許細(xì)心的你會(huì)在某一個(gè)時(shí)刻發(fā)現(xiàn)：兩個(gè)象素的差別，但那已=各個(gè)瀏覽器中 css 表現(xiàn)的差異性(瀏覽器兼容問(wèn)題)：(htt/group/topic/4629864/)()()1,各瀏覽器下，margin 與 padding 顯示差異=解決辦法:CSS reset2,block+float+水平 margin,IE6 里的間距比超過(guò)設(shè)置的間距(橫向布局)=解決辦法:diaplay:inline(不用擔(dān)心內(nèi)聯(lián)元素?zé)o寬高，因?yàn)?float 會(huì)讓 inline 元素 haslayout,讓 inline 元素表 現(xiàn)的和 inline-block 元素一樣有寬高和垂直內(nèi)外邊距)最常

27、用的就是 div+CSS 布局了，而 div 就是一個(gè)典型的塊屬性，橫向布局的時(shí)候通常都是用 div float 實(shí)現(xiàn)的，橫向的間距設(shè)置如果用 margin 實(shí)現(xiàn)，這就是一 個(gè)必然會(huì)碰到的兼容性問(wèn)題3,inline+(display:block)+float+水平 margin,IE6 里的間距比超過(guò)設(shè)置的間距說(shuō)明:該情況與上面的差不多,只是此處的元素一開(kāi)始是內(nèi)聯(lián)元素,加了 display:block的 CSS 屬性.因?yàn)樗旧砭褪切袃?nèi)屬性，所以再加上 display:inline 的話(huà)，它的就不可設(shè)了。這時(shí)候還需要在 display:inline 后面加入 display:talbe=解決辦

28、法:display:inline;display:table;4,IE6 對(duì) margin:0 auto;不會(huì)正確的進(jìn)行解決辦法：在父元素中使用 text-align:center,在元件中使用 text-align:left5,無(wú)法設(shè)置微高(一般小于 10px)：說(shuō)明:當(dāng)設(shè)置元素高度小于 10px 時(shí)，IE6 和 IE7 不受控制，超出設(shè)置的高度產(chǎn)生原因:IE 不允許原件的高度小于字體的高度解決辦法 1:設(shè)置字體大小:font-size:0;解決辦法 2:給超出高度的設(shè)置 overflow:hidden解決辦法 3:設(shè)置行高 line-height 小于你設(shè)置的高度6,件撐破父元件原因:父元

29、件設(shè)置了 overflow:auto 屬性,件會(huì)從父元件中撐破出來(lái)解決辦法:父元件中設(shè)置ition:relative;經(jīng)很完美了，不需要你通過(guò)調(diào)整大片的 CSS 來(lái)控制它們的顯示了，你愿意，你可以?xún)H僅兼容一兩個(gè)地方，而且通常這種兼容可以適應(yīng)各種地方，不需要你重復(fù)在不同的地方調(diào)試不同的兼容方式解決辦法 1:selectormin-height:150px;height:auto !important;height:150px;解決辦法 2：selectormin-height:150px;height:150px;hemlbody selectorheight:auto;8,使用ul li 時(shí),

30、li 與 li 之間會(huì)空行解決辦法 1:設(shè)置 li selectorheight:*px;解決辦法 2:li selectorfloeft;clear:left;解決辦法 3:lidisplay:inline=CSS hack:+:IE6,IE7_:IE69:IE6,IE7,IE80:IE8,IE990:IE9!important:Al6 是有條件的支持)=常用的 CSS reset:(http:/css-reset-collection.html)margin:0;padding:0;border:0;.=盒子模型padding,border,margin,content;標(biāo)準(zhǔn)盒模型與 IE

31、 盒模型：前者：width 設(shè)置針對(duì) content后者:width 針對(duì) bordadding+content對(duì)于盒子的選擇：需要依靠最上面的Doctype 來(lái)看,如果沒(méi)有Doctype,則按照瀏覽器會(huì)根據(jù)自己的行為去理解網(wǎng)頁(yè);后各瀏覽器會(huì)按照W3C 標(biāo)準(zhǔn)去解釋你的盒子,網(wǎng)頁(yè)就能在各個(gè)瀏覽器中顯示一致了7,IE 無(wú)法min-height 和 min-width=性能優(yōu)化的幾個(gè)原則:1,盡量減少 http 請(qǐng)求:改善響應(yīng)時(shí)間的最簡(jiǎn)單途徑就是減少組件的數(shù)量，并由此減少 HTTP 請(qǐng)求的數(shù)量:(1)將多個(gè)合并到一張單獨(dú)的(2)JS、CSS 文件合并2,使用內(nèi)容發(fā)布網(wǎng)絡(luò)(CDN 的使用)：是一組分布

32、在多個(gè)不同地理位置的 Web 服務(wù)器，用于更加有效地向用戶(hù)發(fā)布內(nèi)容;主要用于發(fā)布頁(yè)面靜態(tài)資源：、css 文件、js 文件等。如此，能輕易地提高響應(yīng)速度.3,添加 Expires 頭4,將 CSS 樣式表放在頂部5,將 javascript放在底部6,避免使用 CSS 表達(dá)式7,使用外部 javascript 和 CSS8,減少DNS 查詢(xún)9,精簡(jiǎn) javascript10,避免重定向12,配置 ETag13,使Ajax 可緩存14,避免使用 CSS 表達(dá)式=JS 的數(shù)據(jù)類(lèi)型( 還可以檢測(cè)到具體的是什么實(shí)例，可以檢測(cè)是否是正則表達(dá)式）eg:1,2,3,4 instanceof Array;/tr

33、ued3 instanceof RegExp;/true區(qū)分各數(shù)據(jù)類(lèi)型：Ototype.toString.call(val).slice(8,-1)；11,刪除重復(fù)eg:Ototype.toString.call(1,2,3).slice(8,-1); /Arrayobj instanceof typeName;eg:1,2,3 instanceof Array;/trueobj.constructor.toString().indexof(typeName);eg:1,2,3.constructor.toString().indexof(Array);/9(只要值不為-1,即為typeNam

34、e 類(lèi)型)=會(huì)不會(huì) SEO(搜索引擎優(yōu)化)1,站內(nèi)優(yōu)化使得在搜索引擎上的友好度和站內(nèi)用戶(hù)的良好體驗(yàn)度上升讓在搜索引擎的靠前并且得到很好的客戶(hù)轉(zhuǎn)換率2,站外優(yōu)化通過(guò)SEO幫助和所屬企業(yè)進(jìn)行品牌推廣=語(yǔ)義化的理解？html 語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎；使閱讀源代碼的人對(duì)更容易將分塊，便于閱讀理解。=html5 新特性：1，webStorage(sesStorage,localStorage);2，onmessage,tmessage 解決跨域問(wèn)題;3，新的文檔類(lèi)型 (New Doctype)：之前的文檔類(lèi)型：在 H5 中失效，H5只需要用4，新增一系列語(yǔ)義化：header

35、,footer,figure+figcaption,article,nav 等5，新增屬性 ：=占位符 (placeholder：在HTML4 或 XHTML 中，你需要用 JavaScript 來(lái)給文本框添加占位符。比如，你可以提前設(shè)置好一些信息，當(dāng)用戶(hù)開(kāi)始輸入時(shí)，文本框中的文字就。 而在 HTML5 中,新的“placeholder”就簡(jiǎn)化了這個(gè)問(wèn)題；=input 新增屬性：required(必填項(xiàng));pattern(正則限定輸入)；6,audio(音頻)與();7,=事件模型冒泡型事件(事件委托的原理)捕獲型事件 =事件綁定即可完成文檔在沒(méi)有樣式 CSS 情況下也以一種文檔格式顯示，并且

36、是容易閱讀的；SEO；搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于eg:可以支持開(kāi)發(fā)者把參數(shù)傳遞給事件處理器函數(shù)2,綁定對(duì)象屬性:eg:.forms0.myButton.onclick = myFunc沒(méi)有辦法向事件函數(shù)傳遞參數(shù)3,綁定IE4+支持標(biāo)識(shí)for 屬性的值必須是元素的 id;必須把事件的名稱(chēng)(onmouseover，onclick 等等)分配給 event 屬性eg:/ script s ements here標(biāo)識(shí)中的語(yǔ)句可以調(diào)用頁(yè)面上其它地方定義的任何函數(shù)(或者從.js 文件中導(dǎo)入的函數(shù))這種綁定方式意味著您必須為每一個(gè)元素和每一個(gè)事件創(chuàng)建一個(gè)標(biāo)識(shí)4,IE5+支持

37、:elemObjectachEvent(eventName, functionReference);eg:.geementById().attachEvent(onclick,function().);注意:不能在元素被載入瀏覽器之前執(zhí)行這個(gè)語(yǔ)句;該對(duì)象的在相應(yīng)的 HTML 按鍵元素被瀏覽器創(chuàng)建之前，都是無(wú)效的;要讓這樣的綁定語(yǔ)句或者在頁(yè)面的底部運(yùn)行，或者在 body 元素的 onLoad事件處理器調(diào)用的函數(shù)中運(yùn)行5,W3C DOM 的 addEventListener()方法eg:docuemnt.ge,false);ementById().addEventListener(click,fu

38、nction().第三個(gè)參數(shù)表示是否在捕獲階段進(jìn)行處理【注意方法 4 和方法 5 中，事件的名字:IE 中要加前綴on,W3C 不用加前綴】=jsonp&跨域問(wèn)題=如何給函數(shù)整個(gè)觸發(fā)器setTimeout()seterval()=什么情況下外邊距會(huì)合并外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。=正則式（） =BFC 布局規(guī)則：=如何理解bfc（/lhb25/p/inside-block-formatting-ontext.html）(/iloveyoucc/archive/2012/08/15/2639874.

39、html)1,綁定元素屬性:事件屬性名稱(chēng)由事件類(lèi)型外加一個(gè) on 前綴2，Box 垂直方向的距離由 margin 決定。屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的margin 會(huì)發(fā)生，對(duì)于垂直 box 外邊距合并（見(jiàn)上面一條），是因?yàn)檫@兩個(gè) box 屬于同一個(gè) BFC。因此只要改變其中一個(gè) box 的 BFC 即可以達(dá)到外邊距不 的效果 (常用的做法是:在其中一個(gè) box 上套一層容器，并觸發(fā)該容器生成一個(gè) BFC)3，每個(gè)元素的 margin box 的左邊， 與包含塊 border box 的左邊相接觸(對(duì)于 從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。對(duì)于一列固定另一欄浮動(dòng)的兩欄

40、自適應(yīng)布局，固定的一欄會(huì)覆蓋到浮動(dòng)的那一欄，即兩欄的左邊會(huì)相接觸。根據(jù)第四點(diǎn)，可以通過(guò)觸發(fā)固定列的 BFC 達(dá)到自適應(yīng)的目的。4，BFC 的區(qū)域不會(huì)與 float box。5，BFC 就是頁(yè)面上的一個(gè)的獨(dú)立容器，容器里面的素不會(huì)影響到外面的元素。反之也如此因?yàn)?BFC的元素和外部的元素絕對(duì)不會(huì)互相影響，因此， 當(dāng) BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響 BFCBox 的布局，BFC 會(huì)通過(guò)變窄，而不與浮動(dòng)有重疊。同樣的，當(dāng) BFC有浮動(dòng)時(shí)，為了不影響外部元素的布局，BFC 計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免 margin也是這樣的一個(gè)道理。 6，計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。對(duì)于父元素

41、沒(méi)有隨著素高度的增加而增加可以觸發(fā)父元素的 BFC 來(lái)達(dá)到自適應(yīng)的目的 =哪些元素會(huì)生成 BFC?根元素float 屬性不為 nonedisplay 為 inline-block, table-cell, table-caption, flex, inline-flexoverflow 不為visible(所有關(guān)于margin，雙邊距等 bug 可以用 overflow:auto 修復(fù))=ajax=Http 原理=狀態(tài)碼=http 數(shù)據(jù)包=寫(xiě)寫(xiě)自己常用的 CSS3 特性:=選擇器：=屬性選擇器（只有 IE6 不支持）att=value匹配包含以特定的值開(kāi)頭的屬性的元素eg:divclass=i

42、tembackground:yellow;class 以 item 開(kāi)頭的元素的 background 屬性為 yellowatt$=value匹配包含以特定的值結(jié)尾的屬性的元素att*=value匹配包含含有特定的值的屬性的元素ition 為 absolute 或 fixed1，的 Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置（塊級(jí)元素獨(dú)占一行）CSS3 中唯一新引入的連字符是通用的兄弟選擇器（同級(jí)）。它針對(duì)一個(gè)元素的有同一個(gè)父級(jí)節(jié)點(diǎn)的所有兄弟級(jí)別元素。比如，給某個(gè)特定的 div 的同級(jí)的添加一個(gè)灰色的邊框(div 和應(yīng)該有同一個(gè)父級(jí)節(jié)點(diǎn))，在樣式表中定義下面的樣式就足夠了：divimg bord

43、er: 1px solid #ccc;=偽類(lèi):nth-child(n)讓你基于元素在父節(jié)點(diǎn)的素的列表位置來(lái)指定元素。你可以是用數(shù)字、數(shù)字表達(dá)式或 odd 和 even(對(duì)斑馬樣式的列表很完美)。所以如果你想匹配在第四個(gè)元素之后的一個(gè) 3 個(gè)元素的分組，你可以簡(jiǎn)單的這樣使用：:nth-child(3n+4) background-color: #ccc; /*匹配第 4,7,10,13,16,19.個(gè)元素*/:nth-last-child(n)與上個(gè)選擇器的同樣，但是從后面匹配元素（倒序），比如，為了指定一個(gè) div里面的最后兩個(gè)段落，可以使用下面的選擇器：dith-last-child(-n+

44、2):last-child匹配一個(gè)父節(jié)點(diǎn)下的最后一個(gè)素，等同于:nth-last-child(1):checked匹配選擇的元素，比如復(fù)選框:empty匹配空元素（沒(méi)有素）。:not(s)匹配所有不符合指定(s)的元素。比如，如果你想讓所有的沒(méi)有使用”lead”類(lèi)的段落的顯示為黑色，可以這樣寫(xiě)： p:not(class*=lead) color: black; =RGBA 和=多欄布局（火狐瀏覽器、谷歌瀏覽器，IE10+等支持） 使用多欄布局時(shí)只能為所有欄指定一個(gè) 的高度，欄與欄之間的寬度不可能是不一 樣的，另外也不可能具體指定什么欄中顯示什么內(nèi)容，因此比較適合使用在顯示文章內(nèi)容的時(shí)候，不適合

45、用于安排整個(gè)網(wǎng)頁(yè)中由各元素組成的網(wǎng)頁(yè)結(jié)構(gòu)時(shí)。=多欄布局第一個(gè)屬性：column-countcolumn-count 屬性為一個(gè)數(shù)字表示列數(shù)，不帶 ，含義是將一個(gè)元素中的內(nèi)容分為多欄進(jìn)行顯示.box width: 600px;backgrond-color: #ddd;column-count: 2;=多欄布局的第二個(gè)屬性：column-gap使用 column-gap 屬性來(lái)設(shè)定多欄之間的間隔距離。=連字符（所有瀏覽器都支持）.box width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;=多欄布局第 3 個(gè)屬性

46、：column-rulecolumn-rule 屬性在欄與欄之間增加一條間隔線(xiàn)，并且設(shè)定該間隔線(xiàn)的寬度、樣式、 顏色，該屬性的指定方法與 css 中的 border 屬性指定方法相同.box width: 600px;backgrond-color: #ddd;column-count: 2;column-gap: 60px;column-rule: 5px dashed #000;=多欄布局最后一個(gè)屬性：column-widthcolumn-width 可以設(shè)置每一欄的寬度，但是在實(shí)際測(cè)試中發(fā)現(xiàn)并不像描述的那么簡(jiǎn)單，遂列舉出以下幾個(gè)問(wèn)題：在設(shè)定 column-width 的同時(shí)必須設(shè)置盒子的

47、 width，否則盒子寬度默認(rèn)為 100%，每欄寬度按照欄數(shù)平均分。盒子每欄寬度必須大于等于 column-width 設(shè)定的值，否則就會(huì)減少欄數(shù)來(lái)增加每欄 寬度，例如盒子寬度400px，一共2 欄，那么每欄寬度就是200px，如果設(shè)置column-width: 210px 的話(huà)盒子就會(huì)變成 1 欄以保證每欄寬度大于等于 column-width:210px;，但是如果每欄寬度大于 column-width 的值時(shí)每欄寬度也不會(huì)強(qiáng)制等于 column-width，這么看 column-width 的個(gè)性有點(diǎn)像 min-width?！綜SS3 規(guī)范里描述的是，各列的高度是均衡的，瀏覽器會(huì)自動(dòng)調(diào)整

48、每列里填充多少文本、均分文本，來(lái)使各列的高度保持均衡一致】 =多背景圖 =Word Wrap:normal|break-word(http/css3/properties/text/word-wrap.html)對(duì)于文字過(guò)長(zhǎng)會(huì)導(dǎo)致文字撐破容器出來(lái);使用 CSS3 屬性:word-wrap:break-word;內(nèi)容將在邊界內(nèi)換行,如果需要,單詞允許斷行.word-wrap:normal;內(nèi)容將會(huì)撐破容器盒子 =文字陰影 =font-face 屬性 =圓角(邊框半徑) =邊框 =盒陰影 =盒子大小 =查詢(xún) =語(yǔ)音=彈性盒子模型：box-flexCSS3 中新的盒子模型彈性盒子模型(Flexibo

49、x M)：=box-flex 屬性(很適用于流體布局),用來(lái)按比例分配父的寬度或高度空間eg: #onebox-flex:2;#twobox-flex:1;#threebox-flex:1;表示 id 分別為 one，two，three 的元素把父按照 2:1:1 的比例分割;=父需要為fatherdisplay:box;fatherdisplay:inline-box;=元素中有寬度值的時(shí)候，此元素就定寬處理，剩下的空間再按比例分配eg：#onebox-flex:2;#twobox-flex:1;#threewidth:200px;three 寬度為 200 像素，one 和 two 把剩下

50、的空間按 2:1 分=彈性盒子模型下的(父)其實(shí)是很有貨的。肚子中的貨有：box-orient,box-direction, box-align, box-pack, box-lines. 現(xiàn)在依次講講這里 box 打頭的屬性都 是干嘛用的。=box-orient 用來(lái)確定素的方向。是橫著排還是豎著走：inline-axis 是默認(rèn)值。且 horizontal 與 inline-axis 的表現(xiàn)似乎一致的，讓素橫排；而 vertical 與 block-axis 的表現(xiàn)也是一致的，讓元素縱列=素除了 box-flex 屬性，還有兩個(gè)屬性， box-flex-group 和box-ordinal

51、-group，其中 box-flex-group 的作用不詳，貌似目前瀏覽器也不支持； box-ordinal-group 的作用是拉幫結(jié)派。數(shù)值越小，位置就越靠前，這不難理解，第一組在最前嘛，隨后第二組，第三組 例如：box-ordinal-group:1 的組就會(huì)在box-ordinal-group:2 的組前面顯示。于是，可以利用這個(gè)屬性改變素的順序。常見(jiàn)瀏覽器 CSS 前綴：=Webkit瀏覽器的(比如, Safari)， 它們以-webkit-開(kāi)始，以及 Gecko的瀏覽器(比如, Firefox)，以-moz-開(kāi)始，還有 Konqueror (-khtml-)、Opera (-o-

52、)以及ernet Explorer (-ms-)都有它們自己的屬性擴(kuò)展（目前只有 IE8 支持-ms-前綴）=設(shè)計(jì)圓角border-radius:=客戶(hù)端：localStorage();sesStorage()=css 選擇器權(quán)重: style:1000; ID:100;【注意:目前而言,僅 Firefox/Chrome/Safari 瀏覽器支持彈性盒子模型(IE9不詳,Opera 尚未),且使用的時(shí)候，需要附帶私有前綴。就是諸如-moz-, -webkit-前綴】 class:10; tagName:1; 子選擇器()全部選擇(*):0; 后面的這些權(quán)值只是定的一個(gè)相對(duì)參考，并不是具體的值=

53、link 和import 的區(qū)別：頁(yè)面中使用 CSS 的方式主要有 3 種：1，行內(nèi)添加定義 style 屬性值2，頁(yè)面頭部?jī)?nèi)嵌調(diào)用3，外面有兩種：link 和import調(diào)用其中外面區(qū)別：1：link 是 XHTML，除了加載 CSS 外，還可以定義 RSS 等其他事務(wù)；import 屬于 CSS 范疇，只能加載 CSS。2：linkCSS 時(shí)，在頁(yè)面載入時(shí)同時(shí)加載；import 需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。3：link 是 XHTML，無(wú)兼容問(wèn)題；import 是在 CSS2.1，低版本的瀏覽器不支持。4：ink 支持使用 Javascript 控制 DOM 去改變樣式；而import

54、不支持。=繼承的幾種方式：1，構(gòu)造函數(shù)2，原型鏈=數(shù)據(jù)傳遞的幾種方式：get,t,本地(localStorage)面試官問(wèn)我，除了 get 和t 方法還別的方法？了半天，面試官說(shuō)，本地啊(就是 localStorage),其實(shí)說(shuō) PUT,HEAD 來(lái)著_=webSocket:是下一代客戶(hù)端-服務(wù)器的異步通信方法，該通信取代了單個(gè)的 TCP 套接字，使用 ws或 wss 協(xié)議，可用于任意的客戶(hù)端和服務(wù)器程序;而且有一個(gè)優(yōu)秀的第 API，名為Socket.IO服務(wù)器和客戶(hù)端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息;與 ajax 的區(qū)別:WebSocket 并不限于以Ajax(或XHR)方式通

55、信，因?yàn)锳jax 技術(shù)需要客戶(hù)端發(fā)起請(qǐng)求， 而 WebSocket 服務(wù)器和客戶(hù)端可以彼此相互推送信息； XHR 受到域的限制， 而 WebSocket 允許跨域通信/ 創(chuàng)建一個(gè) Socket 實(shí)例var socket = new WebSocket(ws:/localhost:8080); /ws 表示 socket 協(xié)議/ 打開(kāi)Socketsocket.onopen = function(event) / 發(fā)送一個(gè)初始化消息/wei2yi/archive/2011/03/23/1992830.html/消息socket.onmessage = function(event) console

56、.log(Cnt received a message,event);/Socket 的關(guān)閉socket.onclose = function(event) console.log(Cnt notified sockes closed,event);/ 關(guān)閉 Socket.socket.close() ;=不用 angularJS，如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定ajax：異步數(shù)據(jù)傳輸？=響應(yīng)式布局：彈性盒子/查詢(xún)=如何獲取瀏覽器信息：Navigator 對(duì)象包含有關(guān)瀏覽器的信息。Navigator 對(duì)象屬性：appCodeName返回瀏覽器的代碼名。419appMinorVer返回瀏覽器的次級(jí)版本。4N

57、oNoappName返回瀏覽器的名稱(chēng)。419appVer返回瀏覽器的和版本信息。 419browserLanguage返回當(dāng)前瀏覽器的語(yǔ)言。4No9Enabled返回指明瀏覽器中是否啟用4No Noplatform返回運(yùn)行瀏覽器的操作系統(tǒng)。419 systemLanguage返回 OS 使用的默認(rèn)語(yǔ)言。 4No No userAgent返回由客戶(hù)機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值。419userLanguage返回 OS 的自然語(yǔ)言設(shè)置。 4No 9=數(shù)組操作： =toString(param):=null 和 undefined 沒(méi)有 toString()方法把 null 或 u

58、ndefined 變成字符串的方法：null+或者 String(null); 的布爾值。419cpuClass返回瀏覽器系統(tǒng)的 CPU 等級(jí)。 4No NoonLine返回指明系統(tǒng)是否處于脫機(jī)模式的布爾值。屬性描述IEFOsocked(I am the cnt and Im listening!);直接用(null).toString()會(huì)報(bào)錯(cuò)。=param是可選的，當(dāng)需要把數(shù)值型數(shù)據(jù)轉(zhuǎn)換成相應(yīng)的進(jìn)制數(shù)時(shí)，param 可以進(jìn)行設(shè)置；eg:把十進(jìn)制 8 轉(zhuǎn)換成二進(jìn)制：(8).toString(2);/1000;此處注意：必須是是 number 類(lèi)型，若是(8).toString(2);/8;=

59、對(duì)于浮點(diǎn)數(shù)如果小數(shù)點(diǎn)后面都是 0，調(diào)用 toString 方把后面的 0 去掉(10.00).toString();/10;(10.01).toString();/10.01;=對(duì)于object 的 toString()返回object ObjectName，其中 ObjectName 是對(duì)象類(lèi)型的名稱(chēng)。=對(duì)于Date 對(duì)象：var date = new Date();date.toString();/當(dāng)前時(shí)間信息： Oct 19 2015 19:55:55 GMT(中國(guó)標(biāo)準(zhǔn)時(shí)間)【思考點(diǎn)：如何將小數(shù)點(diǎn)后面都為 0 的浮點(diǎn)數(shù)轉(zhuǎn)化為字符串？10.00+;/10(如何得到10.00);10.00+

60、10.00;/20(為什么不是 20.00)；10.01+10.00;/20.009999999999998(為什么不是 20.01)】=String()與 toString()的區(qū)別：(1)null 和 undefined 有 String()轉(zhuǎn)換成字符串，而 toString()不能；(2)toString()能設(shè)定數(shù)值數(shù)據(jù)轉(zhuǎn)換的進(jìn)制數(shù)，而 String()不能；(3)其他情況下：toString(val) = String(val) =join(seperator)：數(shù)組以分隔符 seperator 轉(zhuǎn)換成字符串=原生 JS 對(duì)DOM 操作：=selector：= 對(duì)象方法：.ge.ge