CSS布局标准

CSS2.1明确了2个模型,一个是众所周知的盒模型(Box model),CSS1没有盒模型的概念,盒模型的前身在CSS1里叫做面向盒的格式化模型。元素抽象为盒,以盒为对象设计思路清晰多了。CSS3的盒模型丰富了更多属性。盒的产生,以及盒的定位就是CSS2.1定义的第二个模型-可视格式化模型(Visual Formatting Model)。CSS3相关的布局标准实际上也在这个大的框架之下。


CSS布局有明确标准始于CSS2。CSS1里压根没提布局,虽然CSS1里有Float元素的定义,但它的设计不是为页面布局,只是为了实现图文绕排。早期用table布局便顺理成章。CSS2是98年变为推荐标准的,按理此时应该普及新的CSS布局标准,但table布局的使用习惯一直保持到2004年才被Jeffrey Zeldman那本书点醒。05年它的中文版《网站重构》出版,国内掀起重构浪潮。早期网页开发者是受软件教育的(Frontpage, Dreamweaver之类),完全没有标准的概念。

所以要从标准出发学习CSS,而不是仅仅掌握一些工具(包括一些库)。这是有前车之鉴的。

回到布局的话题上。CSS2.1的布局分为3种:

1. 常规流(Normal Flow)
2. 浮动(Float)
3. 绝对定位(Absolute Position)

这3种不能混用,很多人也错把position:relative跟position:absolute归为一类。position:relative是常规流中的一种,例外是它可以和Float一起使用。