CSS 删除 DOCTYPE 后为什么 height 100% 仍然有效

在本文中，我们将介绍为什么在删除 DOCTYPE 声明后，CSS 中的 height 100% 仍然有效，并且将通过示例来说明这个现象。

阅读更多：CSS 教程

DOCTYPE 声明的作用

DOCTYPE 声明是用来指定 HTML 文档的版本和文档类型的命令。它告诉浏览器采用什么样的解析规则来渲染网页，并且帮助浏览器正确显示页面，以确保页面的可靠性和一致性。

CSS 中的 height 属性

CSS 中的 height 属性用于指定元素的高度。常见的取值有固定像素值、百分比和 auto。当我们将 height 设置为百分比时，它是相对于父元素的高度来计算的。

删除 DOCTYPE 后的影响

但是，有一种特殊情况，在删除 DOCTYPE 声明时，height 100% 仍然可以正常工作。当我们删除 DOCTYPE 声明时，浏览器会在怪异模式（quirks mode）下渲染页面。

在这种情况下，浏览器将不再遵循标准的渲染规则，而是会尝试兼容旧的、不符合标准的页面。在怪异模式下，浏览器会忽略一些 CSS 属性的规范要求，并采用一种较为宽松的渲染规则。

这就解释了为什么在删除 DOCTYPE 声明时，height 100% 仍然有效。在怪异模式下，浏览器会将 height 100% 解释为相对于父元素的高度来计算，而不管父元素是否真正具有一个确定的高度。

示例说明

让我们通过一个示例来说明这个现象。

<!DOCTYPE html>
<html>
<head>
    <title>Height 100% Example</title>
    <style>
        html, body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-color: lightblue;
        }
        .content {
            height: 50%;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            Height 100% Example
        </div>
    </div>
</body>
</html>

在以上示例中，我们将 html 和 body 元素的 height 属性都设置为 100%，并将背景颜色设为 lightblue。同时，我们在 .container 类和 .content 类中分别设置了 height 属性为 100% 和 50%，并将背景颜色设为 lightgreen。

当我们在浏览器中运行这个示例时，我们会看到一个占满整个浏览器窗口的矩形区域，它的背景颜色为 lightblue。在这个矩形区域内，我们可以看到一个高度为父元素一半的矩形区域，它的背景颜色为 lightgreen。这个示例验证了在怪异模式下，height 100% 仍然有效的现象。

如果我们在示例中加入 DOCTYPE 声明，将添加到文档的第一行，然后再次运行示例，我们会发现 .content 元素的高度将无法继承 .container 元素的高度，因为此时浏览器处在标准模式（standards mode）下，严格按照规范来渲染页面。