標準模式與怪異模式對於渲染頁面的影響

時間 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是頗有幫助的.

前端小白,熱愛前端.

發展前端,從我作起.

正在找工做,若是以爲我符合您的標準,歡迎聯繫.