CSS 为什么在移除 DOCTYPE 后，height 100% 会起作用

在本文中，我们将介绍为什么在移除DOCTYPE声明后，CSS中的height 100%会起作用的原因。在理解这一现象之前，我们需要了解DOCTYPE声明的作用和影响。

阅读更多：CSS 教程

DOCTYPE声明的作用

DOCTYPE声明是指在HTML文档开头的一行声明，用来告诉浏览器解析器文档类型和版本。它的作用主要有两个方面：

文档类型选择：DOCTYPE声明告诉浏览器所用文档的类型，根据不同的DOCTYPE声明，浏览器会采用不同的文档解析规则。这一规则是根据W3C（World Wide Web Consortium）对HTML规范的定义来确定的。
兼容模式切换：不同的DOCTYPE声明会触发浏览器的不同渲染模式，包括标准模式（Strict Mode）和怪异模式（Quirks Mode）。标准模式下，浏览器会更严格地按照W3C的规范解析和渲染页面；而怪异模式下，浏览器会兼容早期的浏览器版本的渲染方式。

移除DOCTYPE对height 100%的影响

在文档中，使用CSS设置元素的高度百分比是一种常见的需求。在有DOCTYPE声明的情况下，使用height属性设置百分比高度是需要满足一定条件的。具体来说，要想让一个元素的高度为100%，其父元素必须具有一个明确的高度值。

然而，当DOCTYPE声明被移除时，浏览器会进入怪异模式渲染页面。在怪异模式下，浏览器的行为会更加宽松，对于height属性的百分比值会有所处理。简单地说，移除DOCTYPE声明后，浏览器的渲染规则会更接近于早期的浏览器版本，对于height属性的百分比值可以更加灵活地解释。

示例说明

为了更好地理解在移除DOCTYPE声明后height 100%的行为变化，我们可以通过以下示例来进行说明。

假设我们有一个简单的HTML结构：

<!DOCTYPE html>
<html>
<head>
  <style>
    #container {
      height: 200px;
      background-color: gray;
    }
    #child {
      height: 100%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="child"></div>
  </div>
</body>
</html>

在这个例子中，我们在DOCTYPE声明中使用了<!DOCTYPE html>。此时，#container元素的高度为200px，#child元素的高度为#container元素的百分之百（也就是200px）。

接下来，我们将移除DOCTYPE声明，使其进入怪异模式，代码如下：

<html>
<head>
  <style>
    #container {
      height: 200px;
      background-color: gray;
    }
    #child {
      height: 100%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="child"></div>
  </div>
</body>
</html>

在这种情况下，我们会发现#child元素依然会将其高度设置为#container元素的百分之百。也就是说，即使没有明确的高度值，使用height 100%依然可以正常工作。

总结

在本文中，我们介绍了为什么在移除DOCTYPE声明后，CSS中的height 100%会起作用的原因。DOCTYPE声明在HTML文档中具有重要的作用，不仅告诉浏览器文档的类型和版本，还触发浏览器的不同渲染模式。移除DOCTYPE声明后，浏览器会进入怪异模式，对于CSS中的height属性的百分比值会有所处理，使得height 100%可以正常工作。需要注意的是，在编写HTML文档时，我们仍然建议使用正确的DOCTYPE声明，以确保页面的标准化和一致性。