到北京以后的第二个星期重新温习了《The Zen of CSS Design》,加上最近接触的公司的项目和刚刚完成的 training project,对于 margin、padding 外加浮动布局这几位老朋友运用得更加娴熟,同时也比以前有了更深的认识。
之前我一直觉得为了避免IE对于盒模型的非标准理解应该尽量使用 margin,但是最近发现这种想法有点天真——首先,margin 纵向叠加的问题是所有浏览器都存在的;其次由于IE对于“拥有布局”的奇特定义,几乎所有的著名 IE bug ——双空白边浮动 bug、3像素文本偏移bug等等——都是跟浮动布局和 margin 过不去。因此web标准组织目前推荐是尽量使用padding,尤其是在浮动布局的时候。如果非要在浮动布局的时候使用 margin,还是事先就准备好解决方法的好。
相对于在一个 css 文件中使用大量 hacks for IE,现在的我更倾向于为IE的各个版本浏览器分别编写样式表——这样一来,在代码的修改和维护方面会更加方便,至少不用去眼花缭乱的找下划线 hack 或者花里胡哨的 Tantek 框模型 hack 了。风凝在刚刚完成的 training project 中便分别编写了针对现代浏览器、IE 7 和 IE 6 三个样式表。在分别处理针对 IE7 和IE6 的样式表的过程中,确实能感觉到对于这些浏览器对样式表的呈现方式有了全新的认识。以前在写一些 hack 的时候总会有误打误撞的感觉,这次却觉得自己在完好的理解了W3C标准之外,又可以很好的转换为 IE7 和 IE6 的理解模式,如此一来,思路更加连贯,编写起来也更加得心应手。
其实现在想想,padding 还是比较好的——关于它的 IE bug 只有盒模型一项,处理起来又十分简单。当年我居然会排斥 padding,真是鼠目寸光了一把。在这次的 training project 中需要做出三栏流体布局。感谢 padding,没有让我遇到很多麻烦,只是很少的一点加减法就解决了IE6中的显示问题——不得不说一下,这次的 project 风凝真的是一直都没离开 Windows 自带的计算器,只是不知道是该感谢微软的贴心设计还是对自己日益退化的心算能力脸红。
从目前的形势来看,只要微软帝国不倒,只要页面还需要流体布局(浮动布局),padding 总还是要比 margin 让人放心。其实说起来,float 真的比想象中要好用,除了需要对浮动元素进行清理,真的已经是很完美的控制了;而且经常可以将浮动的各个部分想象成漂浮在方形木盆里面的木块,木块之间的漂浮原则完全适用于浮动布局,比如假设两个相邻的浮动部分宽度总和大于它们的容器宽度,就会有一部分浮动到另一个下面——两块在木盆里的木块如果宽度之和大于盆子的时候,自然会有一块模板漂在另一个下面啊。有时候形象思维就是有助于思考,hiahia。
关于 margin 和 padding 以及跟他们有关的一切一切事情,我越来越不敢自称精通。停留于“知道自己不知道”的境界,期待着“不知道自己知道”的来临。关于这些没完没了的琐碎东东,不知道我能发现多少乐趣。
COMMENTS | 3 COMMENTS
Speak | Add Your Comment