大踏步走

床头一直放着阿当的那本《编写高质量代码》，很长时间了都没怎么翻。之前看目录，感觉讲的内容大多都是自己相对比较熟悉或者经常遇到的，以为没啥可看的。。。然而真正看了前面几章的内容，才知道自己又犯了眼高手低的毛病，真是罪过。。。

昨天看了第四章，讲的是高质量的CSS。从头看完，收获还是很多。以前经常遇到的一些问题，虽然凭经验知道解决的方法，但总归太过零散，没有有效的将这些问题整理、总结、沉淀下来；更深层次的讲，究竟是什么情况下会出现类似问题、产生问题的根本原因？等等这些，都需要自己以后多问个为什么。

言归正传，这就将本章中一些重点内容整理下，并结合自己的理解，敲打以记之。

一、关于DTD

这是最根本的问题，不必做过多阐述。按照W3C的标准，我们需要在HTML页面的最开始声明文件的DTD类型，如果漏写，在Firefox浏览器下仍然会按照标准模式来解析页面，但在IE中，就会触发怪异模式。而两种模式的区别就表现在对合模型的解析不一样。所以我们在日常的页面书写中，首先要声明正确的DTD类型。现在常用到的是(X)HTML下的三种模式和HTML5模式，当然如果是WAP页面，还有其相应的声明模式。

二、Css组织模式

公认最合理的三层结构：base层、common层和page层。当然这是相对于团队合作和比较大的项目来划分的。如果网站很小，仅仅几个页面，或者只是一个专题，个人觉得完全没必要分三层结构，这个根据实际情况来定。

二、Css组织模式

公认的三层结构：base层、common层和page层。当然这是相对于团队合作和比较大的项目来划分的。如果网站很小，仅仅几个页面，或者只是一个专题，个人觉得完全没必要分三层结构，这个根据

三、模块化Css

模块化可以让代码高度重用，提高开发效率，降低维护成本。我们讲的模块化，往往是结构和功能相对独立，并在页面中可多处使用的内容单独抽去出来，这部分形成一个模块。

模块化有这么几个原则：

1. 1、模块与模块之间尽量不要包含相同的部分，如果有，则把他们单独提出来，形成新的模块；
2. 2、模块在保证数量尽量少的原则下，做到尽可能的简单，保证它的重用性(*需要加深理解)。

四、Css命名

关于Css命名这方面的内容，自己曾经写过《最新整理的CSS命名与书写》，可做参考。

在这里补充几个问题：

1. 1、Css Reset。相信大家都明白这个东西产生的原因，而且各个版本繁多。没有最好，只有更好。只要适合你、并能在团队项目中保持一致即可以。
2. 2、Css应用时，继承定义还是挂多个Class？继承就是给父级容器定义足够全的样式，子类继承父类的样式，如果有不同的，则重新定义覆盖掉父级的定义；组合则是将复杂的样式拆分为容易产生变化的部分和相对稳定的部分。相对稳定的部分为主体Class；变化的根据特性拆分为一个个独立的Class，书写的时候通过挂多个Class来实现效果。相比较：继承容易产生多个重定义的Class，这样相对不统一，维护成本也大；而组合看着需要引用多个Class比较繁琐，但书写清晰，可多处使用，维护起来也更方便。所以还是推荐“多用组合，少用继承”。

五、Css常见问题

1. 1、Css编码风格。现在有工具可以对CSS样式文件进行压缩和格式化，所以选择是单行还是多行，符合个人习惯就好，最终压缩上线即可。
2. 2、Css编码风格。现在有工具可以对CSS样式文件进行压缩和格式化，所以选择是单行还是多行，符合个人习惯就好，最终压缩上线即可。
3. 3、Id和Calss选择？建议尽量少用Id，多用Class。
4. 4、Css Hack。恰好我上一篇就是整理的这部分内容，可参考《web页面Css Hack 整理》。
5. 5、Css Sprite。可翻看之前在Web标准化交流会讲过这方面的内容，可参考《Web标准化交流会–Css Sprites应用之我见》。使用Css Sprite排列，要尽量使图片紧凑合理，同时要保证不会影响页面的正常显示和扩展性。
6. 6、Inline-block。关于Inline-block我只说几点：

   1)、Inline-block只能对行内元素设置，且在Ie6/7下无效。但Ie6/7下可以使用是因为触发了hasLayout；

   2)、Ie6/7下有在表现上垂直对齐有问题，需要用hack来解决(*vertical-align:-10px;)；

   3)、一些特殊标签默认就具有Inline-block的属性，比如Img和Button；

   4)、设置了position:absolute和float会使标签的display自动设置为Inline-block，而position:relative则不会。

7. 7、hasLayout与Zoom。hasLayout是Ie浏览器专有的一个属性，用于Css的解析引擎。既然是专有，那就也有些专有的问题，很多时候在Ie浏览器下会产品诡异的bug，而其他高级浏览器则正常解析，这就与hasLayout没有被触发有关，所以我们要触发hasLayout，这就要用到一个很好的神器–Zoom。Zoom从何而来，感兴趣的朋友可以搜索下。当你设置zoom:1后，在Ie浏览器下就基本会触发hasLayout，而从使页面能正常解析。但阿当在书中讲到：“‘zoom:1’并不是一定可以触发hasLayout的，在极少数特殊情况下，例如在非常复杂的Css设置，特别是使用DHTML的时候，使用‘zoom:1’也会无效。”这个没有提到具体实例，所以只能更进一步验证了，不过他提到了一个更牛逼的方法，使用“position:relative”来触发hasLayout，这个方法我之前也用过，确实可以；不过使用定位后对页面也有弊端，这个你要懂得。
8. 8、水平居中和垂直居中。这里我想讲的是一个很常用的标签，可以用来处理未知宽度容器的水平居中，这就是Table。设置table {margin-left:auto;margin-right:auto;}，不必定宽，你试试在浏览器的显示效果~~不过也许是我才疏学浅。。。

还有些没有整理完，后继再补上吧，而且干巴巴的没有实例，看着也很费劲，希望以后可以改进。由于自己愚钝，有理解或书写错误的，还请朋友们海涵并指正！！