“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）

在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。下面介绍标准模式和怪异模式之间的区别

（1 ）盒模型：

在怪异模式下，盒模型为IE盒模型，

而在W3C标准的盒模型中为

（2）图片元素的垂直对齐方式：

对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。

（3）<table>元素中的字体：

CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

（4）内联元素的尺寸：

标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。

（5）元素的百分比高度：

a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。

（6）元素溢出的处理：

标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）

“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）相关推荐

“约见”面试官系列之常见面试题之第五十六篇之typeof返回的数据类型（建议收藏）
typeof 共返回6种数据格式: 1.object 2.undefined 3.string 4.number 5.boolean 6.function 特别注意Array和null返回的都是obj ...
“约见”面试官系列之常见面试题之第四十六篇web标准理解和认识（建议收藏）
web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...
“约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用（建议收藏）
那么vue 生命周期有哪些阶段呢一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
“约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级（建议收藏）
永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users" ...
“约见”面试官系列之常见面试题之第六十四篇之call和apply区别（建议收藏）
call和apply用来调用函数,并用指定对象(第一个参数)替换函数的 this 值,同时用指定数组替换函数的参数.注:也可以不指定参数,此时只是单纯的调用函数,如:fun.call() 语法: fu ...
“约见”面试官系列之常见面试题之第四十九篇之ie6bug的解决办法（建议收藏）
IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!! 解决方法:_displ ...
“约见”面试官系列之常见面试题之第八十二篇之MVC（建议收藏）
MVC设计模式 MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller) ...
“约见”面试官系列之常见面试题之第七十二篇之arrayList（建议收藏）
简介 ArrayList 是 java 集合框架中比较常用的数据结构了.继承自 AbstractList,实现了 List 接口.底层基于数组实现容量大小动态变化.允许 null 的存在.同时还实现了 ...
“约见”面试官系列之常见面试题之第六十二篇之IE和兼容下写法（建议收藏）
1)获取事件对象:var ev = ev || window.event 2)获取页面的可视区的宽度:document.documentElement.clientWidth || document. ...

“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）

“约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式（建议收藏）相关推荐

最新文章

热门文章