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

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

創(chuàng)新互聯(lián)建站自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元景縣做網(wǎng)站,已為上家服務(wù),為景縣各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

怪異模式盒模型

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

先不考慮css3的情況，盒模型一共有兩種模式，一種是標(biāo)準(zhǔn)模式，另一種就是怪異模式。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML>

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

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

.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}

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

在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內(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。

當(dāng)設(shè)置為box-sizing:content-box時，將采用標(biāo)準(zhǔn)模式解析計算，也是默認模式；

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

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

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

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

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

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

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

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

（1）用于HTML4.01的嚴(yán)格型：strict

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

（3）用于XHTML1.0的嚴(yán)格型

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

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

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

文章標(biāo)題：如何理解CSS編程中的怪異模式
網(wǎng)站URL：http://jinyejixie.com/article20/peoejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、App開發(fā)、域名注冊、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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