前言
怪异模式是浏览器中的一种渲染模式，也称为混杂模式。在怪异模式下，浏览器会按照一些旧式浏览器的行为来解析HTML和CSS，这可能会导致一些不同于标准模式下的布局和渲染结果。
怪异模式主要是为了向后兼容旧有的网站而设计的。由于早期的网站开发者没有按照标准编写网页，这就导致了很多网页在标准模式下无法正确显示。因此，怪异模式的作用是让这些旧有的网站能够继续在现代浏览器中显示正常。
现在，怪异模式通常只在旧有的网站中才会用到。例如，一些仍然在使用过时的HTML和CSS语法的网页，或是一些没有经过更新的网站。但是，对于新的网站开发来说，应该始终使用标准模式，因为这样能够保证网页在各种浏览器中的正确性和一致性。
留下一个问题：怪异模式下 宽高都为100px，padding为50px的盒子显示的宽高为多少
判断当前的模式
利用 document.compatMode 就可以知道当前的模式。
BackCompat就是怪异模式，CSS1Compat就是标准模式
标准模式与怪异模式区别
- 盒模型
在怪异模式下，浏览器使用传统盒模型，即将 padding 和 border 累加到盒子的宽度和高度上，而非 W3C 标准盒模型，会影响盒子的总宽度、高度及内部元素的位置。
- 图片的垂直对齐方式
在标准模式下，图片默认是基线对齐的，也就是图片底部与文本基线对齐。可以通过设置vertical-align属性，将图片与其容器的顶部、底部、中线等对齐。
在怪异模式下，图片的默认对齐方式会因浏览器而异。一般而言，Firefox浏览器的默认对齐方式是底部对齐，而其他浏览器（如Chrome和Safari等）的默认对齐方式是顶部对齐。
- 元素的溢出处理
在标准模式下，当一个元素的内容超出了其容器的范围时，浏览器会默认将其溢出的部分裁剪掉，并显示滚动条让用户可以进行滚动查看。此外，还可以通过设置overflow属性，实现自定义的溢出处理方式（如隐藏、滚动等）。
在怪异模式下，则由各个浏览器自己定义其溢出处理方式。某些旧版浏览器可能会自动扩大容器大小，以适应内容的大小，从而导致布局出现错误。
怪异模式还有一些其他的区别，这里就不在做过多介绍
总结
到这就能够回答上面那个题目，怪异模式下的盒模型的box-sizing默认的取值是content-box。所以怪异模式下 宽高都为100px，padding为50px的盒子显示的宽高为100px
