溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何理解CSS編程中的怪異模式

發(fā)布時間：2021-09-17 16:46:01 來源：億速云 閱讀：147 作者：柒染 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)如何理解CSS編程中的怪異模式，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

怪異模式盒模型

今天學習了一下css3的box-sizing屬性，順便又溫習了一下css的盒模型，最后覺得有必要對盒模型做一個全面整理。

先不考慮css3的情況，盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。

當你用編輯器新建一個html頁面的時候你一定會發(fā)現(xiàn)最頂上都會有一個DOCTYPE標簽，例如：

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

  2.   

  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

  4.   

  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  6.   

  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

  8.   

  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  

  10.   

  11. <!DOCTYPE HTML>  

以上幾種DOCTYPE都是標準的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會觸發(fā)標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發(fā)怪異模式（quirks 模式）。

首先定義一個div塊用來演示標準模式和怪異模式的區(qū)別，以下是Css樣式

  1. .box {   

  2.     width: 200px;   

  3.     height: 200px;   

  4.     border: 20px solid black;   

  5.     padding: 50px;   

  6.     margin: 50px;   

  7. }  


在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
如何理解CSS編程中的怪異模式
標準模式盒模型

在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內(nèi)邊距padding和邊框border寬度在內(nèi)的，盒子總寬度/高度=width/height + margin = 內(nèi)容區(qū)寬度/高度 + padding + border + margin;
如何理解CSS編程中的怪異模式
怪異模式盒模型

看到這里你應(yīng)該對盒模型的兩種模式有了清晰的認識，下面在此基礎(chǔ)上介紹一下css3屬性box-sizing;

box-sizing有兩個值一個是content-box，另一個是border-box。

當設(shè)置為box-sizing:content-box時，將采用標準模式解析計算，也是默認模式；

當設(shè)置為box-sizing:border-box時，將采用怪異模式解析計算；

目前使用此屬性需要前綴如下:

  1. -webkit-box-sizing: content-box;   

  2. -moz-box-sizing: content-box;  

CSS怪異模式和文檔類型定義DTD

在標準模式中，瀏覽器根據(jù)規(guī)范表現(xiàn)頁面；而怪異模式通常模擬老式瀏覽器（比如Microsoft IE4　和Netscape Navigator4）的行為以防止老站點無法工作．這兩種模式的差異較大，比較典型的就是IE對盒模型的解析：在標準模式中，網(wǎng)頁元素的寬度是由padding/border/width三者的寬度相加決定的；而在怪異模式中，widht本身就包括了padding和border的寬度．此外，標準模式下塊級元素的經(jīng)典的居中方法－－設(shè)定width，然后margin-right:auto，margin-left:auto;　在怪異模式下也無法正常工作．

同樣的代碼，為了確保向后兼容，瀏覽器廠商發(fā)明了標準模式和怪異模式這兩種方法來解析網(wǎng)頁．在怪異模式和標準模式下的表現(xiàn)很可能相差甚遠．因為發(fā)明怪異模式的目的就是為了兼容老式瀏覽器下的代碼，它的很多解析方式是不符合標準的．所以，一般情況下，我們應(yīng)該避免觸發(fā)怪異模式，應(yīng)選用標準模式．

怪異模式是如何被觸發(fā)的呢？與DTD有關(guān)．DTD全稱Document Type Definition，即文檔類型定義．DTD是一種保證HTML文檔格式正確的有效方法，可以通過比較HTML文檔和DTD文件來看文檔是否符合規(guī)范，以及元素和標簽使用是否正確．一個DTD文檔包含元素的定義規(guī)則、元素間關(guān)系的定義規(guī)則、元素可使用的屬性、可作用的實體或符號規(guī)則．

在網(wǎng)頁中最常用的DTD類型包括4種：

（1）用于HTML4.01的嚴格型：strict

（2）用于HTML4.01的過渡型:Transitional

（3）用于XHTML1.0的嚴格型

（4）用于XHTML1.0的過渡型

按照W3C的標準，我們需要在HTML的最開始聲明文件的DTD類型．如果漏寫DTD聲明，F(xiàn)irefox仍然會按照標準模式來解析網(wǎng)頁，但在IE中（包括IE6/7/8）就會觸發(fā)怪異模式．為了避免怪異模式給我們帶來不必要的麻煩，我們要養(yǎng)成書寫DTD聲明的好習慣。

看完上述內(nèi)容，你們對如何理解CSS編程中的怪異模式有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手