前端開發(fā)經(jīng)典問題總結(jié).docx

《前端開發(fā)經(jīng)典問題總結(jié).docx》由會(huì)員分享，可在線閱讀，更多相關(guān)《前端開發(fā)經(jīng)典問題總結(jié).docx（10頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、text-shadow:2px 2px 2px #f00; text-shadow（文字的影子）{x軸（向右為正） y軸（向下為正 暈（模糊寬度沒有負(fù)值） #ff00（影子顏色）} 瀏覽器兼容：Firefox，Opera，Chrome，Safari box-shadow:（盒子的影子）{x軸（向右為正） y軸（向下為正 暈（模糊寬度沒有負(fù)值） #ff00（影子顏色） inset（內(nèi)部的效果）} 可以只寫x,y,color inset;另一種x,y ,blur,spread,color,inset； 不可以x,y,blur/spread,color,inset 2、border-radius（圓角）:50px;=={border-top-left-radius:50px;border-top-right-radius:50px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;} 瀏覽器兼容：IE9，F(xiàn)irefox 4+，Chrome，Safari 5+，Opera body設(shè)置寬度對(duì)背景圖片沒影響 body{ margin:0 auto; width:960px; color:#352; font:14px/20px "微軟雅黑"; background:#352 url(../images/bg.jpg) fixed center no-repeat;} body>header{font-size:18px;} body下的子header not孫子例子

這其中第二個(gè)header不受控制

可編輯列表

• one
• two
• three

對(duì)于未定義長(zhǎng)寬的塊級(jí)元素，內(nèi)含浮動(dòng)的塊級(jí)元素，若要使其有獨(dú)占一行的效果可添加display:inline-block屬性 Placeholder input中的占位符（僅在支持html5的瀏覽器下有效） 用法：,作用：類似于提示語在輸入框中。 Animation動(dòng)畫 Appearance改變（比如div）為其他樣式支持火狐/谷歌/蘋果 Appearance:normal/icon/window/button/menu/field 針對(duì)CSS3漸變的記錄 針對(duì)手機(jī)webkit內(nèi)核的瀏覽器不識(shí)別此寫法：background-image: -webkit-linear-gradient(top, #759AE9 0%, #376FE0 50%, #1A5AD9 50%, #2463DE 100%); 識(shí)別寫法如下：background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759AE9), color-stop(50%, #376FE0), color-stop(50%, #1A5AD9), color-stop(100%, #2463DE)); 針對(duì)CSS3 box-shadow屬性不僅支持單定義的屬性控制如 box-shadow:x y spread blur color inset 還支持box-shadow:inset x y spread blur color,x y spread blur color,等 清除浮動(dòng) 第一種； ：：overflow: hidden; _zoom: 1;合起來可以清除浮動(dòng) 第二種；.clear{zoom:1;}.clear:after{content:"\20";display:block;clear:both;}（ 主要為了兼容此div的背景、margin、padding值在各個(gè)瀏覽器下一致； 此div沒有背景、margin、padding值，只用clear：both就行了 ） 解讀浮動(dòng)閉合最佳方案：clearfix 分享到：更多6 2011-05-16 分類：HTML/CSS37人評(píng)論13,640次瀏覽 之前給大家介紹兩種浮動(dòng)閉合的辦法CSS清除浮動(dòng) 萬能float閉合，得知很多同學(xué)都在使用下面的骨灰級(jí)解決辦法： .clear{clear:both;height:0;overflow:hidden;} 上訴辦法是在需要清除浮動(dòng)的地方加個(gè)div.clear或者br.clear，我們知道這樣能解決基本清浮動(dòng)問題。 但是這種方法的最大缺陷就是改變了html結(jié)構(gòu)，雖然只是加個(gè)div。 最優(yōu)浮動(dòng)閉合方案（這是我們推薦的）： .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{*+height:1%;} 用法很簡(jiǎn)單，在浮動(dòng)元素的父云素上添加class=”democlearfix”。 你會(huì)發(fā)現(xiàn)這個(gè)辦法也有個(gè)弊端，但的確是小問題。改變css寫法就ok了： .demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden} .demo,.demo2{*+height:1%;} 以上寫法就避免了改變html結(jié)構(gòu)，直接用css解決了。 很拉轟的浮動(dòng)閉合辦法： .clearfix{overflow:auto;_height:1%} 這種辦法是我看國(guó)外的一篇文章得到的方案，測(cè)試了，百試不爽，真的很簡(jiǎn)單，很給力。喜歡的同學(xué)也可以試試這個(gè)辦法。 這種方法是端友radom提供的，測(cè)試通過： .clearfix{overflow:hidden;_zoom:1;} 感謝radom提供的這種方法??！ js筆記： 1、js優(yōu)化減少請(qǐng)求數(shù)量（合并文件，當(dāng)然也得考慮文件的大小，） 2、js代碼性能，盡量使用變量來保存dom的遍歷值 3、HTTP規(guī)范，瀏覽器每次從同一個(gè)域名中最多只能同時(shí)下載兩個(gè)文件。下載腳本期間，瀏覽器不會(huì)下載其他任何文件，即使是來自不同域名的文件也不會(huì)下載，所有其他資源都要等腳本加載完畢后才能下載。 4、與DOM腳本編程工作有關(guān)的問題不外乎平穩(wěn)退化、向后兼容、分離Javascript這。這些問題的解決方式和解決程度影響著網(wǎng)頁的可用性和可訪問性。 5、語義化--易于閱讀、有利于SEO 解決IE6不支持最小高度 height:auto !important; height:200px; /*假定最低高度是200px*/ min-height:200px; 內(nèi)部div自動(dòng)撐開外部div 的問題 若內(nèi)部div有浮動(dòng)你是無法自動(dòng)撐開外部的div滴，解決辦法清除浮動(dòng)了 此上傳按鈕各個(gè)瀏覽器廠家兼容性完全不同，谷歌，蘋果一類，最好控制，IE，火狐完全扯淡不支持對(duì)樣式進(jìn)行控制 扯淡的兼容性哇 .class{ position:relative; top:-39px; right:-200px;通用 *right:20px;IE7 right:20px\9;IE8 _right:0px; IE6 height:39px; width:440px; filter:alpha(opacity:0);opacity:0; } 斷行變形的問題 每天星期一星期二星期三星期四星期五星期六星期日 如果此行中有人為換行，這會(huì)引起樣式變形，瀏覽器解讀為空格 Css優(yōu)先級(jí)問題 針對(duì)樣式優(yōu)先級(jí)情況，內(nèi)部樣式大于繼承，繼承大于id，id大于class 如

P span{color:#ff0000;} #color{#000;} .color{#fff;}如上，優(yōu)先級(jí)逐級(jí)下降 jQuery的空格問題 var $demo=$(‘.test :hidden’); 有空格的含義：選中類test下隱藏的元素 var $demo=$(‘.test:hidden’); 無空格的含義：選中類名為test的隱藏的元素 絕對(duì)定位，相對(duì)定位 Position：absolute絕對(duì)定位，默認(rèn)情況下其父元素對(duì)象是瀏覽器的左上角，若父元素也是絕對(duì)定位，則對(duì)象是父元素 Position：relative相對(duì)定位，針對(duì)父元素定位 插入節(jié)點(diǎn)方法 First---append() $(“p”).append(“hello”); example:

I say :hello

appendTo() $(“hello”).appendTo(“p”);

I want say hello

針對(duì)li:first-child li:last-child這種偽類，ie他nia的不支持 Focus，點(diǎn)擊input輸入框，這種特效，input:focus {outline:1px solid #ff0000;}可以設(shè)置； $(“element”).css{“height”}獲取對(duì)象所設(shè)置的高度 $(“element”).height();獲取對(duì)象的實(shí)際高度 $(“element”).width(“100px”)設(shè)置寬度 text-indent:-999px;作用：顯示圖片效果，內(nèi)含文字，為了便于SEO的抓取，隱藏掉文字 JS變量定義 Js變量定義不可使用”-“這個(gè)符號(hào)例如：var page-count=1;這樣是失效的，在css里可以.page-count定義 Js反義字符 \r回車\n換行，一般同時(shí)在一起使用”\r\n” Select 屬性multiple=”multiple”，如果不加這個(gè)屬性，默認(rèn)只可以選一個(gè) jQuery中對(duì)象操作“this”的對(duì)象轉(zhuǎn)換問題 $(tbody>tr).click(function(){ $(this) .addClass(selected) .siblings().removeClass(selected) .end() .find(:radio).attr(checked,true); }) addClass時(shí)仍是默認(rèn)對(duì)象，當(dāng)執(zhí)行到siblings這個(gè)方法時(shí)this已經(jīng)是原對(duì)象的兄弟們了（siblings()），因此要結(jié)束這個(gè)siblings的返回到原對(duì)象 jQuery默認(rèn)click事件

姓名	性別	暫住地
前臺(tái)設(shè)計(jì)組
張山	男	浙江寧波
李四	女	浙江杭州
前臺(tái)開發(fā)組
王五	男	湖南長(zhǎng)沙
找六	男	浙江溫州
后臺(tái)開發(fā)組
Rain	男	浙江杭州
MAXMAN	女	浙江杭州

$(function(){ $(tr.parent).click(function(){ // 獲取所謂的父行 $(this) .toggleClass("selected") // 添加/刪除高亮 .siblings(.child_+this.id).toggle(); // 隱藏/顯示所謂的子行 }).click(); }) css 關(guān)于"浮動(dòng)邊距加倍"及其解決方法 css 關(guān)于"浮動(dòng)邊距加倍"及其解決方法-------解決方案是在這個(gè)div里面加上display:inline; 寫div代碼的時(shí)候,經(jīng)常發(fā)現(xiàn)明明寬度算得很準(zhǔn)確,但是莫明其妙的會(huì)和計(jì)劃的布局不太一樣- -||| 開始以為自己代碼寫的有問題,拼命找bug也一無所獲,最后可能會(huì)稍微修改樣式來達(dá)到想要的效果,但終究也是外道..昨晚刨根問底了一次...我靠..原來是IE的問題-_,- 今天跟半半嘮叨起這件事,還說要加入反IE的行列來著...為啥別的都沒問題就IE有問題嘛..-x- 浮動(dòng)邊距加倍錯(cuò)誤(The IE Doubled Float-Margin Bug ) 如果某條邊與浮動(dòng)方向同向，則向該邊上的浮動(dòng)框應(yīng)用邊距時(shí)，邊距會(huì)增加一倍。此錯(cuò)誤只影響一次或多次浮動(dòng)的某行中的第一次浮動(dòng)。 #ax{ float:left;-----------------------------設(shè)定了左浮動(dòng) width:500px; height:100px; } #bx { float: left; width: 150px; height: 50px; margin: 0 0 0 10px;--------------設(shè)定了左邊距10px } //在IE中導(dǎo)致浮動(dòng)邊距加倍,10px會(huì)變成20px...在不知道的情況下,以前多半會(huì)選擇減少div寬度,覺得是margin和寬度之間出了問題.. 解決方法:在margin后面跟一句 display:inline; 就可以了...但是我翻了半天也沒有翻到原理,只是說,在這樣的情況下,用這樣一個(gè)聲明,就可以阻止IE的邊距翻倍,而且并沒有任何inline的效果,沒有副作用 這個(gè)bug實(shí)在是很常見= =....據(jù)說以前被認(rèn)為是無法改良的IE的bug...現(xiàn)在雖然IE還是有這bug,但聰明的人們找到了對(duì)付它的方法 ================================= 問題1： 以DW編輯器為例，在頁面做完后，點(diǎn)“文件〉檢查頁〉瀏覽器兼容性”，檢查你所做的頁面在各個(gè)瀏覽器中是否顯示正常，如果出現(xiàn)以下問題： “浮動(dòng)邊距加倍錯(cuò)誤” “如果某條邊與浮動(dòng)方向同向，則向該邊上的浮動(dòng)框應(yīng)用邊距時(shí)，邊距會(huì)增加一倍。此錯(cuò)誤只影響一次或多次浮動(dòng)的某行中的第一次浮動(dòng)。 margin加倍的問題 設(shè)置為float的div在ie7下顯示正常但是在ie6下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline; 針對(duì)部分IE，瀏覽器解析樣式表錯(cuò)誤問題，例如，一個(gè)寫法完全正確的樣式表及頁面，表現(xiàn)卻不正常，這極有可能是樣式表或頁面中的漢語注釋引起的 針對(duì)繼承問題，看例子 、

針對(duì)這種標(biāo)簽的寫法，一定要注意對(duì)最外ul下的li的定義，如果外面li和內(nèi)部li都要有高度，寬度的定義一定要控制繼承問題，一種替換內(nèi)部標(biāo)簽（替換紅色標(biāo)簽，找其他標(biāo)簽代寫） firefox下input type="file"的size是多大[原] firefox對(duì)type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個(gè)值，來控制上傳框的大小。 但是這個(gè)size值怎么設(shè)置，size="10"是多寬，默認(rèn)值又是多少，不能光憑感覺去設(shè)置。 用腳本來查看下： $(function(){ varfileArray=[]; vari=0; while(i<100){ fileArray.push(i+":
"); i++; } document.write(fileArray.join("")); $("input:file").each(function(){$(this).after(""+$(this).width()+"")}); }); 在火狐下得到這樣的結(jié)果： 發(fā)現(xiàn)了一定的規(guī)律，默認(rèn)為208像素，size="1"時(shí)為85像素，每個(gè)size之間相差6.5個(gè)像素的寬度，所以我們可以動(dòng)態(tài)的設(shè)定size的值，如： if($.browser.mozilla){$(this).attr("size",1+(options.WrapWidth-85)/6.5)} javascript引用外部文件優(yōu)勢(shì)： 可維護(hù)性好----遍歷不同的ＨＴＭＬ頁面的ＪａｖａＳｃｒｉｐｔ會(huì)造成維護(hù)問題 可緩存―――瀏覽器能夠根據(jù)具體的設(shè)置緩存鏈接的所有外部ＪａｖａＳｃｒｉｐｔ文件 可適應(yīng)未來――― ＥＣＭＡＳｃｒｉｐｔ區(qū)分大小寫 第一個(gè)字符必須是一個(gè)字母、下劃線或美元符號(hào) 其他字符可以是字母、下劃線、美元符號(hào)或數(shù)字 只要意在保存對(duì)象的變量還沒有真正保存對(duì)象，就應(yīng)該明確讓變量保存ｎｕｌｌ值 ｂｏｏｌｅａｎ類型的值是區(qū)分大小寫的，Ｔｒｕｅ不等于ｔｒｕｅ，Ｔｒｕｅ只是一個(gè)標(biāo)示符 科學(xué)計(jì)數(shù)法：１８０００＝１．８ｅ４；０．００００００５＝５ｅ－７ 浮點(diǎn)數(shù)值計(jì)算不準(zhǔn)確 ｉｓＦｉｎｅ（）函數(shù)驗(yàn)證數(shù)值是否在規(guī)定范圍內(nèi)。 ＮａＮ―――Ｎｏｔ?。帷。危酰恚猓澹?，函數(shù)ｉｓＮａＮ（＂ｂｌｕｅ＂）參數(shù)ｂｌｕｅ不是ｎｕｍｂｅｒ類型會(huì)返回ｔｒｕｅ ｉｓＮａＮ（）函數(shù)驗(yàn)證參數(shù)能不能夠轉(zhuǎn)換成數(shù)值類型。 有三個(gè)函數(shù)可以把非數(shù)值轉(zhuǎn)換為數(shù)值：Ｎｕｍｂｅｒ（）；ｐａｒｓｅＩｎｔ（）；ｐａｒｓｅＦｌｏａｔ（）； 設(shè)置table的難看的自帶的邊框問題：屬性border-collapse:collapse