CSS 理论+工具+实践

关于 CSS
理论+工具+实践

理论
布局方案 Positioning schemes
浏览器的核心之一叫做布局引擎 比如火狐的布局引擎是gecko
html元素在浏览器中通过css进行布局时 有四种布局方案
静态定位 也称为正常流定位 (默认方式) 所谓流 是通过流动模型 传达布局原理 html元素向左上角流动
绝对定位 (请思考 绝对定位中 坐标系的原点在哪里 )
相对定位(请注意是相对于在流定位中应该出现的位置)
fixed定位 直接针对浏览器的viewport 定位

盒子模型 box model
而每一个元素在被浏览器布局之前 首先被render为一个个box

我们现在的水平 学习这方面理论 应该直接看 w3的css 规范
 Box model
Visual formatting model

当然 理论是简单的 现实是复杂的 css在不同浏览器上的表现 非常的不一致 参见 acid 测试
所以有时 你需要 去w3schools 看看 这里是很务实的文档
http://www.w3schools.com/css/css_boxmodel.asp
这方面的书籍可以看看 css禅意花园


工具
学习css 最好的工具还是firebug
另外 实在忍不住 称赞一下 netbeans 在遵循标准方面的努力 编辑html时你得到的帮助 直接就是w3的规范 包括代码自动完成也严格按照dtd

实践
主要是通过工具学习理论
同样的firebug 在我手里就是强大的工具 在很多人手上 只不过是个很平庸的工具
firebug的已经把box模型做进去了 而且非常直观 但看的懂的人不多
另外 很多人因为缺乏探索精神 不知道 firebug 其实就是人们梦寐以求的 html+css的调试工具
也就是说 在firebug里面 可以直接编辑html (增删改查)  然后立即看效果
同样直接编辑css 立即看到效果 而且通过上下方向键 可以代码自动完成
虽然不能像Dreamweaver中那样 鼠标拖着层 直接跑
但通过上下方向键改变非静态定位元素的offset(盒子模型上)或者css里面的left top bottom right值 完全可以让html元素在页面里跑起来 简直就是在玩游戏 方向键操纵

调试完的结果 copy到页面源码中即可 彻底告别两眼一抹黑的编程方式