CSS核心：包含块（Containing Block）
2010年7月16日
提示：本文基于2008年w3c手册，内容与当前可能存在出入，请自行甄别。
包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
在阅读本文前，请先理解一下：
- 文档结构
- 元素类型
- CSS的direction属性
CSS核心：再说框模型（Box Model）
2010年7月13日
框模型（Box model，也译作“盒模型”）是CSS非常重要的概念，也是比较抽象的概念。
文档树中的元素都产生矩形的框（Box），这些框影响了元素内容之间的距离、元素内容的位置、背景图片的位置等等。而浏览器根据视觉格式化模型（Visual formatting model）来将这些框布局成访问者看到的样子。
因此，要掌握使用CSS布局的技巧，就需要深入了解框模型和视觉格式化模型的原理。
…阅读全文…
CSS核心：框模型与视觉格式化模型[2010年7月16日更新：包含块]
视觉类型的媒体根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。
media属性和媒体类型
2010年6月9日
一、media属性
当设定样式的时候，可以指定此样式应用于何种媒体，例如：
<link rel="stylesheet" href="basic.css" type="text/css" media="screen" />
media属性为可选属性，用于指定应用此样式表的介质或媒体。允许的值有：
…阅读全文…
浮动元素的两端对齐
2010年3月16日
当我们使用float来使元素并排显示的时候，可以使用margin来控制元素之间的距离，而在很多版式里（例如产品图片的列表），需要浮动的元素达到两端对齐的效果，如图1所示。
图1 两端对齐的版式
单纯使用float:left或者float:right，而不添加额外的class区分元素的位置，似乎是无法实现靠左/右的效果。
…阅读全文…
CSS双线边框研究
2009年8月9日
昨天有人在群里问图1的边框效果是否能实现。
边框效果图
有人给出答案，需要嵌套一个元素实现。我当时粗粗写了个测试页面，但是时间太晚了，也没有细弄，今天把想法写出来。
CSS的边框border属性经常会用到，但是，其参数值到底有几个？未必大家都知道。
4.3伪类与伪元素[1]–4.3.1 伪类
2009年7月26日
伪类和伪元素是两种有意思的选择器，之所以称“伪”，因为它们实际上并不存在于源文档或者文档树中，但是它们又确实可以显示出效果。
4.3.1 伪类（Pseudo-Classes）
应用最广泛的伪类，就是链接的普通状态、鼠标悬停状态、已点击过的链接以及当前激活的链接，虽然没有在XHTML内对a元素设定class属性，也可以生效。例如：
…阅读全文…
[js+css]图片自动等比例缩小且垂直居中[v20071208]
2009年6月25日
前言：这是篇老文，忽然发现在换blog系统的时候，竟然没有转过来，现在补上。
图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而img标签内不设定widht和height即可。
ie7已经支持max-width和max-height，这是为数不多的好消息之一。但是对于ie6及以前的版本，就只能用js来设置了。
标示当前位置的导航
2009年3月19日
利用CSS在导航条上标示当前所在频道的技术，已经有很长时间了，在很多CSS的书中都介绍过，不过还是总被问到，因此写一个简单的示例来讲解一下。
其实原理非常简单：
[CSS+js]图片展示效果
2009年3月17日
本例对于完全支持:hover伪类的浏览器来说，只需要CSS即可，但是同以前做的一些效果一样，还是需要JS来应付史前怪兽IE 6。
关于这个js文件，请参阅：《JS解决IE 6不支持:hover伪类的简单方法》
