Html doctype对css的影响_Html_Css

Html doctype对css的影响

html css

Html doctype对css的影响,html,css,Html,Css,当我这样做的时候 <html> <head> </head> <body> <div style="width:100%;height:100%;background:blue;"></div> </body> </html> div填充窗口但是如果我在开头添加doctype标记 <!DOCTYPE HTML> <html> &l

当我这样做的时候

<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div填充窗口

但是如果我在开头添加doctype标记

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

div填充宽度，但不填充高度

知道发生了什么吗？我知道我应该放置doctype标签，我只是想知道它在这种情况下的具体操作是什么导致了不同的行为。

请阅读此文章，您对doctype有什么想法， doctype是网页设计中非常重要的一部分

将Doctype添加到html页面时，指示浏览器遵循Doctype指定的标准。如果未指定它，浏览器将不知道它是什么类型的文档

您应该始终在页面中指定

一些链接可以帮助您理解什么是doctype以及它为什么重要。

实际上是这样的。问题是，身体的高度不够大，因此div的高度将与身体高度一样大

缺少doctype声明会触发“怪癖模式”，这意味着浏览器会做不同的事情来处理文档，假设文档是依赖于旧浏览器中存在的功能的遗留代码。粗略地说，“怪癖模式”意味着浏览器的行为或多或少类似于InternetExplorer4。但是他们用不同的方式来做；我已经编写了一个不完整的“怪癖模式”列表，它应该只用于需要它的遗留页面；相反，在“怪癖模式”下工作的页面可能在“标准模式”下崩溃，您只需添加一个doctype声明即可实现

在您的情况下，跳过这里的理论部分，您需要添加一些规则，使div元素以“标准模式”填充画布：

<style>
  head, body { height: 100%; margin: 0; padding: 0;}
</style>


头，体{高度：100%；边距：0；填充：0；}

及

W3Schools文章中有许多错误（令人惊讶，令人惊讶，它是W3Schools），WDG文章已经过时（并且没有涵盖问题所使用的HTML 5）…而且也没有回答所问的问题。Doctypes不是这样做的。浏览器知道它是什么类型的文档，因为在试图确定它时，他们关心的是内容类型头，而不是Doctype。那篇文章有很多错误。好吧，我对此做了更多的研究，发现doctype实际上定义了（X）HTML页面使用的版本。如果浏览器知道正在使用哪个版本，它可以使用该特定版本来解析文档，而不需要一直猜测如何解析文档的元素。doctype将有助于使用标准渲染模式，而不是特定于浏览器的怪癖模式。如果没有doctype，则无法验证内容和CSS。如果内容类型为application/XHTML+xml，则浏览器仅使用XHTML解析器，如果内容类型为text/html，则使用html解析器。Doctype仅用于怪癖/标准模式。您当然不需要Doctype来验证CSS。CSS甚至不是标记。（甚至可以说，如果您是针对模式进行验证，则不需要验证（X）HTML）。

<div style="width:100%;height:100%;background:blue; position: absolute;"></div>