轩枫阁

今天需要些一个回复评论的页面，设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。下面分享2种实现textarea高度自适应的做法，一种是用div来模拟textarea来实现的，用CSS控制样式，不用JS；另一种是利用JS控制的（因为存在浏览器兼容问题，所以写起来比较麻烦）； 查看全文

前段阵子看到百度音乐的这个效果，觉得不错哟~

在学习CSS3之前，还不知道怎么实现的，现在想起来，so easy~

大家可以先去浏览下效果：http://music.baidu.com/。

其实就是在图片的上层，添加一层白色半透明的层，hover的时候，结合CSS3的动画实现透明层位置平滑移动效果。

这时候可以先浏览下我写的demo：www.xuanfengge.com/demo/201308/baidumusic，然后再看下代码 查看全文

第一次看到这个效果的时候，是在2010年4月的青海玉树7.1级地震时的网站效果。当时很多网站都有这个灰白的效果，以示哀悼。人们纷纷停止一切娱乐活动，很多游戏都暂停服务，汽车鸣笛，默哀三分钟等。

虽然这些灾难不是我们想要的，但是我们码农们能做什么，通俗的说就是为我们的网站加上灰白的效果~之前淘宝在雅安地震也应用了灰度的效果。

这次的这个代码是兼容了IE7-9（6没测）、Firefox、Chrome等浏览器，高级浏览器主要是用了CSS3的滤镜，而IE本身自己有滤镜，但是性能不好，所以不推荐使用，不过使用一两天还是没问题的。 查看全文

首先我们需要知道的一个基本规则
在网页显示中 一个 即一个空格所占用的位置大小为一个字符位。
一个英文字母的位置大小即一个字符位
一个空格的大小有多大？直观的显示就是一个英文字母的大小

而我们威武的中国汉字怎么能只占这么少呢!
所以一个汉字的位置是两个英文字母的位置大小

1.如果在没有声明何种字体的情况下

FF
不管一个 还是连续的空格 FF都是会忠实的执行显示 你定义多少个 FF就显示多少个空格；
IE
默认的空格显示是比较窄的 所以同样的页面会与FF的显示有出入

2.在 font-family:”宋体”; 情况下

FF IE 下的空格显示大小是一样的

所以记得声明 font-family 属性

两种情况

清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。

为什么要清除浮动

一个块级元素的高度如果没有设置height，那么其高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，你可以使用firebug查看下如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析 查看全文