這是2014年12月24日 14:48:29 發(fā)在CSDN的文章兆龙。原文在此
在**在線已經(jīng)工作了一個多月了杖爽，從剛開始只有基本的HTML技巧到現(xiàn)在對前端開發(fā)略有所知，最近這一個月學(xué)到了很多知識紫皇，這也要感謝我的同事對我的幫助慰安，特別是感謝我的前輩，感謝感謝聪铺。
??以下是我這段時間以來在技術(shù)和工作技巧上的收獲總結(jié)化焕，有個人總結(jié)，也有在網(wǎng)上學(xué)習(xí)的有用的技巧铃剔。不到之處撒桨，還請指正！
1键兜、clear:both的使用以及FF瀏覽器設(shè)置margin-top?無效的解決方法
在子標(biāo)簽設(shè)置浮動之后凤类，為了不影響后面div?的布局，需要在后面的div加上clear:both來清除浮動普气。
在FF設(shè)置margin-top無效谜疤，可以在設(shè)置了浮動的div?最后加上(.clear{?clear.both;})來解決。
???對于因多加的標(biāo)簽會引起IE和FF高度變化，通過如下方法解決：
程序代碼
.clear {clear: both; height:1px; margin-top:-1px; overflow:hidden;}參考網(wǎng)址：http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html
2夷磕、設(shè)置網(wǎng)頁字體以及雙引號使用的問題
在設(shè)置網(wǎng)頁字體的時候可以直接寫font-family:微軟雅黑;?也可以使用?font-family:”微軟雅黑”;效果是一樣的履肃。
???雙引號不可以嵌套使用，在已經(jīng)有雙引號的時候坐桩，里面的標(biāo)簽要使用單引號尺棋。
3、超鏈接跳轉(zhuǎn)
4擦俐、多次重復(fù)的圖文混排
使用標(biāo)簽。標(biāo)記定義了一個定義列表握侧，定義列表中的條目是通過使用標(biāo)記(“definition?title”蚯瞧，定義標(biāo)題)和標(biāo)記(“definition?description”，定義描述)創(chuàng)建的品擎。給出了術(shù)語名埋合，標(biāo)記給出了術(shù)語的定義。也就是說用來創(chuàng)建列表中的上層項(xiàng)目萄传，用來創(chuàng)建列表中最下層項(xiàng)目甚颂，和都必須放在<?/dl>標(biāo)志對之間。
5检疫、pading和margin屬性在IE6的兼容性問題
在元素設(shè)置float的時候散罕，同時設(shè)置margin或padding屬性在IE6中會加倍露乏，解決方法是利用IE6的專有識別符號“_”解決，即設(shè)置_margin為原有數(shù)值的一半來解決赶么。
“*”為IE6和IE7專有識別符號，F(xiàn)F無法識別脊串。
6辫呻、IE與Fire?Fox識別CSS屬性區(qū)別標(biāo)簽?!important
#page_body{
width: 1000px !important;
height:30px !important;
width: 980px ;
height:36px ;
}
以上樣式
在IE6/7中只執(zhí)行width:?980px與height:36px
FireFox中則優(yōu)先執(zhí)行帶有!important標(biāo)簽的CSS行width:?1000px與height:30px
記住，以上代碼的順序不能顛倒琼锋。
7放闺、width與margin,padding之間的寬度計(jì)算問題區(qū)別
一個600px寬的div，margin,padding的值計(jì)算區(qū)別
ie{width: 600px;margin:10px;padding10px;}
在Firefox中應(yīng)修改為
FF{width: 560px;margin:10px;padding10px;}
也就是說在FF中缕坎，margin,padding的左右值也要算在width中怖侦，600-10×2-10X2=560px
以上兩點(diǎn)參考鏈接：http://www.poorren.com/css-ie-ff-margin-padding/
8、網(wǎng)頁設(shè)置層寬的時候不要超過1000px，否則在縮小瀏覽器窗口的時候容易出現(xiàn)橫向滾動條础钠，影響瀏覽體驗(yàn)恰力。
9、網(wǎng)頁head中有文字的旗吁，可以通過在背景div設(shè)置背景為top并通過padding-top調(diào)整子元素的垂直位置踩萎，通過子元素的margin調(diào)節(jié)水平位置
10、input文本框的光標(biāo)的IE瀏覽器下不垂直居中很钓，可以設(shè)置一個較低的line-height香府，讓后通過padding調(diào)節(jié)；前后的文字和標(biāo)簽不對齊的時候設(shè)置為display：inline-block解決码倦。
11企孩、設(shè)置頁面最寬背景的方法：
設(shè)置的css為：
.bg{background:url(bg.jpg);width: expression(this.offsetWidth > 1920 ? '1920px': true); max-width:1920px; margin:0 auto;}
12、css中filter:alpha透明度使用小結(jié)兼容IE袁稽、火狐?
{ilter:alpha(opacity=80); /* IE */
? ? -moz-opacity:0.8; /* Moz + FF */
? ? opacity: 0.8; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/ }
簡單解釋勿璃，IE使用私有屬性filter:alpha(opacity)，Moz?Family使用私有屬性-moz-opacity推汽，而標(biāo)準(zhǔn)的屬性是opacity（CSS?3,?Moz?Family部分支持CSS3）补疑。后面的數(shù)值是透明度，使用百分比或者小數(shù)（alpha(opacity)）使用大于0小于100的數(shù)值歹撒，其實(shí)也是百分比）莲组。?
filter:Alpha(Opacity=?,?FinishOpacity=?,?Style=?,?StartX=?,?StartY=?,?FinishX=?,?FinishY=?)
Opacity：透明度級別，范圍是0-100暖夭，0代表完全透明锹杈，100代表完全不透明。
FinishOpacity：設(shè)置漸變的透明效果時迈着，用來指定結(jié)束時的透明度竭望，范圍也是0?到?100。
Style：設(shè)置漸變透明的樣式裕菠，值為0代表統(tǒng)一形狀市框、1代表線形、2代表放射狀糕韧、3代表長方形枫振。
{style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
StartX和StartY：代表漸變透明效果的開始X和Y坐標(biāo)。
FinishX和FinishY：代表漸變透明效果結(jié)束X和Y?的坐標(biāo)萤彩。
13粪滤、自動隱藏多余的文字，帶有省略效果?
? {style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
14雀扶、網(wǎng)頁添加百度分享?效果：
在之間復(fù)制上如下代碼：（只有聯(lián)網(wǎng)的時候才有效果）
百度分享：
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
15杖小、地圖錨點(diǎn)添加方法肆汹，適合在圖片上添加鏈接的情況。
shape屬性與?coords?屬性配合予权，可以規(guī)定區(qū)域的尺寸昂勉、形狀和位置。
shape屬性用于定義圖像映射中對鼠標(biāo)敏感的區(qū)域的形狀：
圓形（circ?或?circle）
多邊形（poly?或?polygon）
矩形（rect?或?rectangle）
16扫腺、整個網(wǎng)頁全部變成黑白效果岗照，在CSS中加入如下代碼
html {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);-ms-filter:? grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);
? ? filter: url("data:image/svg+xml;utf8,
#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
17、瀏覽器中最后一個圖層無法加載父圖層的背景笆环，要在父圖層上面加上overflow:hidden攒至，讓父圖層自動適應(yīng)高度。
18躁劣、在FF瀏覽器中設(shè)置背景的時候注意不要把repeat屬性放在center和top屬性之間迫吐，會造成背景圖片無法顯示
19、在FF瀏覽器中設(shè)置了a:active中超鏈接的文本或背景顏色之后账忘，超鏈接會一直顯示該顏色而忽略a:link中的設(shè)置的顏色志膀。
20、在文本框中顯示提示內(nèi)容：
{value='你想說點(diǎn)啥'}" onfocus="if(value=='你想說點(diǎn)啥'){value=''}" onkeyup="textup()"
onkeydown="textdown(event)" class="text_are_01" id="content" name="content">你想說點(diǎn)啥
21鳖擒、在標(biāo)簽內(nèi)用placeholder="姓名"?也可以梧却，不過IE瀏覽器不支持
22、如果有個別元素超過1000px主層的败去，也可用???position:?relative;
right:?12px;平移主層解決，但是主層內(nèi)的元素要相應(yīng)向左糾正烈拒。這個方法需要body背景圖片配合使用圆裕。
23、position屬性:
absolute生成絕對定位的元素荆几，相對于?static?定位以外的第一個父元素進(jìn)行定位吓妆。
元素的位置通過"left",?"top",?"right"?以及?"bottom"?屬性進(jìn)行規(guī)定。
fixed生成絕對定位的元素吨铸，相對于瀏覽器窗口進(jìn)行定位行拢。
元素的位置通過"left",?"top",?"right"?以及?"bottom"?屬性進(jìn)行規(guī)定。
relative生成相對定位的元素诞吱，相對于其正常位置進(jìn)行定位舟奠。
因此，"left:20"?會向元素的?LEFT?位置添加?20?像素房维。
24沼瘫、"rel=nofollow"如果是鏈接到公司網(wǎng)頁不要在標(biāo)簽加這個，如果不是連接到本公司的頁面就要加這個咙俩。
nofollow的使用
nofollow有兩種用法：
1.用于meta元標(biāo)簽：耿戚，告訴爬蟲該頁面上所有鏈接都無需追蹤。
2.用于a標(biāo)簽：登錄,告訴爬蟲該頁面無需追蹤。?
nofollow主要有三個作用：
1.防止不可信的內(nèi)容膜蛔，最常見的是博客上的垃圾留言與評論中為了獲取外鏈的垃圾鏈接坛猪，為了防止頁面指向一些拉圾頁面和站點(diǎn)。
2.付費(fèi)鏈接：為了防止付費(fèi)鏈接影響Google的搜索結(jié)果排名皂股，Google建議使用nofollow屬性墅茉。
3.引導(dǎo)爬蟲抓取有效的頁面：避免爬蟲抓取一些無意義的頁面，影響爬蟲抓取的效率屑墨。
簡單來說躁锁，“nofollow”?標(biāo)簽是Google、Yahoo和微軟公司前幾年一起提出的一個標(biāo)簽卵史，鏈接加上這個標(biāo)簽后就不會被計(jì)算權(quán)值战转，搜索引擎支持nofollow屬性，在很大程度上抑制博客或論壇的垃圾留言以躯。
