上周新建了一个粉丝群，周三发小测题目，每周依次是CSS、DOM和JS，周六上午答疑，答疑方式是直播加群聊。然后今天上午进行了第一次的直播答疑，是一个简单的CSS布局问题，本文可以看成是本次答疑的文档版。如果你也想要加入粉丝群，可以参见文末的信息。
文章关键字 ‘宽度自适应’
粉丝群第1期CSS小测点评与答疑
2019年01月12日，星期六CSS百分比padding实现比例固定图片自适应布局
2017年08月17日，星期四对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的……
小tip:FireFox下文本框/域百分比padding bug解决
2012年11月13日，星期二我是流体布局控，经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域，光标最好距离左侧边缘有一定的间距。
但是，如果只考虑文本框本身（父标签无其他特殊处理），这一套在流体环境下是行不通的，因为固定的padding数组无法让文本框永远100%自适应外部的宽度，至少非现代浏览器下是如此！
目前而言，好的解决之道是……
CSS页面重构“鑫三无准则”之“无图片”准则
2011年05月25日，星期三
“鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过。这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则，即“无宽度”、“无图片”和“无浮动”，目的是使CSS布局模块化以及增强可扩展性。
此准则是针对我个人的，可能没有什么适用性，也可能会对您的学习有所启发，所以这里还是简单分享下。其中“无宽度”准则则在去年秋天专门讲了下，这里再简单介绍下其中的“无图片”准则。
本文虽然文字不多，但是多涉及到的技术点不少。有demo，有截图，有源代码展示，总之，希望本文的内容能够对您的学习有所帮助。
小tip:IE不支持CSS3多背景的替代解决方案
2011年05月23日，星期一IE6-IE8浏览器不支持CSS3多背景(Multiple backgrounds)，只使得这个很惹人爱的属性没了用武之地，好在IE浏览器下还是有替代的解决方法的。而本文的内容就是介绍这种替代方法，并展示了比较实际的应用实例。显然，像这种性质文章，demo页面自然少不了，丰富飞截图自然少不了，必要的源代码展示也少不了。总之，希望本文的内容能够对您的学习有所帮助。
CSS页面重构之“门派”之分
2010年08月14日，星期六本文是我CSS理论方面又一篇重磅的文章。文中提出了CSS页面重构一个非常新颖的“门派”观点，主要指出了当下CSS页面重构两种主要的“流派”，并通过大量的实例与图片对此观点进行了说明与验证。
对于CSS页面重构的“门派”之分，其实自己的思考还不是很成熟，借此文顺便梳理了下自己的思考。这里，我特别想汲取其他同行的一些观点与看法，以帮助自己进一步地成长。所以非常欢迎指出您觉得表达不准确的地方，也欢迎提出您自己的一些观点。
我是如何对网站CSS进行架构的
2010年07月13日，星期二本文将展示我是如何对网站的CSS进行架构的，表达能力有限，尽量展示自己的想法，观点。本文可谓将之前一些列的CSS内容作了个简短的总结，从css rest，CSS 库，到自适应布局，到代码的分离与合并等。提供必要的图片，代码展示，以及一些源文件下载。
说实话，全然套用我展示的这套架构会由于不熟悉或是掌控不够而产生问题，但是，里面一些概念，一些思想应该能有一定的启示作用的。
另外，我只是个初出茅庐的小生，我知道，很多真正功力深厚的前端开发人员有着更好的更广泛适应的前端架构，如果您有幸来到这里，欢迎分享您的一些见解与认识。还有，文中若有您觉得不合理的观点，也非常欢迎指正。我们需要在不断的交流中提高的。
CSS渐变图片背景下高度亦自适应按钮
2010年06月21日，星期一
本文将介绍一种效果精湛，兼容性强，扩展性强，易上手易理解的按钮实现方案，此按钮与以往介绍的按钮一样，也是高宽自适应，可与图片混排，受控于text-align属性。但是这里的代码更加精简易懂，更符合主流与开发者的习惯。
本文提供必要的截图，提供Demo页面，以及代码展示，并对代码做了一定的讲解，希望能对您的学习有所帮助。
文本框邮箱地址自动提示jQuery插件
2010年06月18日，星期五本文主要展示我今天差不多花了一天时间写的邮箱地址自动提示的插件，算是蛮实用的东西，插件不大，为压缩不足6K。跟以往一样，提供详尽的插图，提供demo页面，提供源文件下载以及代码示例。总之，希望能对您的学习有所帮助。
搜狐白社会似iphone短信对话框效果的优化
2009年09月10日，星期四搜狐有个白社会，今年六七月份露出水面的。其首页css我是从头到尾看了一遍，学了些东西，也用自己的想法优化了些东西。其中之一就是一个显示你或者是好友说了些什么的popup式的对话框，有些形似iphone里面的可爱的短信对话框。
这个对话框效果是不错的，能支持高度上限500像素的文字内容，宽度自动适用于内部的文字内容。
但是参观其HTML代码是背景图片后，发现要实现这样的效果，这代码，至少是这图片肯定是优化不够的。而本文将对比其原来的方法，提供更加大小优化的图片和对应的没有兼容性问题的css代码，看如何将css发挥到机制实现图片背景的优化。
文章主体将简要展示对原图片做如何的处理，展示在各个浏览器下的兼容性表现，以及一些关于css的相关说明。提供实例页面和相关的源文件打包下载。希望对您有所帮助！
我的应用
我的应用