分类归档：DIV+CSS重构标准

您在这里：

本教程通过视频讲解如何一步步构建一张DIV+CSS网页，当然是从一张完全空白的网页开始…教程中涉及的图片素材和最终效果仅作一个参考，是否能设计出更美观的作品就要依仗大家自身的平面设计功底了。

在子元素上应用图片翻转，默认状态下我并没有为子元素设置可视的背景图片，而是让父元素的背景显示在子元素区域内，这个时候子元素的背景在CSS的控制下跑得远远的，只有当鼠标经过的时候，才会归位显示在子元素区域中。

每个元素都有各自的包含块，可以说包含块就是一个元素的布局上下文。CSS2.1定义了一系列判断某一元素包含块的规则，在我们深入学习之前，先对这些知识作一些基本的了解。

所谓的CSS Diagnostic我们可以简单的翻译成CSS诊断，当然是针对于HTML标签，把符合一些特定条件的HTML标签用特殊的样式标志出来，以便我们对HTML标签进行优化和完善。

所以最好还是自己写一个CSS Reset，并且要明白每一条Reset都是用来做什么的。CSS Reset本意就是重置样式，具体如何规划网站CSS结构，目前比较流行的有Eric Meyer的重置样式和YUI的重置样式，另有Condensed Meyer Reset简化Eric Meyer的样式。

通常，元素的width定义为左内边线与右内边线之间的距离，height则是上内边线与下内边线之间的距离。不同宽度、高度、补白、边界与边框共同决定了文档的布局。

文本的样式在网页中有着相当大的重要性，可能你觉得之前的效果截图看起来还可以，那是因为我使用的是火狐浏览器，它的默认字体是Sans-Serif，而IE中的默认字体是Serif，效果看起来就不怎么样了。

本文介绍了 5 个 CSS3 技巧，可以帮你实现未来的Web。目前这些技术不应该用在正式的客户项目，它们更适合你的个人博客站点，Web 设计社区，或者不会有客户向你投诉的场合。