前端瑣記

細數工做三個月來踩過的坑。。。

在作移動端頁面時，遇到讓兩個元素（好比簡單到兩個單詞）平分頁面的寬度的狀況， 不要使用給他們加a ,span 標籤，而後讓a,span寬度50%的方法。這種方法作不到徹底居中。

solution:利用div+float

當一個浮動元素（沒有聲明寬度）包含一個向右浮動的子元素時，它一樣也會自動的延伸填充，以適應父元素的可用內容的寬度。

solution:儘可能爲一個浮動元素指定一個具體的寬度值，

H5頁面對一些元素進行旋轉、變形鋸齒修復

solution: -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)

熟悉各瀏覽器的內核能夠避免作完頁面全部瀏覽器都測試一遍的麻煩

Trident內核的常見瀏覽器有：[1] 　IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；[1] 360安全瀏覽器（1.0-5.0爲Trident，6.0爲Trident+Webkit，7.0爲Trident+Blink）獵豹極輕瀏覽器，360極速瀏覽器（7.5以前爲Trident+Webkit，7.5爲Trident+Blink）獵豹安全瀏覽器（1.0-4.2版本爲Trident+Webkit，4.3及之後版本爲Trident+Blink）獵豹極輕瀏覽器，傲遊瀏覽器（傲遊1.x、2.x爲IE內核，3.x爲IE與Webkit雙核）、百度瀏覽器（早期版本）、世界之窗瀏覽器[2] （最初爲IE內核，2013年採用Chrome+IE內核）、2345瀏覽器、騰訊TT、淘寶瀏覽器、採編讀瀏覽器、搜狗高速瀏覽器（1.x爲Trident，2.0及之後版本爲Trident+Webkit）、阿雲瀏覽器（早期版本）、瑞星安全瀏覽器、Slim Browser、 GreenBrowser、愛帆瀏覽器（12 以前版本）、115瀏覽器、155瀏覽器、閃遊瀏覽器、N氧化碳瀏覽器、糖果瀏覽器、彩虹瀏覽器、瑞影瀏覽器、勇者無疆瀏覽器、114瀏覽器、螞蟻瀏覽器、飛騰瀏覽器、速達瀏覽器、佐羅瀏覽器、海豚瀏覽器（iPhone/iPad/Android）、UC瀏覽器（Blink內核+Trident內核）等。 其中部分瀏覽器的新版本是「雙核」甚至是「多核」，其中一個內核是Trident，而後再增長一個其餘內核。國內的廠商通常把其餘內核叫作「高速瀏覽模式」，而Trident則是「兼容瀏覽模式」，用戶能夠來回切換。 ​ Gecko(Firefox內核)：Netscape6開始採用的內核，後來的Mozilla FireFox(火狐瀏覽器) 也採用了該內核，Gecko的特色是代碼徹底公開，所以，其可開發程度很高，全世界的程序員均可覺得其編寫代碼，增長功能。由於這是個開源內核，所以受到許多人的青睞，Gecko內核的瀏覽器也不少，這也是Gecko內核雖然年輕但市場佔有率可以迅速提升的重要緣由。 Opera現已改用Google Chrome的Blink內核。 WebKit內核常見的瀏覽器：傲遊瀏覽器三、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器， Blink 谷歌 基於KHTML內核的內核：WebKit、WebCore。

移動端頁面a標籤在觸發點擊時或則設置了僞類：active的元素，在激活狀態時會出現高亮，但有時候並不須要

solution:設置樣式：-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

垂直居中

solution:

1	利用lineheight;
2	將父級div的設置爲display:table,將子div設置爲display:table-cell。而後就可使用table特有的vertical-align:middle屬性了。
3	利用負邊距,先設置position：absolute而後設置top:50%接着設置margin-top:-(height/2)
4	首先設置display:box,而後box-align:center爲兼容各瀏覽器請加相應前綴

水平居中

1	塊級元素可使用margin:0 auto;
2	行內元素想button之類的可使用text-align:center;
3	使用負邊距，原理同垂直居中
4	利用flexible-box，原理同垂直居中，設置box-pack:center
*	伸縮盒模型在移動端使用的較多，瀏覽器還有一些兼容性問題，不過網格佈局在移動端和PC端使用都沒有什麼問題

給a加背景圖片以前要先加高度而且display:block;

避免連接點擊時隨意跳轉

在a標籤內加入href="javascript:0"

no more until now~