标准模式与怪异模式对于渲染页面的影响

时间 2019-11-07

标签标准模式怪异对于渲染页面影响繁體版

原文原文链接

什么是标准模式和怪异模式?

在好久好久之前,那时候HTML和CSS尚未一个统一的标准,出现的现象就是,我用个人标准,你用你的标准,这致使了各家浏览器对于解析HTML和CSS的方式有很大的差异,而当标准制定出来以后,浏览器不只要按照新的标准去支持HTML和CSS,还要对老旧的网页进行兼容,而这一前一后的两种支持方式,就是咱们所称的标准模式(StandardMode,)和怪异模式(QuirksMode),对于现代规范的网页,浏览器通常用标准模式去解析和渲染,而对于古老的网页,浏览器就会使用怪异模式去渲染.而在ie的开发者工具中,你能够自定义改变文档模式,这在其余浏览器中是不行的.css

浏览器怎么肯定要使用哪一种模式?

这里就会涉及到一段很是容易被人忽略的代码,那就是HTML文档第一行就会出现的文档类型声明:DOCTYPE.你必定见过这两种声明方式:html

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
复制代码

第一种声明方式说明这个页面遵照了HTML5规范的,浏览器会自动选择标准模式.
在浏览器遇到第二种声明方式时也会自动选择标准模式,说明这个页面遵照了HTML4规范,和第一种声明方式会有一点区别,可是几乎能够认为是同样的.
而当你没有或者忘记对文档类型进行声明的时候,浏览器就会选择怪异模式,咱们应该避免选择这种模式,由于这种模式下浏览器对文档的解析和渲染和现代标准都有着很大的不一样,这是一种很是危险的方式.

开发者还能够在< head >标签中加入x-ua-compatible信息来影响文档类型的断定,这里就不作过多的介绍了,有兴趣的同窗能够自行搜索.前端

标准模式和怪异模式下页面渲染的区别

块级元素(盒子模型)

标准模式和怪异模式下对于盒子模型的渲染效果差异是很大的. 在怪异模式下,给盒子模型设置的宽度width和高度height会将元素的content,padding,border都包含进去,以下图所示: web

即:浏览器

width = border left + padding left + content width + padding right + border rightbash

height = border top + padding top + content height + padding bottom + border bottom前端工程师

而在标准模式下,给盒子模型设置的宽度和高度就是content的高度和宽度,以下图: 工具

即:

width=content widthui

height=content heightspa

这一个区别会致使渲染块级元素的时候会出现很大的差异,因此两种模式下渲染出来的页面差异也会很大.

示例: 咱们定义一个div元素,分别设定宽高均为200px,padding为50px,border为20px红色. 代码以下:

div.a{
  width: 200px;
  height: 200px;
  padding: 50px;
  border: 20px solid red;
}
复制代码

在标准模式下以下图:

在这里其实盒子的总宽度为200 + 50 * 2 + 20 * 2= 340px
在怪异模式下以下图:

而在怪异模式下,整个盒子只有200px宽,而内容区域被压缩到了200 - 50 * 2 - 20 * 2 = 60px
而咱们也能够经过box-sizing属性手动的选择width和height包含的范围,具体的参数及含义以下

box-sizing:border-box //像怪异模式那样,元素的border和padding被包含在给元素设置的width和height中
box-sizing:content-box //默认值.给元素设置的width和height属性只表示content区域,而在width和height以外绘制padding和border
box-sizing:inherit //继承父元素的box-sizing设置
复制代码

如今你必定明白了为何有的时候元素的大小超出咱们的预期,只要加一个box-sizing:border-box,就可以正常显示了吧.

图片的对其方式

CSS中的vertical-aligh属性用于设置对象的初值对其方式,定义了行内元素的baseline要和所在行的baseline初值对齐,而在表格元素中,能够设置单元格里面的内容的对其方式,取值有baseline,bottom,top,middle等.用一幅图来解释:

在标准模式下,inline元素和tablecell元素的verticle-aligh属性默认取值是baseline,这也是咱们有时会看到图片底部会有几像素留白的缘由. 可是当inline元素内只有图,而且处于怪异模式的时候,inline元素里的元素的vertical-aligh属性默认值是bottom,此时就不会有白条的效果.

示例: 定义一个表格,表格中只有一行,一列,进行演示,代码以下:

td.a {
  border:2px solid blue;
}

img.b {
  width:200px;
  height:200px;
  border:2px solid orange;
}
复制代码

在标准模式下,图片底部能够看到有几像素的白条:

而在怪异模式下,图片底部没有留白:

如今你知道为何有时候图片处理老是很难看了吧?由于浏览器工做在标准模式,只要把图片的vertical-align属性修改成bottom就解决啦!

行内元素的尺寸

行内元素分为replaced和non-replaced两类,而像input,textarea,img等能够设置宽高的行内元素,成为replaced元素,而那些不能设置宽高的元素被称为non-replaced元素,例如span. 而这些都是在标准模式的前提下,在怪异模式下,即便是non-replaced元素也能够被设置元素的宽高. 示例: 定义一个div,宽高均为200px,背景颜色为红色,div内部有一个span标签,给span标签设置宽高均为100px,背景颜色为蓝色.代码以下:

div.a{
  width: 200px;
  height: 200px;
  background-color: red;
}
span.b{
  width: 100px;
  height: 100px;
  background-color: blue;
}
复制代码

在标准模式下,能够看到span元素是看不到的,这是由于non-replaced元素的宽高由它的内容决定.

而在ie的开发者工具中把模式调到ie5,能够看到span标签是有宽高的:

虽然ie5如今已经几乎不存在了,可是了解这些能够帮助咱们更深刻的研究浏览器的渲染规则.

内部元素溢出处理

在实际的开发中,咱们常常会遇到元素内部的内容溢出,而CSS的overflow属性能够处理溢出的状况,默认是visible,即显示溢出. 若是一个元素内部的内容出现了溢出,而且咱们没有设置overflow属性,即默认vislble时:

在标准模式下,溢出的部分会超出盒子自己,在盒子外部继续显示.
而在怪异模式下,溢出的部分会扩展盒子自己,即外部盒子的大小不必定由css样式决定,会根据内部内容的大小自动调整.

示例: 定义一个div,类名为a,宽高均为200px,背景颜色为红色,div内部还有一个div标签,类名为b,给内部的div标签设置宽为100px,高为300px,背景颜色为蓝色.代码以下:

div.a{
  width: 200px;
  height: 200px;
  background-color: red;
}
div.b{
  width: 100px;
  height: 300px;
  background-color: blue;
}
复制代码

能够看到在标准模式和怪异模式下渲染的差异:

标准模式:

怪异模式:

总结

对于标准模式和怪异模式渲染的差异,主要是浏览器发展的历史以及各家标准的差别决定的,而现现在Web前端开发愈来愈趋向于标准化,工程化,因此咱们应该尽可能避免在实际开发中使用怪异模式来渲染页面.这样不只有利于项目的维护,也会在渲染时减小不少没必要要的冲突和怪异现象. 知道这些差别对一个专业的web前端工程师来讲是必须的,在遇到上述问题的时候,须要可以辨识出浏览器是工做在标准模式下仍是怪异模式下,这对咱们解决bug是颇有帮助的.

前端小白,热爱前端.

发展前端,从我作起.

正在找工做,若是以为我符合您的标准,欢迎联系.