DOCTYPE对网页效果的影响

来源：互联网发布：可信靠谱的网络兼职编辑：程序博客网时间：2024/04/29 19:20

最近在页面中使用padding控制div的样式时，其中一个页面无论怎么修改padding都不能起到应有的作用，代码如下：
<div style="width:300px;height:300px;padding:10 10 10 10;border:1px solid #000;">
<div style="border:1px solid #CC5500;">测试信息</div>
</div>

   和其他页面比较，代码几乎没有差别，但是还是有一点不起眼的差异，那就是两个文件开头的doctype声明不一样：
出现效果的页面的doctype是：
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，
而另外一个：
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
将后者改为和前者一致时，就出现了需要的效果。
    页面上的doctype声明往往容易被忽视，但在遵循标准的任何web文档中，它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的web文档。 doctype的作用doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。每个dtd都包括一系列标记、attributes和properties，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。假如文档中的标记不遵循doctype声明所指定的dtd，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。对于标记不一致的问题，浏览器相较于校验器来说更宽容。但是，不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。
    代码中的“padding:10 10 10 10”其实是一种不正确的写法，将其改为“padding:10px 10px 10px 10px”就不会存在由于doctype不同而导致样式不起作用的问题了。