CSS网页布局开发时的常见题目小结

在进行CSS网页布局开发时，您一定碰到过形形色色的布局题目，虽然本站网页布局频道提供了大量的教程，但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您碰到困难时为您提供快速参考。    一、有疑问，先验证  在调试时，先对您的代码进行验证每每能省去不少麻烦事。格式不精确的XHTML/CSS 会导致很多布局上的错误。 在其他欣赏器中进行测试之前，请先在最先辈的欣赏器中撰写和测试CSS代码，而不是相反。 假如您在破旧的欣赏器中编写和测试，你的代码就不得不依靠那个破旧欣赏器的糟糕的表现，然后在吻合标准的欣赏器中进行测试，看到表现效果“不正常” 时，你会很沮丧的。相反九寨沟旅游租车，您应该先将您的代码完美，然后再设法为较低级的欣赏器打算。如许从一开始您的代码就是吻合标准的，你不必再为支撑其他欣赏器而劳心费神。当然了，目前遵从标准的欣赏器无疑就是 Mozilla， Safari 或 Opera。   二、确保您期望的结果确实存在  很多特定的欣赏器专有的CSS扩展在正式标准中并不存在。 假如您对 filter（滤镜）或滚动条指定了样式，那么您就用了私有代码，除了IE之外，在别的欣赏器中毫无作用。假如验证器告诉您代码没有定义，极有可能您用了私有样式，如许在不同的欣赏器中很难达到同等的结果。 假如布局中肯定要用浮动对象，别忘了适时使用消灭（clear）属性。 浮动对象似易实难网站排名，而且不总是令人如愿以偿。假如您发现浮动对象伸出了容器的边界，或者不像您所期望的那样表现，请检查您的期望是否精确。关于这个题目请看Eric Meyer的教程 边距的合并：可用padding 或 border 来避免。 您可能被多余的（或者想要却不出现的）空白搞得焦头烂额。假如您用了 margins，边距的合并可能就是题目的根源。 Andy Budd 对此的诠释可能为你解惑。 避免将 padding/border 和固定宽度同时应用到统一元素。 IE5 的区块模型是错误的，是它把事情办坏了。对此也有权宜之计，不过最好是绕过这个题目，当子元素的宽度固准时，为父元素指定padding。   三、避免IE下未指定样式内容的闪烁。  假如您仅仅靠 @import 来输入外部样式表，早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前，未经格式化的HTML文本会短暂地出现。这是可以避免的。   四、别指望 min-width 在IE中有效。  IE不支撑它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧（filtering），可以实现同样的最终结果。 把CSS过滤器（filters）当作最后的手段 CSS 技巧和过滤器可以使您有选择地应用到（或者不应用到）某些元素。应当尽可能地找到标准的跨欣赏器的解决办法来实现您想要的结果，而不是动不动就使用过滤器。要将它当成断港绝潢时的救命手段。在这里可以找到大量的CSS 过滤技巧。［译注：不要把这里的filters和IE中的滤镜混淆。因为各个欣赏器对CSS标准的支撑程度不一，人们找到了很多技巧，将欣赏器无法诠释或错误诠释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。webjx3564 假如使用了锚点，在应用超链接样式时要分外警惕。 假如您在代码中使用了传统的锚点（），您会细致到 ：hover 和 ：active伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法： ：link:hover， ：link:active   五、记住“LoVe/HAte”（爱/恨）链接规则  要以下面的顺序指定超链接伪类：Link， Visited， Hover， Acitve。任何其他顺序都不稳当。如果用了：focus，次序应为 LVHFA（“Lord Vader‘s Handle Formerly Anakin”，Matt Haughey如许建议）。 请记住“TRouBLED”（麻烦的）边框。 边框（border）、边距（margin）和补白（padding）的简写次序为：顺时针方向从上开始，即 Top， Right， Bottom， Left。比如 margin： 0 1px 3px 5px;透露表现上边距为零，右边距为1px，依此类推。   六、非零值要指明单位。  在用CSS指定字体、边距或大小时，必须指明所用的单位。某些欣赏器对未指明单位的处理方法不足为凭。零就是零，不管是 px照旧em照旧其他单位，它不必要单位。例如： padding： 0 2px 0 1em;   七、测试不同的字体大小。  像Mozilla和Opera如许的高级欣赏器许可对字体进行缩放，不管你用的是什么单位。某些用户的默认字体大小一定和您的不同，尽最大努力去知足他们。 用嵌入式测试，发布时改为输入。 将样式表嵌入在你的HTML源代码中，在测试时可以消弭很多缓存引起的错误，尤其是某些Mac下的欣赏器。但在发布前，肯定要记住将样式表移到外部文件，用 @import 或 引入。   八、加上显明的边框有利于布局调试。  像 div {border： solid 1px #f00;} 之类的全局规则可以临时为你查出布局题目。为特定的元素加上边框可帮您找到难以发觉的交错或空白题目。 对图片路径不要用单引号。 当设置背景图片时，要坚持用双引号。尽管看起来有些多余，但是假如不这么做，IE5/Mac会噎住。 不要为未来的样式表（比如手持式设备或打印用样式表）留个“空位”。 Mac IE5 对空的样式表比较感冒，会增长页面的装入时间。建议样式表中至少应该有一条规则（哪怕是解释也好）SEO网站优化，免得 MacIE噎住。 另外值得一提的还有一些虽然不针对某些功能，但是在开发过程中应当细致的理论   九、好好组织您的CSS文件  恰当地成块解释CSS，将相似的CSS选择符编为一组，养成同等的命名风俗和空白格式（为跨平台考虑冷却器，建议用空白字符而不是tab。）以及适当的次序。 以功能（而不是表面）为类和ID命名 如果您创建了一个 .smallblue 类，后来打算将笔墨改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。   十、组合选择符 保持CSS短小对削减下载时间特别很是紧张。请尽量为选择符分组、 行使继续（inheritance）以及使用简写（shorthand）来削减冗余。 使用图片替代技术时要考虑亲和力 已经发现传统的FIR在屏幕阅读器，以及关闭图片表现［的欣赏器］中会出题目。 对此有其他解决办法，要根据详细情况，稳重使用。