前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，颇有感觉，于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题，希望可以纠正css中对高度的正确认识，并依次展开列举了一些常见的有关line-height的应用，提供demo页面，希望对您的学习有所帮助。
“CSS相关”目录存档
css行高line-height的一些深入理解及应用
2009年11月28日，星期六CSS实现圆角六色渐变自适应按钮详解
2009年11月21日，星期六本文将要展示如何用纯css实现2个像素的真正意义上的圆角，并且按钮带有细腻圆滑的渐变效果，其色彩丰富，可支持6种过渡色，从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理，将代码形象化，提供demo，希望您可以充分了解这种技术，也希望能开阔您的思维，对您的工作与学习有所帮助。
我熟知的三种三栏网页宽度自适应布局方法
2009年11月17日，星期二目前，以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局，也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目，如果深入细节，不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀，没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。
告别图片—使用字符实现兼容性的圆角尖角效果beta版
2009年11月6日，星期五字符既是文字又是图片，所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果，例如，圆角，尖角等。您就可以使用字符实现这类效果。可以优化页面，提高性能。
本文以Google gmail邮箱中字符应用为引子，讨论的字符的一些特性，与图片相比的一些优缺点。而后，以字符+css的方式展示如果使用字符实现圆角效果，如何实现尖角效果。最后拿新浪微博的对话框做实际的实例，演示如何使用字符代替图片，实现几乎同样效果的优化，以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面，提供源文件打包下载，希望本文的论述能够对您有所帮助。
关于Google圆角高光高宽自适应按钮及其拓展
2009年10月24日，星期六
本文以Google圆角高光高宽自适应按钮为引子，阐述此貌似平常的按钮后面的强大技术，并提供我经过我反复试验的更加优化高效的css实现方法，并对其优点进行分析。然后进一步扩展，探讨Google在css技术应用以及网页产品开发上的思想意识，强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果，更重要的是要传达Google在产品设计在技术运用上所体现的一种思想，传达Google是如何将产品的扩展性预见性运用到极致的，借以希望你我都能从众领悟到一些东西，然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面，希望对您有所帮助。
对html与body的一些研究与理解
2009年09月18日，星期五
最近一直构思着写篇关于html标签的文章，虽说之前处理过html标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。
在网上查阅相关资料想整合一下相关的信息，发现深入探讨html，与body的文章很少，只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值，其余都没有什么相关的好文章。
而这里，我要讲述的与上面的交集并不多，主要是讲述一些关于html与body的各种表现，我自己的一些解释，以及处理相关问题的些经验，很多应该是网上很少提及的东西，内容不算深奥，我尽量截图展示，表述清晰，希望对大家能够有所帮助。
鲜为人知的一个解决兼容性问题的利器——小数
2009年09月12日，星期六说到解决兼容性问题，不得不提一下css hack，曾几何时我以会使用几个hack沾沾自喜，后来发现自己真是个vip级别的蠢蛋，会用几个hack只是中级阶段，真正厉害的人要以没有hack同样可以实现复杂页面的兼容性，这才叫厉害。
这里将介绍一个很有趣的您应该没有见过的解决某些兼容性问题的神奇的一招——使用小数值。小数值像素在不同浏览器下的解析是有差异的，但是这种差异一旦用到点子上，乖乖，可以反而用来解决兼容性问题。正所谓一物降一物啊。
本文将由浅到浅，就是很浅显的讲解这个平时很不受注意的现象与方法。提供实例页面，希望能对您有所帮助
搜狐白社会似iphone短信对话框效果的优化
2009年09月10日，星期四搜狐有个白社会，今年六七月份露出水面的。其首页css我是从头到尾看了一遍，学了些东西，也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框，有些形似iphone里面的可爱的短信对话框。
这个对话框效果是不错的，能支持高度上限500像素的文字内容，宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后，发现要实现这样的效果，这代码，至少是这图片肯定是优化不够的。而本文将对比其原来的方法，提供更加大小优化的图片和对应的没有兼容性问题的css代码，看如何将css发挥到机制实现图片背景的优化。
文章主体将简要展示对原图片做如何的处理，展示在各个浏览器下的兼容性表现，以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助！
大小不固定的图片、多行文字的水平垂直居中
2009年08月28日，星期五想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。
css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。一起来一睹为快吧！
复选框单选框与文字对齐问题的研究与解决
2009年08月27日，星期四目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了，因为平时对这个问题注意的比较多，也经常做些测试，对这个问题还是有一定的了解，也总结了不少自己的解决方法。今天我就写下来，供交流与参考。
尤其是第三和第五个方法，我是比较推荐使用的，其他方法也是很不错的，对于理解css，拓宽思路还是有些帮助的。
我的应用
我的应用