JavaEE
鴻蒙應(yīng)用開發(fā)
HTML&JS+前端
Python+大數(shù)據(jù)開發(fā)
人工智能開發(fā)
電商視覺設(shè)計(jì)
軟件測(cè)試
新媒體+短視頻
集成電路應(yīng)用開發(fā)
C/C++
狂野架構(gòu)師
IP短視頻
web前端開發(fā)培訓(xùn)之網(wǎng)頁(yè)前端學(xué)習(xí)總結(jié)（一）
更新時(shí)間:2016年12月05日14時(shí)49分 來源:傳智播客web前端開發(fā)培訓(xùn)學(xué)院 瀏覽次數(shù):
前端工作了一段時(shí)間經(jīng)驗(yàn)總結(jié)，獻(xiàn)給做前端的同學(xué)，希望對(duì)大家有所幫助。
一、編輯器的選擇
推薦webstorm，絕對(duì)的神器。不要用dw了，它最驕傲的所見即所得其實(shí)沒什么用，因?yàn)楦揪筒粶?zhǔn)，代碼提示也不人性話，不方便。Webstorm的方便之處（目前用到的），
1.可以分屏，左右同時(shí)編輯兩個(gè)文件，比如左邊編輯html，右邊編輯它的css/js。
2.代碼提示很人性話，分級(jí)結(jié)構(gòu)也很清洗。
3.方便查找，如ctrl+點(diǎn)擊類名，就可自動(dòng)定位到該css樣式。
4.支持自定義模版，這樣快速開始完成一些經(jīng)常用到的代碼。
5.支持個(gè)性化主題，字體等。
6.強(qiáng)大的插件庫(kù)，自己去選吧。
7 .ctrl+/,注釋所選區(qū)域。
sublime編輯器，簡(jiǎn)單靈活輕量級(jí)，支持代碼自動(dòng)完成、代碼高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime編輯器配置
二、布局
提到布局最頭疼就是瀏覽器兼容性，現(xiàn)在才發(fā)現(xiàn)其實(shí)很多兼容性其實(shí)是很容易避免的，只要做到你對(duì)自己的每一句代碼都知道它的意義和作用，還有避免用一些有兼容性的樣式屬性就行了，很多情況都可以不用hack，一樣能實(shí)現(xiàn)多瀏覽器兼容。
1. 不要用hack，一定有更好的解決辦法。很多情況都是因?yàn)榇a結(jié)構(gòu)不夠好才會(huì)出現(xiàn)兼容性問題。
2. 思考如何用最少的標(biāo)簽及屬性實(shí)現(xiàn)頁(yè)面。
3.理解結(jié)構(gòu)，表現(xiàn)，行為分離的意義。
4. 布局前一定要先分析頁(yè)面結(jié)構(gòu)，磨刀不誤砍柴工，分析怎么用更好的辦法實(shí)現(xiàn)，理清思路后，再切圖寫代碼。
5. 深刻理解類的概念，注重歸類元素，多總結(jié)，保持代碼風(fēng)格（包括前后代碼的空格位置、多少，以及命名風(fēng)格）嚴(yán)格一致并且盡量簡(jiǎn)潔。
6. 多用組合，少用繼承。
7. 命名空間：駝峰命名法用于區(qū)別不同單詞，劃線用于表明從屬關(guān)系。
8. 低權(quán)重原則------避免濫用子選擇器(即類似#test span這樣的選擇符)。
三、技巧
1. 寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語(yǔ)言）2.再根據(jù)自然語(yǔ)言翻譯成機(jī)器語(yǔ)言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。
2. 組織css，推薦使用base、common、page三層，base可以分為兩大部分：css reset（覆蓋掉瀏覽器提供的默認(rèn)樣式，可以參考：developer.yahoo.com/yui/）和通用原子類。（疑問：如果使用css reset后，那么之前的要求的標(biāo)簽語(yǔ)義化是否就沒有意義了呢？因?yàn)樗姓Z(yǔ)義化的標(biāo)簽?zāi)J(rèn)樣式都被reset了）,不用*{ margin:0; padding:0;}的原因是因?yàn)?ldquo;*”表示所有標(biāo)簽，其中包含大量生僻標(biāo)簽和為向前兼容而留下來的淘汰標(biāo)簽。
3. 把多個(gè)按鈕放在一張圖定位時(shí)，最好兩個(gè)按鈕之間隔一個(gè)像素，要不然有些版本的chrome可能解析不準(zhǔn)確。
4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮動(dòng)，一定要清除浮動(dòng)，深刻理解浮動(dòng)的作用很重要。 在層里調(diào)整文字的垂直位置可以用1.lineheight2.padding。 注意模塊化布局，增加代碼的重用性，盡量只給最里層的內(nèi)容層設(shè)高度，一般如果高度不確定的都設(shè)置成自適應(yīng)，這樣有助于內(nèi)容拉伸，也便于修改模塊的高度。 大框架，盡量簡(jiǎn)單的分，比如左右結(jié)構(gòu)最好就設(shè)置成左右，沒必要搞成左中右。 盡量不要在html代碼里插入img，把他設(shè)置在結(jié)構(gòu)里，然后用css插入圖片。
5. jquery編程習(xí)慣可以參考：1.把所有用$（）選中的元素保存在前綴為$的js變量里2.每個(gè)函數(shù)結(jié)束都要用return false 結(jié)束掉函數(shù)。
6. 布局前，先構(gòu)思好整個(gè)頁(yè)面的結(jié)構(gòu)，一個(gè)好的結(jié)構(gòu)要便于維護(hù)，加載更快，布局時(shí)也更容易。布局時(shí)，穩(wěn)扎穩(wěn)打，一步步弄好后（既沒有用hack，也沒有兼容性問題了），再布局下一個(gè)板塊。 布局一個(gè)帶js效果的頁(yè)面，要先把效果圖上的頁(yè)面效果，完整布局好后，再考慮加動(dòng)作的事情。并且一定要分析好頁(yè)面的結(jié)構(gòu)，以最少的標(biāo)簽，以及標(biāo)簽要與所放內(nèi)容對(duì)應(yīng)來布局。
7. jquery代碼一般要用$(document).ready(function(){}確保頁(yè)面dom準(zhǔn)備好了再進(jìn)行js操作。 頁(yè)面按鈕點(diǎn)擊時(shí)邊框變紅，點(diǎn)擊完后邊框變藍(lán)可以用outline:none;解決。 有動(dòng)畫的層最好設(shè)置overflow：hidden以免層里面的內(nèi)容在外層寬高改變時(shí)撐出層外。
8. 寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語(yǔ)言）2.再根據(jù)自然語(yǔ)言翻譯成機(jī)器語(yǔ)言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。
9. a標(biāo)簽的四種狀態(tài)的排序問題，可以用love hate 原則，即l（link）ov（visited）e h（hover）a（active）te，順序?qū)戝e(cuò)可能出現(xiàn)點(diǎn)擊后hover樣式失效。
10. 一般情況下，建議盡量使用class，少用id。
11. css編碼風(fēng)格：多行式和一行式。 多行式：可讀性強(qiáng)，但使行數(shù)過多，編輯需要來回拖動(dòng)滾動(dòng)條，影響開發(fā)速度，增大css文件大小。 一行式：可讀性稍差，有效減小css文件行數(shù)，有利于提高開發(fā)速度，同時(shí)減小css文件大小。 一行式逐漸成為主流。
12. css sprite：即把多個(gè)甚至所有的圖標(biāo)都放在一張圖里，然后用背景定位來控制圖標(biāo)的顯示。 使用難點(diǎn)：圖片如何排列能夠緊湊，同時(shí)保證不會(huì)影響擴(kuò)展性。 優(yōu)點(diǎn)：減少http請(qǐng)求數(shù)，減小服務(wù)器壓力。 缺點(diǎn)：影響開發(fā)速度，大大降低了可維護(hù)性。 是否使用取決于網(wǎng)站流量，對(duì)于流量不大的網(wǎng)站來說，css sprite帶來的好處并不明顯，而付出的代價(jià)是巨大的，不劃算。
13. 定義有：hover偽類的樣式時(shí)，多定義一個(gè)它的hover類，這樣有助于js調(diào)用生成current的效果，如定義btn{xxx}，btn：hover，btn_hover{xxx}。
14. 低權(quán)重原則避免濫用子選擇器(即類似#test span這樣的選擇符)。 css的選擇符是有權(quán)重的，當(dāng)不同選擇符的樣式設(shè)置有沖突時(shí)，會(huì)采用權(quán)重高的選擇符設(shè)置的樣式。 規(guī)則：html標(biāo)簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100.如“div em”的權(quán)重是1+1=2，“strong.demo”的權(quán)重是10+1=11，“#test.red”的權(quán)重是100+10=110. 如果css選擇符權(quán)重相同，那么樣式會(huì)遵循就近原則，哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符的樣式，與掛class名的先后順序無關(guān)。 為了保證樣式容易被覆蓋，提供可維護(hù)性，css選擇符需保證權(quán)重盡可能低。
15. 如果不確定模塊的上下margin特別穩(wěn)定，最好不要將它寫到模塊的類里，而是使用類的組合，單獨(dú)為上下margin掛用于邊距的原子類（例如mt10、mt20）。模塊最好不要混用margintop和marginbottom，統(tǒng)一使用margintop或marginbottom。
16. 拆分模塊技巧：1.模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來，拆分成一個(gè)獨(dú)立的模塊。2.模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性。
17. 觸發(fā)hasLayout一般情況用zoom：1就行了，但當(dāng)用dhtml的時(shí)候，可能失效，這時(shí)用position：relative就行了。
18. 布局最基本的元素：塊級(jí)元素（常見：div,p,form,ul,ol,li）和行內(nèi)元素（span,strong,em）等。 塊級(jí)元素：獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿父元素寬度（即使設(shè)置了寬帶也會(huì)獨(dú)占一行）。 行內(nèi)元素：不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化（沒有上下邊距，只有左右邊距）。 可以用display：inline/block，切換。
19. ie6、7不支持display：inline-block，但行內(nèi)元素可以用此屬性觸發(fā)hasLayout（是ie瀏覽器為解析盒模型而設(shè)計(jì)的一個(gè)專有屬性，它的設(shè)計(jì)初衷是用于塊級(jí)元素的，如果觸發(fā)行內(nèi)元素的hasLayout，就會(huì)讓行內(nèi)元素?fù)碛幸恍K級(jí)元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對(duì)齊。但這樣做用hack，所以不推薦。
20. 排列地板磚一樣的布局的元素時(shí)，盡量用給每個(gè)元素用相同的類來實(shí)現(xiàn)，如果最左邊的元素間距和右邊的有區(qū)別可以給所有元素套一個(gè)父層，然后設(shè)置其右邊距為負(fù)就行了。
21. 如果一個(gè)類中有些部分會(huì)經(jīng)常變化，我們可以將這個(gè)經(jīng)常變化的部分抽離出來單獨(dú)設(shè)成一個(gè)類，然后用組合來實(shí)現(xiàn)最終樣式。
22. 可以用(function(){})(),這樣的匿名函數(shù)來避免全局變量沖突。讓js不產(chǎn)生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋?？梢远x一個(gè)全局對(duì)象，然后用其屬性來定義全局變量，同時(shí)結(jié)合命名空間（即類似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。
四、常見問題
1. ie只有a支持hover,并且注意a里要有href才行。
2. IE6中用了float:left之后導(dǎo)致margin-left雙倍邊距的BUG解決方法加上display:inline
3. 如果存在文字在層居中的問題，水平方向可以用text-align代替，垂直方向可以用line-height來控制，如果只是控制上邊距，就用padding-top。這樣可以避免在ie6上的某些不必要的錯(cuò)誤。
4. ajax傳參數(shù)時(shí)，漢字一定要用encodeURIComponent（string），編碼一下，要不然可能變成亂碼中文在ie6里。
5. ie6下select元素會(huì)以窗口形式顯示的，這是ie6的一個(gè)bug，所以當(dāng)你設(shè)置一層為相對(duì)或絕對(duì)定位時(shí)，select仍然會(huì)浮在那個(gè)層之上。 解決方法，用一個(gè)和那個(gè)層同樣大小的iframe放在test下面，select上面，用iframe遮住select。
最后推薦兩本書吧，上面很多技巧都是來自于里面《css權(quán)威指南》、《如何編寫高質(zhì)量的代碼》，有些是實(shí)際工作中自己的一些心得，前輩的指點(diǎn)。還有一句話：“你對(duì)所學(xué)東西理解深度，決定了你所站的高度。”
本文版權(quán)歸傳智播客web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端培訓(xùn)學(xué)院；
首發(fā)：http://www.xamj520.com/web/
一、編輯器的選擇
推薦webstorm，絕對(duì)的神器。不要用dw了，它最驕傲的所見即所得其實(shí)沒什么用，因?yàn)楦揪筒粶?zhǔn)，代碼提示也不人性話，不方便。Webstorm的方便之處（目前用到的），
1.可以分屏，左右同時(shí)編輯兩個(gè)文件，比如左邊編輯html，右邊編輯它的css/js。
2.代碼提示很人性話，分級(jí)結(jié)構(gòu)也很清洗。
3.方便查找，如ctrl+點(diǎn)擊類名，就可自動(dòng)定位到該css樣式。
4.支持自定義模版，這樣快速開始完成一些經(jīng)常用到的代碼。
5.支持個(gè)性化主題，字體等。
6.強(qiáng)大的插件庫(kù)，自己去選吧。
7 .ctrl+/,注釋所選區(qū)域。
sublime編輯器，簡(jiǎn)單靈活輕量級(jí)，支持代碼自動(dòng)完成、代碼高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime編輯器配置
二、布局
提到布局最頭疼就是瀏覽器兼容性，現(xiàn)在才發(fā)現(xiàn)其實(shí)很多兼容性其實(shí)是很容易避免的，只要做到你對(duì)自己的每一句代碼都知道它的意義和作用，還有避免用一些有兼容性的樣式屬性就行了，很多情況都可以不用hack，一樣能實(shí)現(xiàn)多瀏覽器兼容。
1. 不要用hack，一定有更好的解決辦法。很多情況都是因?yàn)榇a結(jié)構(gòu)不夠好才會(huì)出現(xiàn)兼容性問題。
2. 思考如何用最少的標(biāo)簽及屬性實(shí)現(xiàn)頁(yè)面。
3.理解結(jié)構(gòu)，表現(xiàn)，行為分離的意義。
4. 布局前一定要先分析頁(yè)面結(jié)構(gòu)，磨刀不誤砍柴工，分析怎么用更好的辦法實(shí)現(xiàn)，理清思路后，再切圖寫代碼。
5. 深刻理解類的概念，注重歸類元素，多總結(jié)，保持代碼風(fēng)格（包括前后代碼的空格位置、多少，以及命名風(fēng)格）嚴(yán)格一致并且盡量簡(jiǎn)潔。
6. 多用組合，少用繼承。
7. 命名空間：駝峰命名法用于區(qū)別不同單詞，劃線用于表明從屬關(guān)系。
8. 低權(quán)重原則------避免濫用子選擇器(即類似#test span這樣的選擇符)。
三、技巧
1. 寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語(yǔ)言）2.再根據(jù)自然語(yǔ)言翻譯成機(jī)器語(yǔ)言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。
2. 組織css，推薦使用base、common、page三層，base可以分為兩大部分：css reset（覆蓋掉瀏覽器提供的默認(rèn)樣式，可以參考：developer.yahoo.com/yui/）和通用原子類。（疑問：如果使用css reset后，那么之前的要求的標(biāo)簽語(yǔ)義化是否就沒有意義了呢？因?yàn)樗姓Z(yǔ)義化的標(biāo)簽?zāi)J(rèn)樣式都被reset了）,不用*{ margin:0; padding:0;}的原因是因?yàn)?ldquo;*”表示所有標(biāo)簽，其中包含大量生僻標(biāo)簽和為向前兼容而留下來的淘汰標(biāo)簽。
3. 把多個(gè)按鈕放在一張圖定位時(shí)，最好兩個(gè)按鈕之間隔一個(gè)像素，要不然有些版本的chrome可能解析不準(zhǔn)確。
4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮動(dòng)，一定要清除浮動(dòng)，深刻理解浮動(dòng)的作用很重要。 在層里調(diào)整文字的垂直位置可以用1.lineheight2.padding。 注意模塊化布局，增加代碼的重用性，盡量只給最里層的內(nèi)容層設(shè)高度，一般如果高度不確定的都設(shè)置成自適應(yīng)，這樣有助于內(nèi)容拉伸，也便于修改模塊的高度。 大框架，盡量簡(jiǎn)單的分，比如左右結(jié)構(gòu)最好就設(shè)置成左右，沒必要搞成左中右。 盡量不要在html代碼里插入img，把他設(shè)置在結(jié)構(gòu)里，然后用css插入圖片。
5. jquery編程習(xí)慣可以參考：1.把所有用$（）選中的元素保存在前綴為$的js變量里2.每個(gè)函數(shù)結(jié)束都要用return false 結(jié)束掉函數(shù)。
6. 布局前，先構(gòu)思好整個(gè)頁(yè)面的結(jié)構(gòu)，一個(gè)好的結(jié)構(gòu)要便于維護(hù)，加載更快，布局時(shí)也更容易。布局時(shí)，穩(wěn)扎穩(wěn)打，一步步弄好后（既沒有用hack，也沒有兼容性問題了），再布局下一個(gè)板塊。 布局一個(gè)帶js效果的頁(yè)面，要先把效果圖上的頁(yè)面效果，完整布局好后，再考慮加動(dòng)作的事情。并且一定要分析好頁(yè)面的結(jié)構(gòu)，以最少的標(biāo)簽，以及標(biāo)簽要與所放內(nèi)容對(duì)應(yīng)來布局。
7. jquery代碼一般要用$(document).ready(function(){}確保頁(yè)面dom準(zhǔn)備好了再進(jìn)行js操作。 頁(yè)面按鈕點(diǎn)擊時(shí)邊框變紅，點(diǎn)擊完后邊框變藍(lán)可以用outline:none;解決。 有動(dòng)畫的層最好設(shè)置overflow：hidden以免層里面的內(nèi)容在外層寬高改變時(shí)撐出層外。
8. 寫js效果時(shí)一定要注意先分析好效果的行為，盡量用最簡(jiǎn)單通用性的代碼。分析步驟可以是1.先把要實(shí)現(xiàn)的功能一步一步的寫在紙上（即自然語(yǔ)言）2.再根據(jù)自然語(yǔ)言翻譯成機(jī)器語(yǔ)言，用jquery寫的代碼一定要注意代碼的可移植性、通用性。
9. a標(biāo)簽的四種狀態(tài)的排序問題，可以用love hate 原則，即l（link）ov（visited）e h（hover）a（active）te，順序?qū)戝e(cuò)可能出現(xiàn)點(diǎn)擊后hover樣式失效。
10. 一般情況下，建議盡量使用class，少用id。
11. css編碼風(fēng)格：多行式和一行式。 多行式：可讀性強(qiáng)，但使行數(shù)過多，編輯需要來回拖動(dòng)滾動(dòng)條，影響開發(fā)速度，增大css文件大小。 一行式：可讀性稍差，有效減小css文件行數(shù)，有利于提高開發(fā)速度，同時(shí)減小css文件大小。 一行式逐漸成為主流。
12. css sprite：即把多個(gè)甚至所有的圖標(biāo)都放在一張圖里，然后用背景定位來控制圖標(biāo)的顯示。 使用難點(diǎn)：圖片如何排列能夠緊湊，同時(shí)保證不會(huì)影響擴(kuò)展性。 優(yōu)點(diǎn)：減少http請(qǐng)求數(shù)，減小服務(wù)器壓力。 缺點(diǎn)：影響開發(fā)速度，大大降低了可維護(hù)性。 是否使用取決于網(wǎng)站流量，對(duì)于流量不大的網(wǎng)站來說，css sprite帶來的好處并不明顯，而付出的代價(jià)是巨大的，不劃算。
13. 定義有：hover偽類的樣式時(shí)，多定義一個(gè)它的hover類，這樣有助于js調(diào)用生成current的效果，如定義btn{xxx}，btn：hover，btn_hover{xxx}。
14. 低權(quán)重原則避免濫用子選擇器(即類似#test span這樣的選擇符)。 css的選擇符是有權(quán)重的，當(dāng)不同選擇符的樣式設(shè)置有沖突時(shí)，會(huì)采用權(quán)重高的選擇符設(shè)置的樣式。 規(guī)則：html標(biāo)簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100.如“div em”的權(quán)重是1+1=2，“strong.demo”的權(quán)重是10+1=11，“#test.red”的權(quán)重是100+10=110. 如果css選擇符權(quán)重相同，那么樣式會(huì)遵循就近原則，哪個(gè)選擇符最后定義，就采用哪個(gè)選擇符的樣式，與掛class名的先后順序無關(guān)。 為了保證樣式容易被覆蓋，提供可維護(hù)性，css選擇符需保證權(quán)重盡可能低。
15. 如果不確定模塊的上下margin特別穩(wěn)定，最好不要將它寫到模塊的類里，而是使用類的組合，單獨(dú)為上下margin掛用于邊距的原子類（例如mt10、mt20）。模塊最好不要混用margintop和marginbottom，統(tǒng)一使用margintop或marginbottom。
16. 拆分模塊技巧：1.模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來，拆分成一個(gè)獨(dú)立的模塊。2.模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性。
17. 觸發(fā)hasLayout一般情況用zoom：1就行了，但當(dāng)用dhtml的時(shí)候，可能失效，這時(shí)用position：relative就行了。
18. 布局最基本的元素：塊級(jí)元素（常見：div,p,form,ul,ol,li）和行內(nèi)元素（span,strong,em）等。 塊級(jí)元素：獨(dú)占一行，默認(rèn)情況下，其寬度自動(dòng)填滿父元素寬度（即使設(shè)置了寬帶也會(huì)獨(dú)占一行）。 行內(nèi)元素：不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排不下，才會(huì)換行，其寬度隨元素的內(nèi)容而變化（沒有上下邊距，只有左右邊距）。 可以用display：inline/block，切換。
19. ie6、7不支持display：inline-block，但行內(nèi)元素可以用此屬性觸發(fā)hasLayout（是ie瀏覽器為解析盒模型而設(shè)計(jì)的一個(gè)專有屬性，它的設(shè)計(jì)初衷是用于塊級(jí)元素的，如果觸發(fā)行內(nèi)元素的hasLayout，就會(huì)讓行內(nèi)元素?fù)碛幸恍K級(jí)元素的特性），從而模擬出inline-block的效果，然后再用*vertical-align控制文字的垂直對(duì)齊。但這樣做用hack，所以不推薦。
20. 排列地板磚一樣的布局的元素時(shí)，盡量用給每個(gè)元素用相同的類來實(shí)現(xiàn)，如果最左邊的元素間距和右邊的有區(qū)別可以給所有元素套一個(gè)父層，然后設(shè)置其右邊距為負(fù)就行了。
21. 如果一個(gè)類中有些部分會(huì)經(jīng)常變化，我們可以將這個(gè)經(jīng)常變化的部分抽離出來單獨(dú)設(shè)成一個(gè)類，然后用組合來實(shí)現(xiàn)最終樣式。
22. 可以用(function(){})(),這樣的匿名函數(shù)來避免全局變量沖突。讓js不產(chǎn)生沖突，需要避免全局變量的泛濫，合理使用命名空間以及為代碼添加必要的注釋?？梢远x一個(gè)全局對(duì)象，然后用其屬性來定義全局變量，同時(shí)結(jié)合命名空間（即類似，GLOBAL.A.xx,和GLOBAL.B.xx之類的）。
四、常見問題
1. ie只有a支持hover,并且注意a里要有href才行。
2. IE6中用了float:left之后導(dǎo)致margin-left雙倍邊距的BUG解決方法加上display:inline
3. 如果存在文字在層居中的問題，水平方向可以用text-align代替，垂直方向可以用line-height來控制，如果只是控制上邊距，就用padding-top。這樣可以避免在ie6上的某些不必要的錯(cuò)誤。
4. ajax傳參數(shù)時(shí)，漢字一定要用encodeURIComponent（string），編碼一下，要不然可能變成亂碼中文在ie6里。
5. ie6下select元素會(huì)以窗口形式顯示的，這是ie6的一個(gè)bug，所以當(dāng)你設(shè)置一層為相對(duì)或絕對(duì)定位時(shí)，select仍然會(huì)浮在那個(gè)層之上。 解決方法，用一個(gè)和那個(gè)層同樣大小的iframe放在test下面，select上面，用iframe遮住select。
最后推薦兩本書吧，上面很多技巧都是來自于里面《css權(quán)威指南》、《如何編寫高質(zhì)量的代碼》，有些是實(shí)際工作中自己的一些心得，前輩的指點(diǎn)。還有一句話：“你對(duì)所學(xué)東西理解深度，決定了你所站的高度。”
本文版權(quán)歸傳智播客web前端開發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端培訓(xùn)學(xué)院；
首發(fā)：http://www.xamj520.com/web/
最新資訊
相關(guān)閱讀
0
分享到：
文章列表.jpg)
javaee
科列表頁(yè)面右側(cè)廣告圖.jpg)
python
web
design
據(jù)學(xué)科列表頁(yè)右側(cè).png)
cloud
test
c
netmarket
pm
Linux
movies
robot
uids
Python
jdbc
北京校區(qū)
江蘇傳智播客教育科技股份有限公司 版權(quán)所有Copyright 2006-2024 All Rights Reserved 蘇ICP備16007882號(hào)營(yíng)業(yè)執(zhí)照增值電信業(yè)務(wù)經(jīng)營(yíng)許可證出版物經(jīng)營(yíng)許可證
蘇公網(wǎng)安備 32132202001156號(hào)