前端琐记
细数工作三个月来踩过的坑。。。
在做移动端页面时，遇到让两个元素（比如简单到两个单词）平分页面的宽度的情况， 不要使用给他们加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] IE6、IE7、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内核常见的浏览器：傲游浏览器3、[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);
垂直居中
| 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"
