最近身边的朋友都很稀饭在微博上分享信息，生活的、工作的、无聊的、碎碎念的、反正想到什么就说什么，但是这样的信息实在不好管理，它们很零散，它们通常只是大家一时突发奇想或者二度传播的结果，它们没有得到及时的整理和分类，回头想找一条信息真的很难，你或许不记得是哪天唠叨的一句话，你或许不记得有哪个关键字，更糟糕的是你常用的微博打根就不支持站内搜索，所以我说微博就是说”废话“的地方，它的时效性太强，它的信息量非常大、而且快，很少人会去翻阅前几天的东西。当然纯粹的娱乐、视频、冷笑话等除外，想把微博作为一个技术传播平台的话，我想微博真的不适合，最好的分享工具还是传统的博客，比如baisohu.net，这也是之所以我不稀饭在新浪微博扎堆的原由，从某种角度看，我觉得它真的太2了~~

最近“知识管理”这个词挺热门的，呵，我的blog也改名了：白搜狐点内特…我的知识管理工具。

回到正题，现整理下最近在web前端方面（哎，说前端有点不好意思啦）的新发现，或者说小发现，分享给大家的同时也整理一下自己的知识。

一：超长字符宽度截取

之前在广大同志的影响下，哥一直用 white-space:nowrap;width:100px;overflow:hidden; 这个来截断字符，但是很不完美的是这个会出现几个像素被截断的情况，谁看谁不爽

现在可好啦，改革开放了，直接定义容器的宽、高、文本高度，然后超出隐藏就ok了，不会出现几个像素被截断的情况，如：width:250px; height:24px; line-height:24px; overflow:hidden; 嗯，感慨新生活很美好~~

二：png8图片透明

之前用透明png8图片做背景都是调用一个js，原来还可以调用一个叫iepngfix.htc（3K）的文件啊，然后在css中将需要使用png的元素与htc文件关联，就是这句话：_behavior:url(images/iepngfix.htc); 注意behavior前要加下划线，只针对ie6，这样别的浏览器就可以不用读取这一句囖，少耗点资源。

不仅可以用png8做背景图片，还可以在html插入png图片哦，前提是要做一张1*1的gif透明图片，否则插入的图片在ie6下面会出现一个红色的叉烧包，具体做法如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title></title>
<style type=”text/css”>
<!–
/* css里将需要使用png图片的元素与iepngfix.htc关联，确保htc文件中的这个路径(var blankImg = ‘images/blank.gif’)无错即可 */
.npc_con img {_behavior:URL(images/iepngfix.htc);}
.npc_bg {background:url(images/NPC.png) no-repeat;_behavior:URL(images/iepngfix.htc);width:60px;height:110px;}
–>
</style>
</head>
<body>
<div><img src=”images/NPC.png” alt=”" /></div>
<div></div>
</body>
</html>

三：自动换行

旧社会是酱紫的：word-break:keep-all;white-space: nowrap;

新社会呢：word-break:break-all;white-space:normal;word-wrap:break-word; 嗯，皆大欢喜，支持连续的无实义的字符，重点是支持火狐诶~

四：清除浮动

旧社会：

.clear:after { content:”.”; display:block; height:0; clear:both; visibility:hidden;}
.clear {+display:none; clear:both }

其实真的只要酱紫就好了：height:0; line-height:0; font-size:0; overflow:hidden; clear:both; 安全无忧，很早之前就是这样用了，只是后来MS被传统的儒家思想误导了都~

五：label for的巧用

如：

html：

<div>
<label for=”input_search_con”>
<input type=”text” id=”input_search_con” value=”输入后弹出拉框显示结果…” />
</label>
<label for=”btn_search_con”>
<input name=”" type=”button” id=”btn_search_con” />
</label>
</div>

对应css：
#input_search_con{ width:160px; float:left}
#btn_search_con{ width:20px; float:left;}
.input_search{ background:none; border:0; height:18px; margin:0; padding:3px 5px 0 5px; width:160px; color:#9b9b9b;}
.btn_search{background:url(../images/public_icon.gif) no-repeat -32px 5px; width:20px; height:21px; margin:0; padding:0; border:0; cursor:pointer; }

主要是利用label for来定义容器的浮动和宽度，酱紫你的表单元素就可以两两上下对齐啦~~

六：圆角图片边框的最优应用

先对比下两种做法：

方法一，对应的html和css如下：
————————-
<div class=”avatar_48″><img src=”pic/pic002.jpg” /></div>
.avatar_48{background:url(../images/public.gif) 46px -218px no-repeat; display:inline-block; padding:5px; width:140px; height:48px; text-align:center}
————————-

方法二，对应的html和css如下：
————————-
<div class=”intro avatar_48″><img src=”pic/pic002.jpg” /></div>
.intro{ width:150px;text-align:center;}
.avatar_48 img{background:url(../images/public.gif) 0 -218px no-repeat; display:inline-block; padding:5px; width:48px; height:48px;}
————————-

对比了方法一和二，主要的差异请见红色部分，方法二单独定义img标签的css，注意这里的背景图片位置和图片宽度都是固定的，这样做的好处是不仅可以重复利用.avatar_48 img这个css，而且还可以任意定义.intro这个外容器的宽度，而不用像方法一那样img标签的背景图片位置随着容器宽度的变化而变化，方法二可以很方便的解决外容器宽度和居中问题