HTML5 Doctype 与浏览器渲染模式
做前端开发时，Doctype 声明往往容易被忽视，但它实际上决定了浏览器如何解析你的页面。很多人遇到奇怪的布局问题，回头一看才发现是 Doctype 没写对。
它的作用是什么？
Doctype 主要有两个功能：一是告诉校验器文档遵循什么 DTD，二是通知浏览器采用哪种解析算法。注意，浏览器加载页面时并不会真的去下载 DTD 检查合法性，这只是一个声明动作。如果没有声明，浏览器会根据自身规则解析，这往往是布局错乱的根源。
三种解析模式
浏览器主要支持三种模式：非怪异（标准）模式、怪异模式以及部分怪异（近乎标准）模式。
当存在完整的 DOCTYPE 时，浏览器进入标准模式；缺失或残缺时，则可能进入怪异模式。这是为了兼容早期未严格遵循 W3C 标准的旧网页而保留的机制。
核心差异在哪里？
在实际开发中，这两种模式下的表现差异主要体现在以下几个方面，这也是坑最多的地方：
-
盒模型不同 怪异模式下通常沿用 IE 盒模型，即
width = content + padding + border；而标准模式遵循 W3C，width仅包含 content 部分。这点不统一，CSS 宽度设置很容易失效。 -
垂直对齐细节 对于
inline元素和table-cell，标准模式下vertical-align默认为baseline。但在怪异模式下，如果单元格内只有图片，默认值会变成bottom，导致图片底部多出几像素空隙。 -
字体继承 虽然 CSS 中
font-family、font-size等属性通常可继承，但在怪异模式的table元素中，某些字体属性（特别是font-size）可能不会从父元素正确继承过来。 -
元素尺寸控制 标准模式下，非替换的
inline元素无法自定义宽高。而在怪异模式下，给它们设置width和height会生效，这会导致布局逻辑混乱。 -
百分比高度 百分比高度依赖父元素显式声明的高度。标准模式下，若父元素高度未定，百分比高度取决于内容；怪异模式下则能更正确地应用百分比高度。
-
溢出处理 标准模式下
overflow默认为visible，溢出内容可见且不被裁剪。怪异模式下，溢出被视为扩展 box，元素框会自动调整以包含所有内容。
建议
为了避免上述兼容性问题，强烈建议在 HTML 文档第一行声明完整的 Doctype，例如 <!DOCTYPE html>。这能确保现代浏览器统一进入标准模式，让布局行为符合预期。
