如何查找<html>和<body>元素默认渲染规则及Chrome相关细节

一、默认渲染规则的查找路径 #

• Chrome/Edge（Blink引擎）：其默认样式表代码位于Chromium项目的third_party/blink/renderer/core/html/resources/html.css文件中，可通过Chromium开源仓库查看具体实现。
• Firefox（Gecko引擎）：默认样式表对应源码路径为mozilla-central项目的layout/style/res/html.css。
• 规范层面：HTML标准中提供了推荐的默认样式参考，但浏览器厂商会基于自身引擎实现调整，存在细节差异。

二、HTML元素的特殊CSS规则处理 #

1. 强制/特殊应用的规则 #

• 背景样式继承：若<body>设置了背景样式而<html>未设置，浏览器会自动将<body>的背景传递给<html>，这是CSS规范明确的特殊行为。
• 视口高度保底：默认情况下，<html>元素高度会至少覆盖整个视口（等效于min-height: 100vh），确保页面初始时铺满屏幕。

2. 容易被误解的"规则忽略"情况 #

你提到设置html { height: 50vh; overflow: hidden; }后，计算值和高亮显示正确但内容仍全部显示，并非规则被忽略，而是因为：

• <body>元素默认存在margin: 8px，且高度为auto（由内容撑开）。当<html>高度设为50vh时，<body>若内容高度超过50vh，会溢出<html>元素；而<body>默认overflow: visible，溢出内容会直接显示在视口中，此时需要同时设置body { overflow: hidden; }才能实现整体裁剪。
• 关于width: 50vw这类规则，<html>会正常生效，页面会仅占视口宽度的50%，剩余区域为空白。

三、各浏览器的一致性 #

核心行为（如背景传递、视口高度保底）基本遵循HTML/CSS规范，保持一致；但细节上存在差异：

• 不同浏览器的默认样式值（如<body>的margin大小、部分元素的默认字体）可能略有不同。
• 部分边缘场景的渲染逻辑（如极端尺寸下的根元素溢出处理）可能存在厂商特定实现，但这类差异不会影响常规开发。

内容的提问来源于stack exchange，提问作者André Casal