网站开发PHP留言本,快代理,如何注册腾讯企业邮箱,直播网站建设1个节点多少钱文章目录css怪异模式#xff08;Quirks Mode#xff09;和标准模式#xff08;Standards Mode#xff09;最明显的区别详细对比示例对比#xff08;盒模型#xff09;标准模式#xff08;Standards Mode#xff09;怪异模式#xff08;Quirks Mode#xff09;如何触发…
文章目录css怪异模式Quirks Mode和标准模式Standards Mode最明显的区别详细对比示例对比盒模型标准模式Standards Mode怪异模式Quirks Mode如何触发两种模式其他区别为什么需要了解这个区别css怪异模式Quirks Mode和标准模式Standards Mode最明显的区别
最核心的区别 盒模型Box Model的计算方式不同导致元素的 width 和 height 是否包含 padding 和 border。 详细对比
特性标准模式Standards Mode怪异模式Quirks Mode盒模型width 内容宽度不包含 padding 和 borderwidth 内容 padding border触发方式!DOCTYPE html 声明无 DOCTYPE 或使用旧版 DOCTYPE如 HTML4 Transitional浏览器兼容性所有现代浏览器统一行为模拟旧版浏览器如 IE5.5的渲染方式height: 100% 行为严格计算需父元素有明确高度可能不准确导致布局错乱margin: auto 居中正常生效可能失效示例对比盒模型
标准模式Standards Mode
.box {width: 100px;padding: 20px;border: 5px solid black;
}实际宽度 100px仅内容总占用宽度 100px 40px (padding) 10px (border) 150px
怪异模式Quirks Mode
.box {width: 100px;padding: 20px;border: 5px solid black;
}实际宽度 100px包含 padding 和 border内容宽度 100px - 40px (padding) - 10px (border) 50px 如何触发两种模式
标准模式使用 !DOCTYPE htmlHTML5 声明。怪异模式省略 DOCTYPE 或使用旧版 DOCTYPE如 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN。 其他区别 行内元素垂直对齐 标准模式vertical-align 按规范生效。怪异模式行为可能不一致如 img 底部默认间隙问题。 表格单元格宽度 标准模式严格按内容计算。怪异模式可能自动拉伸。 JavaScript 获取窗口尺寸 标准模式document.documentElement.clientWidth。怪异模式document.body.clientWidth。 为什么需要了解这个区别
避免布局错乱确保 DOCTYPE 正确声明避免意外进入怪异模式。兼容旧代码维护老项目时可能需要处理怪异模式下的样式问题。面试常考点前端基础核心知识之一。
总结盒模型的计算方式是两者最明显的区别始终使用 !DOCTYPE html 可强制浏览器使用标准模式
