小知识随手记（一）

1、word-break: break-all;/*让英文单词也自动换行*/        即会拆分单词

     letter-space：字母间距

     word-spacing：单词间距

3、获取样式，兼容IE和FF：

因为o.style.width，这种方式只能获取到内联的样式，外联样式需要用下面方式获取

然后IE和火狐方法不一样

function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}
window.onload=function()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'))
}

 8、JS简单判断字符在另一个字符串中出现次数的2种常用方法：

（1）通过分割获取长度原理

var s = 'www.jb51.net';
var n = (s.split('.')).length-1;
alert(n); //弹出2

（2）通过正则实现

function patch(re,s){
  re=eval("/"+re+"/ig")
  return s.match(re).length;
}
var s = 'tools.jb51.net';
alert(patch('t',s)); //弹出2

PS：关于正则操作，这里为大家提供2款非常方便的正则表达式在线工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

9、img和span水平垂直居中问题（主要解决小图标+文字水平垂直居中问题）

给行内元素均要设置vertical-align: middle;

<div id="head">
    <img src="images/logo.png">
    <span>UserCenter</span>
</div>

    #head{
         100%;
        text-align: center;
        padding: 20px 0px;
        position: fixed;
        height: 40px;
    }
    #head span{
        font-size: 30px;
        letter-spacing: 1px;
        line-height: 40px;
        vertical-align: middle;
    }
    #head img{
        vertical-align: middle;
    }

，效果图

10、css样式：文字本身的大小不兼容解决

问题原因：同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的：IE下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。

解决方案：给文字设定 line-height ，确保所有文字都有默认的 line-height 值，才能确保在不同浏览器下字体所占高度是一致的。这点很重要，在高度上我们不能容忍1px 的差异。