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

浅浅的花香味﹌ 2021-06-26 16:06 530阅读 0赞

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

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

## 浏览器怎么确定要使用哪种模式? ##

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

<!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`都包含进去,如下图所示:  
![在这里插入图片描述][20190721124314294.png]  
即:

width = border left + padding left + content width + padding right + border right
    
    height = border top + padding top + content height + padding bottom + border bottom

而在标准模式下,给盒子模型设置的宽度和高度就是`content`的高度和宽度,如下图:  
![在这里插入图片描述][20190721124435737.png]  
即:

width=content width
    
    height=content height

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

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

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

*  在标准模式下如下图:  
    ![在这里插入图片描述][20190721125552490.png]  
    在这里其实盒子的总宽度为`200 + 50 * 2 + 20 * 2= 340px`
 *  在怪异模式下如下图:  
    ![在这里插入图片描述][20190721125725622.png]  
    而在怪异模式下,整个盒子只有`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`等.用一幅图来解释:  
![在这里插入图片描述][20190721130322231.png]  
在标准模式下,`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;
    }

在标准模式下,图片底部可以看到有几像素的白条:  
![在这里插入图片描述][20190721130550817.png]  
而在怪异模式下,图片底部没有留白:  
![在这里插入图片描述][20190721130557180.png]

> 现在你知道为什么有时候图片处理总是很难看了吧?因为浏览器工作在标准模式,只要把图片的`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`元素的宽高由它的内容决定.  
![在这里插入图片描述][20190721133136100.png]  
而在`ie`的开发者工具中把模式调到`ie5`,可以看到`span`标签是有宽高的:  
![在这里插入图片描述][20190721133204496.png]  
虽然`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;
    }

可以看到在标准模式和怪异模式下渲染的差别:

标准模式:  
![在这里插入图片描述][2019072113413282.png]  
怪异模式:  
![在这里插入图片描述][20190721134204254.png]

## 总结 ##

对于标准模式和怪异模式渲染的差别,主要是浏览器发展的历史以及各家标准的差异决定的,而现如今`Web`前端开发越来越趋向于标准化,工程化,所以我们应该尽量避免在实际开发中使用怪异模式来渲染页面.这样不仅有利于项目的维护,也会在渲染时减少很多不必要的冲突和怪异现象. 知道这些差异对一个专业的`web`前端工程师来说是必须的,在遇到上述问题的时候,需要能够辨识出浏览器是工作在标准模式下还是怪异模式下,这对我们解决`bug`是很有帮助的.

--------------------

# 浏览器标准模式和怪异模式 #

**什么是标准模式和怪异模式？**

在实现`html`和`css`标准化之前，各个浏览器对html和css的解析各有不同，甚至是同一个浏览器的不同版本渲染方式也不同（比如IE6和IE7）。在`W3C`制定标准之后，浏览器既要按照标准去实现`HTML`和`CSS`的支持，又要保证能够兼容以前的非标准的旧网页，于是就有了现在所说的标准模式（严格模式）和兼容模式（怪异模式）。

**浏览器如何确定渲染模式呢？**

在编写HTML文档时，一般都会在文档的开头，html标签之前声明文档类型：`DOCTYPE`，当浏览器在解析html文档时，若遇到正确的文档声明，则启用标准模式，按照标准来解析和渲染文档。而对于旧的html文档，或没有`DOCTYPE`声明的文档，则按照怪异模式来解析文档。html5的文档声明方式：`<!DOCTYPE HTML>` 。

**标准模式和怪异模式的区别？**

1、`width`不同

在标准模式中：`width`是内容（`content`）宽度，元素真正的宽度是外边距、内边距、边框宽度的和，即`元素宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right`。

在怪异模式中：`width`则是元素的实际宽度，`width = border-left-width + padding-left+ 内容(content)宽度 + padding-right + border-right-width`。

2、内联元素的尺寸

标准模式中，给`span`等行内元素设置`width`和`height`都不会生效，而在怪异模式下，却会生效。

3、可设置百分比的高度

在标准模式下，一个元素的高度由其包含的内容content决定，如果父元素没有设置高度，子元素设置一个百分比高度是无效的。

4、用`margin : 0 auto`设置水平居中

在标准模式下可以使元素水平居中，但是在怪异模式下，无效，可以用`text-align : center;`来实现居中。

5、怪异模式下设置图片的`padding`会失效

6、怪异模式下`table`中的字体属性不能继承上层的设置

7、元素溢出的处理

标准模式下，`overflow`默认去`visible`，在怪异模式下，溢出会被当做扩展`box`来对待，溢出不会裁减，元素框自动调整大小，能够包含溢出内容。

[20190721124314294.png]: /images/20210626/a22849aa891b4d46b32d379673cd5b01.png
[20190721124435737.png]: /images/20210626/1769e94d7d2b485bae16cd9aa5832951.png
[20190721125552490.png]: /images/20210626/fda39fb01c08439e9c0e534c5a8f62fa.png
[20190721125725622.png]: /images/20210626/c4e5771a16894f57a6991b7462aafc8d.png
[20190721130322231.png]: /images/20210626/4a3668b4127548849b97d0430188f9e7.png
[20190721130550817.png]: /images/20210626/0a29a921a93d4207ae17988b8bfe0c9d.png
[20190721130557180.png]: /images/20210626/7b303f50629b439dbb6fd4177541ec0e.png
[20190721133136100.png]: /images/20210626/18a5185e54a94309927bfa1ac7248359.png
[20190721133204496.png]: /images/20210626/87bceb08a0654b24879a3322329b2ffd.png
[2019072113413282.png]: /images/20210626/b93cb76a8a2f45bb90b64ad6f18c14a5.png
[20190721134204254.png]: /images/20210626/eaf2143ce02c49f6b524a88be0d5cc55.png