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

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

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

怪異模式盒模型

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

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

當(dāng)你用編輯器新建一個(gè)html頁(yè)面的時(shí)候你一定會(huì)發(fā)現(xiàn)最頂上都會(huì)有一個(gè)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)的文檔類型，無(wú)論使用哪種模式完整定義DOCTYPE，都會(huì)觸發(fā)標(biāo)準(zhǔn)模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會(huì)觸發(fā)怪異模式（quirks 模式）。

首先定義一個(gè)div塊用來(lái)演示標(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)該對(duì)盒模型的兩種模式有了清晰的認(rèn)識(shí)，下面在此基礎(chǔ)上介紹一下css3屬性box-sizing;

box-sizing有兩個(gè)值一個(gè)是content-box，另一個(gè)是border-box。

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

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

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

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

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

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

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

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

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

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

（2）用于HTML4.01的過(guò)渡型:Transitional

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

（4）用于XHTML1.0的過(guò)渡型

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

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

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

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

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

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

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

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