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

上傳人：1*** IP屬地：江西上傳時間：2023-10-23 格式：DOCX 頁數(shù)：11 大?。?9.42KB 積分：12 舉報 版權(quán)申訴

已閱讀5頁，還剩6頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

精品word文檔值得下載值得擁有1、text-shadow:2px2px2px#f00;text-shadow（文字的影子）{x軸（向右為正）y軸（向下為正

暈（模糊寬度沒有負值）#ff00（影子顏色）}瀏覽器兼容：Firefox，Opera，Chrome，Safaribox-shadow:

（盒子的影子）{x軸（向右為正）y軸（向下為正

暈（模糊寬度沒有負值）#ff00（影子顏色）inset（內(nèi)部的效果）}可以只寫x,y,colorinset;另一種x,y,blur,spread,color,inset；不可以x,y,blur/spread,color,inset2、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)irefox4+，Chrome，Safari5+，Opera

body設(shè)置寬度對背景圖片沒影響body{

margin:0auto;

width:960px;

color:#352;

font:14px/20px"微軟雅黑";

background:#352url('../images/bg.jpg')fixedcenterno-repeat;}

body>header{font-size:18px;}

body下的子headernot孫子例子<body><header></header><section><header></header></section></body>這其中第二個header不受控制

<h2>可編輯列表</h2>

<ulcontenteditable="true">

<li>three</li>

</ul>對于未定義長寬的塊級元素，內(nèi)含浮動的塊級元素，若要使其有獨占一行的效果可添加display:inline-block屬性Placeholderinput中的占位符（僅在支持html5的瀏覽器下有效）用法：<inputtype=”text”Placeholder=”請輸入密碼”/>,作用：類似于提示語在輸入框中。Animation動畫Appearance改變（比如div）為其他樣式支持火狐/谷歌/蘋果Appearance:normal/icon/window/button/menu/field針對CSS3漸變的記錄針對手機webkit內(nèi)核的瀏覽器不識別此寫法：background-image:-webkit-linear-gradient(top,#759AE90%,#376FE050%,#1A5AD950%,#2463DE100%); 識別寫法如下：background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#759AE9),color-stop(50%,#376FE0),color-stop(50%,#1A5AD9),color-stop(100%,#2463DE));針對CSS3box-shadow屬性不僅支持單定義的屬性控制如box-shadow:xyspreadblurcolorinset還支持box-shadow:insetxyspreadblurcolor,xyspreadblurcolor,等清除浮動第一種；：：overflow:hidden;_zoom:1;合起來可以清除浮動第二種；.clear{zoom:1;}.clear:after{content:"\20";display:block;clear:both;}（主要為了兼容此div的背景、margin、padding值在各個瀏覽器下一致；

此div沒有背景、margin、padding值，只用clear：both就行了）\o"解讀浮動閉合最佳方案：clearfix-大前端"解讀浮動閉合最佳方案：clearfix分享到：更多\o"累計分享6次"62011-05-16

分類：\o"查看HTML/CSS中的全部文章"HTML/CSS

\o"查看解讀浮動閉合最佳方案：clearfix的評論"37人評論13,640次瀏覽之前給大家介紹兩種浮動閉合的辦法\o"查看文章:CSS清除浮動萬能float閉合"CSS清除浮動萬能float閉合，得知很多同學(xué)都在使用下面的骨灰級解決辦法：.clear{clear:both;height:0;overflow:hidden;}上訴辦法是在需要清除浮動的地方加個div.clear或者br.clear，我們知道這樣能解決基本清浮動問題。但是這種方法的最大缺陷就是改變了html結(jié)構(gòu)，雖然只是加個div。最優(yōu)浮動閉合方案（這是我們推薦的）：.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{*+height:1%;}用法很簡單，在浮動元素的父云素上添加class=”demo

clearfix”。你會發(fā)現(xiàn)這個辦法也有個弊端，但的確是小問題。改變css寫法就ok了：.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}.demo,.demo2{*+height:1%;}以上寫法就避免了改變html結(jié)構(gòu)，直接用css解決了。很拉轟的浮動閉合辦法：.clearfix{overflow:auto;_height:1%}這種辦法是我看國外的一篇文章得到的方案，測試了，百試不爽，真的很簡單，很給力。喜歡的同學(xué)也可以試試這個辦法。這種方法是端友radom提供的，測試通過：.clearfix{overflow:hidden;_zoom:1;}感謝radom提供的這種方法！！js筆記：1、js優(yōu)化減少請求數(shù)量（合并文件，當(dāng)然也得考慮文件的大小，）2、js代碼性能，盡量使用變量來保存dom的遍歷值3、HTTP規(guī)范，瀏覽器每次從同一個域名中最多只能同時下載兩個文件。下載腳本期間，瀏覽器不會下載其他任何文件，即使是來自不同域名的文件也不會下載，所有其他資源都要等腳本加載完畢后才能下載。4、與DOM腳本編程工作有關(guān)的問題不外乎平穩(wěn)退化、向后兼容、分離Javascript這。這些問題的解決方式和解決程度影響著網(wǎng)頁的可用性和可訪問性。5、語義化--易于閱讀、有利于SEO解決IE6不支持最小高度height:auto!important;

height:200px;/*假定最低高度是200px*/

min-height:200px;內(nèi)部div自動撐開外部div的問題若內(nèi)部div有浮動你是無法自動撐開外部的div滴，解決辦法清除浮動了<div> <divstyle=”float:left”></div><divstyle=”float:left”></div><divstyle=”clear:both”></div></div><inputtype=”file”>此上傳按鈕各個瀏覽器廠家兼容性完全不同，谷歌，蘋果一類，最好控制，IE，火狐完全扯淡不支持對樣式進行控制扯淡的兼容性哇.class{position:relative;top:-39px;right:-200px;通用*right:20px;IE7right:20px\9;IE8_right:0px;IE6height:39px;width:440px;filter:alpha(opacity:0);opacity:0;}斷行變形的問題<inputtype="checkbox"name=""/><label>每天</label><inputtype="checkbox"name=""/><label>星期一</label><inputtype="checkbox"name=""/><label>星期二</label><inputtype="checkbox"name=""/><label>星期三</label><inputtype="checkbox"name=""/><label>星期四</label><inputtype="checkbox"name=""/><label>星期五</label><inputtype="checkbox"name=""/><label>星期六</label><inputtype="checkbox"name=""/><label>星期日</label>如果此行中有人為換行，這會引起樣式變形，瀏覽器解讀為空格Css優(yōu)先級問題針對樣式優(yōu)先級情況，內(nèi)部樣式大于繼承，繼承大于id，id大于class如<p><spanstyle=”color:#ff0000;”></span></p>Pspan{color:#ff0000;}#color{#000;}.color{#fff;}如上，優(yōu)先級逐級下降jQuery的空格問題var$demo=$(‘.test:hidden’);有空格的含義：選中類test下隱藏的元素var$demo=$(‘.test:hidden’);無空格的含義：選中類名為test的隱藏的元素絕對定位，相對定位Position：absolute絕對定位，默認情況下其父元素對象是瀏覽器的左上角，若父元素也是絕對定位，則對象是父元素Position：relative相對定位，針對父元素定位插入節(jié)點方法Firstappend() $(“p”).append(“<b>hello</b>”);example:<p>Isay:<b>hello</b></p>appendTo() $(“<b>hello</b>”).appendTo(“p”);<p>Iwantsay<b>hello</b></p>針對li:first-child li:last-child這種偽類，ie他nia的不支持Focus，點擊input輸入框，這種特效，input:focus{outline:1pxsolid#ff0000;}可以設(shè)置；$(“element”).css{“height”}獲取對象所設(shè)置的高度$(“element”).height();獲取對象的實際高度$(“element”).width(“100px”)設(shè)置寬度text-indent:-999px;作用：顯示圖片效果，內(nèi)含文字，為了便于SEO的抓取，隱藏掉文字JS變量定義Js變量定義不可使用”-“這個符號例如：varcount=1;這樣是失效的，在css里可以.count定義Js反義字符\r回車\n換行，一般同時在一起使用”\r\n”Select屬性multiple=”multiple”，如果不加這個屬性，默認只可以選一個jQuery中對象操作“this”的對象轉(zhuǎn)換問題$('tbody>tr').click(function(){ $(this) .addClass('selected') .siblings().removeClass('selected') .end() .find(':radio').attr('checked',true); })addClass時仍是默認對象，當(dāng)執(zhí)行到siblings這個方法時this已經(jīng)是原對象的兄弟們了（siblings()），因此要結(jié)束這個siblings的返回到原對象jQuery默認click事件<body> <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <trclass="parent"id="row_01"><tdcolspan="3">前臺設(shè)計組</td></tr> <trclass="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr> <trclass="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <trclass="parent"id="row_02"><tdcolspan="3">前臺開發(fā)組</td></tr> <trclass="child_row_02"><td>王五</td><td>男</td><td>湖南長沙</td></tr> <trclass="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr> <trclass="parent"id="row_03"><tdcolspan="3">后臺開發(fā)組</td></tr> <trclass="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <trclass="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table></body>$(function(){ $('tr.parent').click(function(){//獲取所謂的父行 $(this) .toggleClass("selected")//添加/刪除高亮 .siblings('.child_'+this.id).toggle();//隱藏/顯示所謂的子行 }).click();})css關(guān)于"浮動邊距加倍"及其解決方法css關(guān)于"浮動邊距加倍"及其解決方法解決方案是在這個div里面加上display:inline;寫div代碼的時候,經(jīng)常發(fā)現(xiàn)明明寬度算得很準(zhǔn)確,但是莫明其妙的會和計劃的布局不太一樣--|||

開始以為自己代碼寫的有問題,拼命找bug也一無所獲,最后可能會稍微修改樣式來達到想要的效果,但終究也是外道..昨晚刨根問底了一次...我靠..原來是IE的問題-_,-

今天跟半半嘮叨起這件事,還說要加入反IE的行列來著...為啥別的都沒問題就IE有問題嘛..-x-浮動邊距加倍錯誤(TheIEDoubledFloat-MarginBug)

如果某條邊與浮動方向同向，則向該邊上的浮動框應(yīng)用邊距時，邊距會增加一倍。此錯誤只影響一次或多次浮動的某行中的第一次浮動。#ax{

float:left;設(shè)定了左浮動

width:500px;

height:100px;

}

#bx{

float:left;

width:150px;

height:50px;

margin:00010px;設(shè)定了左邊距10px

}

<div>

</div>

//在IE中導(dǎo)致浮動邊距加倍,10px會變成20px...在不知道的情況下,以前多半會選擇減少div寬度,覺得是margin和寬度之間出了問題..解決方法:在margin后面跟一句display:inline;就可以了...但是我翻了半天也沒有翻到原理,只是說,在這樣的情況下,用這樣一個聲明,就可以阻止IE的邊距翻倍,而且并沒有任何inline的效果,沒有副作用這個bug實在是很常見==據(jù)說以前被認為是無法改良的IE的bug...現(xiàn)在雖然IE還是有這bug,但聰明的人們找到了對付它的方法=================================問題1：以DW編輯器為例，在頁面做完后，點“文件〉檢查頁〉瀏覽器兼容性”，檢查你所做的頁面在各個瀏覽器中是否顯示正常，如果出現(xiàn)以下問題：“浮動邊距加倍錯誤”“如果某條邊與浮動方向同向，則向該邊上的浮動框應(yīng)用邊距時，邊距會增加一倍。此錯誤只影響一次或多次浮動的某行中的第一次浮動。margin加倍的問題設(shè)置為float的div在ie7下顯示正常但是在ie6下設(shè)置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;針對部分IE，瀏覽器解析樣式表錯誤問題，例如，一個寫法完全正確的樣式表及頁面，表現(xiàn)卻不正常，這極有可能是樣式表或頁面中的漢語注釋引起的針對繼承問題，看例子、<ul> <li> <ul> <li></li> <li></li> </ul> </li> <li> <ul> <li></li> <li></li> </ul> </li></ul>針對這種標(biāo)簽的寫法，一定要注意對最外ul下的li的定義，如果外面li和內(nèi)部li都要有高度，寬度的定義一定要控制繼承問題，一種替換內(nèi)部標(biāo)簽（替換紅色標(biāo)簽，找其他標(biāo)簽代寫）firefox下inputtype="file"的size是多大[原]firefox對type="file"的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個值，來控制上傳框的大小。但是這個size值怎么設(shè)置，size="10"是多寬，默認值又是多少，不能光憑感覺去設(shè)置。用腳本來查看下：

<script

type="text/javascript">

$(function()

{

var

fileArray

[];

var

while

100)

{

fileArray.push(i

":<input

type='file'

size='"

/><br

/>");

i++;

}

document.write(fileArray.join(""));

$("input:file").each(function()

{

$(this).after("<b>"

$(this).width()

"</b>")

});

</script>在火狐下得到這樣的結(jié)果：

發(fā)現(xiàn)了一定的規(guī)律，默認為208像素，size="1"時為85像素，每個size之間相差6.5個像素的寬度，所以我們可以動態(tài)的設(shè)定size的值，如：

($.browser.mozilla)

{

$(this).attr("size",

(options.WrapWidth

85)

6.5)

}javascript引用外部文件優(yōu)勢：可維護性好遍歷不同的ＨＴＭＬ頁面的ＪａｖａＳｃｒｉｐｔ會造成維護問題可緩存―――瀏覽器能夠根據(jù)具體的設(shè)置緩存鏈接的所有外部ＪａｖａＳｃｒｉｐｔ文件可適應(yīng)未來―――ＥＣＭＡＳｃｒｉｐｔ區(qū)分大小寫第一個字符必須是一個字母、下劃線或美元符號其他字符可以是字母、下劃線、美元符號或數(shù)字只要意在保存對象的變量還沒有真正保存對象，就應(yīng)該明確讓變量保存ｎｕｌｌ值ｂｏｏｌｅａｎ類型的值是區(qū)分大小寫的，Ｔｒｕｅ不等于ｔｒｕｅ，Ｔｒｕｅ只是一個標(biāo)示符科學(xué)計數(shù)法：１８０００＝１．８ｅ４；０．００００００５＝５ｅ－７浮點數(shù)值計算不準(zhǔn)確ｉｓＦｉｎｅ（）函數(shù)驗證數(shù)值是否在規(guī)定范圍內(nèi)。ＮａＮ―――ＮｏｔａＮｕｍｂｅｒ，函數(shù)ｉｓＮ

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

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

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔