前端開發中一些經常使用技巧總結

時間 2019-11-20

標籤前端開發一些經常使用技巧總結简体版

原文原文鏈接

本身前端開發中經常使用到的一些技巧及問題解決方法,會常更新,但願對前端路上的朋友有幫助.
JavaScript經常使用函數請點此前往: 一些經常使用且實用的原生JavaScript函數 , 你還能夠前往蘭芝博客, 查看由淘寶UED整理的前端tips: http://www.12sui.cn/category/css/ .
1.文章標題列表中日期居右顯示的兩種方法,方法A相對方法B省資源,但比方法B要多寫兩句代碼,使用時請視狀況而定:
方法A(經典論壇ariesjia提供的思路.感謝~):javascript

<p>@Mr.Think這是文章標題<span>2010-10-10</span></p>

而後定義p和span的樣式: css

p{position:relative}
p span{position:absolute; right:0}

方法B:html

<p><span>2010-10-10</span>@Mr.Think這是文章標題</p>

而後定義span右浮動: 前端

p span{float:right}

其實這兩種方法能夠延伸到不少狀況下,很實用的一種寫法;
2.web標準中,同一頁面中只能有一個h1標籤.不少人知道這個概念,但作到的卻不多;
3.空白外邊距互相疊加的問題:通常經過添加透明邊框或者1px的內邊距避免.詳細解讀:http://mrthink.net/css-margin-overlying-way/;
4.ie6 下max/min-width/height實現,_width:expression(document.body.clientWidth > 600 ? 「600px」 : 「auto」); _height: expression(this.scrollHeight >600 ? 「600px」 : 「auto」);.
5.html/class/id,最好統一以小寫書寫,這樣更嚴謹(符合xhtml標準);
6.不推薦用下面代碼兼容IE8:java

若是是非短時間性頁面,儘可能避免使用,頁面應儘量保證向後兼容.更多兼容方法請詳細閱讀: http://mrthink.net/cssandhtml-hack-mainbrower/
7.空div在IE(FF中沒有)是有默認高度的,能夠用定義:div { witdh:100%; background:#9c0; font-size:0}的方式去掉默認高度;
8.在使用table標籤時應該儘量的利用它自己的屬性，最大限度的分離結構與樣式.詳細解讀:http://mrthink.net/csshtml-colgroup-col-style/;
9.充分利用表單中label標籤提高用戶體驗; 這一點對於頁面中那些小的選項框,以及對殘障人士閱讀網站都有好處. 細節是用戶體驗的第一步;例如:web

<label for="sample">SAMPLE</label><input id="sample" />

當鼠標點擊SAMPLE時,光標將自動在文本域中獲取焦點;
10.fieldset, legend標籤, 不爲人知,卻很實用的一組標籤;它能夠很明瞭的把一組元素框起來,主要用於表單;
11.optgroup標籤,不爲人知,它對提高選擇表單用戶體驗頗有幫助.做用? 就是能夠在有不少選項時,對這些選項分組:面試

<select id="selectId">
<optgroup label="GROUP ONE">
<option value="1">one select</option>
<option value="2">two select</option>
</optgroup>
<optgroup label="GROUP TWO">
<option value="3">three select</option>
<option value="4">four select</option>
</optgroup>
</select>

效果演示:express

12.表單都要加name值,name值是一個標示,不一樣於id,據我所發現,如果未定義name值,非IE瀏覽器下是沒法經過document.formid獲取到表單元素的.請看以下代碼及註釋:瀏覽器

<html>
<head>
<script>
window.onload=function(){
alert(document.mrform.length); //全部瀏覽器均會彈出表單元素長度
alert(document.thinkform.length); //僅IE會彈出該表單元素長度
}
</script>
</head>
<body>
<form name="mrform" id="thinkform" action="#">
......
</form>
</body>
</html>

13.同一行上文字與圖片垂直居中對齊方法:爲圖片與文字的共同父元素全部的後代元素定義*{vertical-align:middle};
例如:dom

<p>@Mr.Think<img src="i/image.gif" /></p>

只需定義p*{vertical-align:middle}便可使文字與圖片同行垂直居中.
14.同一行上文字與表單對齊方法: 設置表單元素第一字體爲Tahoma(Verdana系列也可),並設置vertical-align:middle.建設你們把這個約定寫入CSS RESET中,能減少不少麻煩:

body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

15.獲取m至n間隨機數的公式: Math.random()*(n-m)+m;
16.針對ie6下png背景顯示問題,CSS中能夠這樣解決:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://mat1.gtimg.com/www/mb/images/openShadow.png’);
17.優先加載頁面中的Sprite圖(請參見Google 首頁源碼):

if(document.images)new Image().src='images/sprite.png'

18.CSS及JavaScript中,非註釋類中文(CSS中指字體),在最後優化時須轉換成Unicode碼,以免編碼錯誤時的亂碼顯示.
19.ie6/ie7下若overflow失效, 通常是因爲元素中有relative定位元素,可爲爲父級元素添加position:relative解決.
20.ie6下border-color:transparent無效解決方法: