去除 inline-block 之间的空白间隔

当多个连续的inline-block元素水平方向排列时,各个元素之间会出现空白间隔,这是由于空白字符(空格或换行)引起的。

HTML

<div id="container">
    <div class="cell">cell1</div>
    <div class="cell">cell2</div>
    <div class="cell">cell3</div>
    <div class="cell">cell4</div>
</div>

CSS

#container {
    background: #bbada0;
    width: 215px;
    padding: 10px;
}
#container .cell {
    width: 50px;
    height: 25px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    background: #cdc1b4;
    text-align: center;
}

效果是这样的:

有时候因为实际布局需要,或者为了避免不必要的影响,必须去除空白,下面总结了几种常用的解决方案:

  • 移除空白字符,全部写在同一行
    <div id="container">
      <div class="cell">cell1</div><div class="cell">cell2</div><div class="cell">cell3</div><div class="cell">cell4</div>
    </div>
    
  • 改变换行的位置
    <div id="container">
      <div class="cell">
      cell1</div><div class="cell">
      cell2</div><div class="cell">
      cell3</div><div class="cell">
      cell4</div>
    </div>
    
  • 设置父元素的font-size为0,再为每个inline-block对象设置font-size的值
    #container {
      background: #bbada0;
      width: 215px;
      padding: 10px;
      font-size: 0;
    }
    
    最终效果是这样的:

空格的 ASCII 码

今天在用爬虫抓取网页数据时,最终抓取得到的字符串是带空格的,很神奇的是这个时候用java.lang.String.trim()方法没有能把空格去掉。折腾了很久才发现是因为抓取的网页上表格数据中的每一个单元格后都带有&nbsp;

最后发现,空格对应的ASCII竟然有两个,一个是最常见的 0x20(十进制32),另一个是 0xA0(十进制160),Java中String的trim()方法只能去掉ASCII码为32的空格,对&nbsp;转换而成的空格是无效的。

解决方法:

String newStr = str.replaceAll("[\\s\\u00A0]+$", "");

附:ASCII码表

如何撤销下拉框选中的值

昨天修bug时发现,系统有个功能是选择文字模板,如果选择的模板改变,会弹窗确认框选择是否覆盖之前的内容,当选择否的时候,不覆盖当前内容,但是下拉框的值变了,这就出现了不对应,所以应该在选择否的时候,撤销下拉框的本次选中。

解决这个问题可以使用jQuery提供的 $.data() 来把值赋给一个自定义属性,并在每次确认改变选中下拉框的值的时候更新这个属性的值。

Example:

<select name="template">
    <option value="template1">模板一</option>
    <option value="template2">模板二</option>
    <option value="template3">模板三</option>
</select>
<div id="target"></div>
$('#template').change(function() {
    var selected = $(this).val();
    var text = $.trim($('#target').text());

    if(text) {
        if(confirm('是否覆盖已有模板?')) {
            $('#target').text(selected);
        } else {
            $('#template').val($.data(this, 'current'));
        }
    } else {
        $('#target').text(selected);
    }

    $.data(this, 'current', $(this).val());
});

演示
选择文字模板:


参考:jQuery how to undo a select change

Firefox 定义日期 new Date() 兼容问题

F

今天改bug时遇到一个问题,在火狐浏览器中,通过var date = new Date('2016-04-06 12:45:11');这个方式定义的Date对象是无效的,出现Date {Invalid Date}错误,而在谷歌浏览器中不存在这样的问题。
查阅资料发现,Firefox中和Chrome中均可以用以下方式创建Date对象:

  var date = new Date('2016/04/06 12:45:11');
  var date = new Date('2016-04-06T12:45:11');

Firefox中测试结果:

因此问题解决方案如下:

  var dateString = '2016-04-06 12:45:11';
  var date1 = new Date(dateString.replace(/\s/,'T');
  var date2 = new Date(dateString.replace(/-/g,'/');

Git 常用命令详解

G

备忘,记录一些常用的 git 命令,现在只会用一些最简单的,以后慢慢完善

配置

安装完 git 之后首先第一步通常是配置你的个人信息,包括 name 和 email ,配置完毕后,任何修改or提交等操作 git 才会知道是谁干的

# 配置用户信息
git config --global user.name "[name]"
git config --global user.email "[email address]"

# example
git config --global user.name "chuiliu"
git config --global user.email "xxx@foxmail.com"

配置完毕后可以使用下面的命令查看所有的git配置,能看到刚刚配置的用户信息

git config -l
git config --list

阅读全文

Ubuntu修改root密码

U

Ubuntu版本14.04.4 LTS

安装Ubuntu后一直没有使用root账户登录过,今天使用root登录发现无法登录,安装的时候没有给root账号设置过密码。查阅资料后发现可以通过以下方式来启用root账户:

在终端执行命令sudo passwd root,输入要修改的密码,然后就可以用root账号登录。

MySQL中的definer和invoker

M

今天将一份服务器上的sql脚本导入到本地做测试,一切配置完毕后发现程序跑不起来,经过调试后发现问题所在:数据库中所有的存储过程的definerdev@%,所有视图都因为definer错误打不开。

很明显错误原因是本地数据库没有dev这个用户,而存储过程是需要用dev用户的权限来调用的,于是我创建一个相同名称的用户,授权对该数据库的所有操作权限,问题就解决了。

那么,这里的definer是什么意思,与另一种定义方式invoker又有什么区别?

DEFINER与INVOKER的区别

我们在创建存储过程的时候,需要定义存储过程的安全验证方式SQL SECURITY,可以设置为DEFINERINVOKER,表示这个存储过程执行的时候,是使用谁的权限来执行的。DEFINER表示由DEFINER属性所指定的用户的权限来执行,INVOKER表示以调用这个存储过程的用户的权限来执行。

DEFINER

当定义为DEFINER时,必须数据库中存在DEFINER指定的用户,并且该用户拥有对应的操作权限,才能成功执行。与当前用户是否有权限无关。

定义为DEFINER的存储过程:

CREATE DEFINER=`dev`@`%` PROCEDURE `p_user_login`(IN u_name VARCHAR(25), IN u_password VARCHAR(100))
BEGIN

  SELECT u.id, u.name, u.tid, u.status, u.is_report FROM v_user u WHERE u.name=u_name AND u.password=u_password AND u.status=1;

END;

INVOKER

当定义为INVOKER时,只要执行者有执行权限,就可以成功执行。

定义为INVOKER的存储过程:

CREATE DEFINER=`dev`@`%` PROCEDURE `p_user_login`(IN u_name VARCHAR(25), IN u_password VARCHAR(100))
    SQL SECURITY INVOKER
BEGIN

  SELECT u.id, u.name, u.tid, u.status, u.is_report FROM v_user u WHERE u.name=u_name AND u.password=u_password AND u.status=1;

END;

Node.js笔录:Query String

N

用到,做个笔记

querystring模块提供了有关查询字符串参数处理的操作,提供具体以下4个方法:

querystring.stringify(obj, [sep], [eq])
querystring.parse(str, [sep], [eq], [options])
querystring.escape
querystring.unescape
  • querystring.stringify(obj, [sep], [eq])

    将一个对象序列化成字符串请求参数,参数obj指要序列化的对象
    [sep]:分隔符,默认值 &
    [eq]:分配符,默认值 =

    var querystring = require('querystring');
    var obj = {username:'zheng', password:'123456'};
    console.log(querystring.stringify(obj));
    

    输出结果为:

    username=zheng&password=123456

  • querystring.parse(str, [sep], [eq], [options])

    将字符串序解析成对象
    [sep]:分隔符,默认值&
    [eq]:分配符,默认值=
    [options]:限制对象中键值对的数量,默认值1000,设置为0则不限制

    var str1 = 'username=zheng&password=123456';
    var str2 = 'username=zheng&password=123456&tag=movie&tag=music';
    console.log(querystring.parse(str1));
    console.log(querystring.parse(str2));
    

    输出结果为:

    { username: ‘zheng’, password: ‘123456’ }
    { username: ‘zheng’, password: ‘123456’, tag: [ ‘movie’, ‘music’ ] }

  • querystring.escape

    对参数中的字符串进行编码

  • querystring.unescape

    对参数进行解码

    var str = 'username=用户名&password=123456';
    var escape = querystring.escape(str);
    var unescape = querystring.unescape(escape);
    console.log(escape);
    console.log(unescape);
    

    输出结果为:

    username%3D%E7%94%A8%E6%88%B7%E5%90%8D%26password%3D123456
    ‘username=用户名&password=123456’

Sublime Text 常用快捷键与配置项

S

记录 sublime Text 3 编辑器中一些常用的快捷键

ctrl + d     # 选择相同的单词,连续按继续选择
alt + F3     # 选择整个文档中相同的单词
ctrl + g     # 输入行号,跳到某一行


ctrl + l                 # 选择一行,连续按继续选择
ctrl + shift + ← / →     # 向左/向右选择文本
ctrl + shift + ↑ / ↓     # 向上/向下移动行
ctrl + shift + k         # 删除一行
ctrl + enter             # 在当前行下插入一行
ctrl + shift + enter     # 在当前行上插入一行


ctrl + shift + d     # 向下复制
ctrl + shift + v     # 粘贴,并按当前文本格式化
ctrl + x             # 剪切一行
ctrl + k + k         # ctrl+k后再按一次k,删除从光标处至行末的文本
ctrl + p             # 搜索项目中的文件


alt + .              # 闭合html标签
ctrl + /             # 单行注释
ctrl + shift + /     # 多行注释


ctrl + pagedown      # 切换到左边的标签页
ctrl + pageup        # 切换到右边的标签页
ctrl + w             # 关闭当前文件
ctrl + shift + t     # 恢复上一个关闭的标签
alt + shift + 2      # 分两屏

阅读全文

关于换行

不同操作系统下表示一行文本的结束的标识符是不同的:

  • UNIX/LINUX 行尾换行 \n , LF
  • Windows 行尾回车换行 \n\r , CRLF
  • Mac 行尾回车 \r , CR

Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行;
Windows系统下的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号。

TOP