来自一淘的 WEB 前端的面试题，题目要求如下：
使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。
题目不难，主要还是考察面试者对 CSS 灵活运用程度。
以下 DEMO 是来自 JavaScript 罗浮宫3群好几个群员的 DEMO。
如果你也有兴趣，不妨试试。
<p>图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。</p>
<p>下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/12/img_middle.jpg" alt="理想的图片垂直居中效果图" /></div>
- 13th 01 2011|
- XHTML&CSS|
- 6,897|
“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。
某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。
我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。
空标签法
在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：
<style type="text/css">
.clear{ clear:both;height:0;overflow:hidden; }
.float_left{ float:left; }
.float_right{ float:left; }
</style>
左浮动元素
右浮动元素
- 27th 12 2010|
- XHTML&CSS|
- 3,406|
经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见了。
要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。
花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。
- 23rd 09 2010|
- XHTML&CSS|
- 4,351|
现在使用HTML5的简短的Doctype声明已经成了一种流行趋势：<!DOCTYPE html>，这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器，这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。
本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明，换过之后才发觉一个问题，所有网页上显示的图片（背景图片除外）都会在图片的下方多出3.5px，如下图所示：
- 27th 08 2010|
- XHTML&CSS|
- 2,338|
雨夜带刀
前端开发工程师，技术宅，现居北京。
QQ群：202604349