文檔模式及盒子模型

css盒模型由兩個盒子組成，外在的控制是否換行的盒子，以及内在的控制元素内容的盒子。比如：display: inline-block, 則它的外在的盒子就是inline也就是不占據一行，而block則表示内部的元素具有塊狀特性。是以，display: inline其實就是display: inline-inline的縮寫，display: block就是display: block-block的縮寫。

每一個内在的盒子有: width/height, padding, border, margin這幾個控制盒子大小的屬性。其中 width/height控制元素内容大小，padding則控制元素内容到border線内側距離，border則是元素外圍邊框大小，而margin則是控制與其他元素的間距，它的背景透明。

對于早期，計算一個元素的占據大小，需要通過width +2* padding + 2*border來計算，css3中提出了box-sizing：border-box，通過這樣設定，就可以使元素最終的寬高就是設定的width/height, 浏覽器會根據width/height, padding, border的大小來自動調整内部元素的大小。

3.js如何設定擷取盒子模型對應的寬和高

dom.style.width:

隻能擷取内聯樣式，是以是不準确的

dom.currentStyle.width :

與window.getComputedStyle方法功能相同，實作在舊版本的IE浏覽器中

3）window.getComputedStyle(dom).width:

方法傳回一個對象，該對象在應用活動樣式表并解析這些值可能包含的任何基本計算後報告元素的所有CSS屬性值。是以輸出是準确的

4）dom.getBoundingClientRect().width

傳回一個DOMRect對象，這個對象是由該元素的getClientRects()方法傳回的一組矩形的集合。

DOMRect對象包含了一組用于描述邊框的隻讀屬性–left,top,right,bottom,機關為像素。除了width和height外的屬性都是相對于視口的左上角位置而言的。

CSS 盒模型描述了以文檔樹中的元素而生成的矩形框，并根據排版模式進行布局。每個盒子都有一個内容區域（例如文本，圖像等）以及周圍可選的padding、border和margin區域。

CSS 盒模型負責計算：

塊級元素占用多少空間。

邊框是否重疊，邊距是否合并。

盒子的尺寸。

盒模型有以下規則：

塊級元素的大小由width、height、padding、border和margin決定。

如果沒有指定height，則塊級元素的高度等于其包含子元素的内容高度加上padding（除非有浮動元素，請參閱下文）。

如果沒有指定width，則非浮動塊級元素的寬度等于其父元素的寬度減去父元素的padding。

元素的height是由内容的height來計算的。

元素的width是由内容的width來計算的。

預設情況下，padding和border不是元素width和height的組成部分。

什麼是DOCTYPE？

DOCTYPE是Docment Type的縮寫，即文檔模式。它用來指明文檔（通常是指網頁）所遵循的規範(如xhtml或html)及規範的版本（xhtml1.0或html4.0等）。

html檔案中

<DOCTYPE>

标簽位于文檔最頂部，在

<html>

标簽之前。

一個完整的DTD聲明是由Public Identifier和System Identifier兩部分組成的，其中system identifier就是指URI，例如：

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

Public Identifier：

-//W3C//DTD HTML 4.01 Transitional//EN

system identifier：

http://www.w3.org/TR/html4/loose.dtd

文檔模式分類

文檔模式及盒子模型

現代浏覽器普遍有三種模式: 标準模式(standard mode)、近似标準模式(almost standard mode) 及怪異模式(quirks mode).

怪異模式是為了相容老頁面而設計的：早在浏覽器大戰時期，IE和Netscape各自遵循自己的一套規範，互不相容，而後随着網際網路的迅速發展，W3C制定了html和css規範，之後的浏覽器的實作都遵循這套規範，但因為此時網際網路上已經存在很多針對舊版IE和Netscape設計的網頁，如果依照W3C标準來解析，将會使這些頁面錯亂，是以浏覽器開發商推出了兩種模式：quirks mode 和 stardard mode. 其中quirks mode按照Netspace4和IE5的實作解析頁面，stardard mode按照W3C标準解析頁面。

在Internet Explorer 6、7、8和9中，Quirks模式實際上是當機的IE 5.5，IE10和IE11的主要Quirks模式（類似于其他浏覽器的Quirks模式）不再是IE 5.5的模仿，而是尋求與其他浏覽器的Quirks模式互操作，有時也稱為“互操作的Quirks模式”。

近似标準模式是為了解決table中内聯圖檔而設計的：早期的網頁多是以table布局，單元格的高度會根據内容自動伸縮，是以當一個單元格中隻有圖檔時，即使這個圖檔的高度是1px，浏覽器都可以很好地呈現。但遵循了w3c标準的現代浏覽器并不會這麼去解析，w3c标準将img定義為内聯元素，而内聯元素在盒模型中是以基線對齊的。

為了解決這個問題，浏覽器開發商提供了“近似标準模式”，這種模式與标準模式一緻，除了在處理下面這種情況時：

如果一個塊級元素除了空白文本（空格，tab等字元）外再無其它内容，則它的高度按0處理；如果有子元素，則它的高度不能比子元素大，無論它的font-size多大。

标準模式：遵循标準。

如何觸發各種模式

文檔模式及盒子模型

近似标準模式

HTML 4.01 Transitional or Frameset DOCTYPE(帶URL)

或

XHTML 1.0 Transitional or Frameset DOCTYPE(帶或不帶URL)

都會觸發近似标準模式。

The public identifier "-//W3C//DTD XHTML 1.0 Transitional//EN"
The public identifier "-//W3C//DTD XHTML 1.0 Frameset//EN"
The public identifier "-//W3C//DTD HTML 4.01 Transitional//EN", with a system identifier
The public identifier "-//W3C//DTD HTML 4.01 Frameset//EN", with a system identifier
The IBM system DOCTYPE "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"

标準模式

//包括IE6在内的所有浏覽器都會以标準模式去呈現。這也是mozilla推薦的做法
<!DOCTYPE html>
//完整的HTML4.01 Strict 和 XHTML1.0 Strict(帶或不帶URI) 也會觸發标準模式
<!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果你的XHTML文檔以application/xhtml+xml 作為MIME類型，則你無需再聲明DOCTYPE，浏覽器始終會以标準模式去解析這類文檔。不過一個例外就是IE8及以下版本的IE會将此類文檔當成一個下載下傳連結，并彈出檔案下載下傳彈窗。IE9開始支援這種類型的文檔。但如果你的XHTML文檔以text/html 作為MIME類型，則你需要聲明DOCTYPE以觸發标準模式

怪異模式

不寫Doctype或錯誤的Doctype
Doctype之前有注釋或xml聲明（在IE9-會觸發）
HTML 4.01 Transitional or Frameset DOCTYPE(不帶URL)

标準模式和怪異模式下頁面渲染的差別

盒模型

怪異模式采用IE盒子模型，标準模式使用W3C标準盒子模型。

文檔模式及盒子模型

圖檔元素的垂直對齊方式

對于inline元素和table-cell元素，标準模式下vertical-align屬性預設取值為baseline，在怪異模式下，table單元格中的圖檔的vertical-align屬性預設取值為bottom，是以在圖檔底部會有及像素的空間。

在标準模式下,inline元素和tablecell元素的verticle-aligh屬性預設取值是baseline,這也是我們有時會看到圖檔底部會有幾像素留白的原因.

但是當inline元素内隻有圖,并且處于怪異模式的時候,inline元素裡的元素的vertical-aligh屬性預設值是bottom,此時就不會有白條的效果.

table元素中的字型

标準模式：對于font的屬性都是可以繼承的

怪異模式：對于table元素，字型的某些屬性将不會從body等其他封裝元素中繼承得到，特别是font-size屬性。

内聯元素的尺寸

行内元素分為replaced和non-replaced兩類,而像input,textarea,img等可以設定寬高的行内元素,成為replaced元素,而那些不能設定寬高的元素被稱為non-replaced元素,例如span。

标準模式：non-replaced inline元素無法自定義大小

怪異模式：定義這些元素的width，height屬性可以影響這些元素顯示的尺寸。

元素的百分比高度

CSS中對于元素的百分比高度規定如下：百分比為元素包含塊的高度，不可為負值，如果包含塊的高度沒有顯示給出，該值等同于auto，是以百分比的高度必須在父元素有高度聲明的情況下使用。

當一個元素使用百分比高度時，

标準模式：高度取決于内容變化，

怪異模式：百分比高度被正确應用。

元素溢出的處理

如果一個元素内部的内容出現了溢出,并且我們沒有設定overflow屬性,即預設vislble時:

标準模式：溢出的部分會超出盒子本身,在盒子外部繼續顯示.

怪異模式：溢出的部分會擴充盒子本身,即外部盒子的大小不一定由css樣式決定,會根據内部内容的大小自動調整.

呈現方面的其他差異比較小，而且是與特定浏覽器相關的，包括對于十六進制顔色值不需要#号、假設CSS中沒有指定機關的長度的機關是像素，以及在使用關鍵字時将字号增加一級。

怎麼知道浏覽器用的是哪種模式

在FF，右鍵–>檢視頁面資訊—>呈現模式（Render Mode）

在IE，F12—>文檔模式

參考連結

浏覽器标準模式和怪異模式之間的差別是什麼
深入了解DOCTYPE之 DOCTYPE的标準模式、近似标準模式及怪異模式

一、前言

從 IE8 開始引入了文檔相容模式的概念，作為開發人員的我們可以在開發人員工具中通過“浏覽器模式”和“文檔模式”（IE11 開始改為“浏覽器模式”改成更貼切的“使用者代理字元串”）品味一番，它的出現極大地友善了苦逼的前端攻城獅們适配各版本的 IE，但 jser 們也不能完全信任它，因為它隻是提供盡可能的文檔模式模拟而已。

注意：本文内容僅針對 HTTP 頭 Content-Type 字段為 text/html 的 html 文檔作說明，而 XML 文檔不在本文的讨論範圍之内。

二、什麼是浏覽器模式？

“浏覽器模式（IE11 索性就改名為“使用者代理字元串”）用來設定 navigator.userAgent 和 navigator.appVersion 的值。

它唯一需要注意的是，在不同的 IE 版本中，它與文檔模式的關系可不相同。

IE89 中，倘若浏覽器模式被設定為 Internet Explorer7，那麼文檔模式的隻能設定為 7,6,5；

IE11 中，使用者代理字元串設定和文檔模式可謂是沒有半毛錢關系。

三、什麼是文檔模式？

對于以 Webkit、Molliza 等作為核心的浏覽器來說，DOM 樹的解析、渲染，JS 的 API 等主要與核心版本挂鈎；而對于 IE 浏覽器而言，這些從 IE6 開始就跟文檔模式挂鈎了。

3.1. 從“久遠”的 IE5.5 說起

現在雖然沒什麼用使用 IE5.5 了，但它卻從未離開過我們，因為 IE5.5 一直以怪異模式（Quirks，IE5 的文檔模式）的形式存活在我們的身邊。不過在那個隻有 IE5.5 的年代，并沒有 Quirks 這一說法，隻是後來 IE6 面世後逐漸向 W3C 标準靠攏，而 IE5.5 下 DOM 樹的解析、渲染等都與 W3C 标準有很大差别，于是命其名為 Quirks。

3.2. 相容模式——IE6 的新發明

由于 IE6 和 IE5.5 下 DOM 樹的解析等都有很大差異，導緻那些适配 IE5.5 的老網站無法在 IE6 上正常顯示，于是出現了一個新功能——“相容模式”，用于解決老網站的顯示問題。IE6 的相容模式就兩種，怪異模式（Quirks）和 IE6 标準模式。（IE7 也隻有怪異模式和 IE7 标準模式）

IE6 預設使用怪異模式（Quirks），僅當以<!DOCTYPE>作為文檔第一行聲明文檔類型時，才采用 IE6 的标準模式，即使 IE 無法識别所聲明的文檔類型。（IE7 也是這樣）

注意：這時的相容模式主要是解決顯示問題，要知道那時的 JS 隻是小配角而已。

3.3. 文檔相容性模式——IE8 的新寵

“文檔相容性模式”是對“相容模式”的擴充，就 IE8 而言，除了提供怪異模式（Quirks）和 IE8 标準模式外，還提供了 IE7 标準模式、模拟 IE7 模式，而且設定的方式也豐富得多。

四、文檔模式的種類

1. 怪異模式

IE6789 的是 IE5.5 的文檔模式，IE10+和 Chrome 等浏覽器是 W3C 規範的怪異模式。

2. 标準模式（非怪異模式）

W3C 标準的文檔模式，但各浏覽器的實作階段不盡相同。

3. 準标準模式（有限怪異模式）

由于該模式離 W3C 标準仍然有一段距離，是以被稱作準标準模式（或有限怪異模式）。IE6、7 的标準模式實際上就是準标準模式，而 IE8+才有實質上的标準模式。

五、IE8+設定文檔模式的方式

開發者常用的方式：

1. 開發者工具中的“文檔模式”；

2. 通過在 head 标簽内加入如的中繼資料标簽（該例子将文檔模式設定為 IE7 标準模式）；

3. 通過<!DOCTYPE>的增删，在标準模式和怪異模式（Quirks）間切換；

4. 通過 Web 伺服器配置(讓 http response header 帶上 X-UA-Compatible: IE=edge)

IIS 的 web.config 配置資訊：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

使用者常用的方式：

1. 點選位址欄的相容性視圖切換按鈕（僅當 HTTP、HTTPS 協定時才出現該按鈕）；

2. 若網頁是在 Intranet 區域中加載，配置使用相容性視圖顯示 Intranet 區域中的網頁；

3. 配置浏覽器使用相容視圖浏覽所有網頁；

4. 将網站加入到相容性視圖名單中；

5. 内網管理者将該網站加入到相容性視圖浏覽名單中；

微軟的方式：

1. IE 會定期向微軟官網拉資料，假如某網站被列入微軟的相容性視圖浏覽名單中，那麼就會 IE 就會以相容性視圖模式來處理該網站。

由于

<meta http-equiv="X-UA-Compatible" content="IE=edge">

不一定很生效，因為當端口不是 80 時，IE 預設設定是将其視為内網應用(intranet site)，并采用相容模式來顯示(display intranet site in compatibility view)。是以最好采用 HTTP Response Header 的方式。

六、文檔模式的決定方式

所有 IE 浏覽器在預設情況下（

<meta http-equiv="X-UA-Compatible">

與

<!DOCTYPE>

均沒有），是采用怪異模式（Quirks）；當有<!DOCTYPE>時，均采用浏覽器版本對應的标準模式（如 IE8 就采用 IE8 标準模式，IE11 就采用 IE11 标準模式）。

現在要注意的是，當出現

<meta http-equiv="X-UA-Compatible">

時，文檔模式将會如何呢？我們首先了解一下 IE11 下它的 content 屬性值範圍吧，具體範圍如下：

IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

1. IE=5：表示采用怪異模式；

2. IE=7 等純數字的值：表示采用對應 IE 版本的标準模式，即使不是以<!DOCTYPE>作為文檔第一行，文檔模式依舊使用标準模式；

3. IE=EmulateIE7 等含 EmulateIE 字元串的值：表示采用模拟對應 IE 版本的模式，就是以<!DOCTYPE>作為文檔第一行則采用标準模式，否則采用怪異模式。

4. IE=Edge：表示采用浏覽器自身版本的文檔模式，如 IE11，以

<!DOCTYPE html>

作為文檔第一行則采用 IE11 标準模式，否則采用怪異模式。

注意：

由于 document compatibility mode 僅在 IE8/9/10 生效，是以在 IE11 時設定

<meta http-equiv="X-UA-Compatible">

是無效的，隻有在開發工具中設定才有效果。

若要在 IE11 下采用舊版本的文檔模式，則要采用 Enterprise Mode(https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/)

10 及以上的文檔模式，若文檔第一行不是有效的<!DOCTYPE>，則 document.compatMode 傳回 BackCompat，但 document.documentMode 卻傳回正确的文檔模式；
9 及以下的文檔模式，隻要文檔第一行出現<!DOCTYPE>，不管是否有效，document.compatMode 均傳回 CSS1Compat。當文檔第一行沒有<!DOCTYPE>且沒有指定标準模式時，document.compatMode 才傳回 BackCompat，且 document.documentMode 必定傳回 5。

七、注意

6.1. 多個标簽時隻認第一個

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7">
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    </head>
    <body></body>
    <script type="text/javascript"> console.log(document.documentMode); // 輸出 7
    </script>
</html>

6.2. 無效 content 值，就設定為最接近的文檔模式

IE=a：文檔模式為 5

IE=7.5：文檔模式 7

6.4. 一個标簽設定多個文檔模式，浏覽器會自動選擇可用的最高的文檔模式

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9;IE=8">
    </head>
    <body></body>
    <script type="text/javascript"> console.log(document.documentMode); // IE11中，輸出 9
    </script>
</html>

八、不一樣的标準模式

雖然說 IE6、7、8、9、10、11 均有标準模式，但由于 W3C 标準規範内容随時間的增改，而且浏覽器對标準的實作是階段性的，是以個版本的标準模式不盡相同。

九、不一樣的怪異模式

IE6789 的怪異模式其實就是 IE5.5 的文檔模式，但從 IE10 開始它的遵守了 W3C 規範的怪異模式。是以大家不要被名字而蒙騙咯！

舉個栗子：

<html>
  <head>
     <style type="text/css"> #target{
           width: 100px;
           height: 20px;
           border: solid 1px red;
           margin: 0 auto;
       }
     </style>
  </head>
  <body>
       <div id="target"><div>
  </body>
</html>

上面的代碼在是運作在怪異模式下，在 IE6789 下若要 div#target 自動水準居中，必須加上轉成用标準模式渲染才行。但在 IE10+、Webkit 和 Molliza 中即使在怪異模式下 div#target 也會自動水準居中。

十、文檔模式影響到哪些方面

布局

　　表格、單元格的樣式等都受到文檔模式的影響，尤其是盒子模型。
解析

　　 css 和 html 的解析也會受到文檔模式的影響，就像在 IE678 标準模式時，HTML 解析時會将嵌套 form 下的子節點挪到上一節；而 IE9 标準模式時不會。
腳本

　　這個我想不用多說大家也深有體驗了。

十一、Jser 别太開心

相容性模式僅僅是友善我們開發調試而已，并不能完全替代 IETester，更不能替代在真實的 IE67 上測試。因為除了浏覽器版本對應的文檔模式外，其他文檔模式均是跑在浏覽器核心虛拟機上，而這些虛拟機僅僅能模拟真實浏覽器核心的大部分 DOM 樹解析、渲染和 JS API 而已。例如在 IE8 上設定文檔模式為怪異模式，但 XMLHttpRequest 依舊可用（XMLHttpRequest 是從 IE7 開始才有的），是以在檢測浏覽器特性的時候，特征嗅探比判斷浏覽器的文檔模式更為準确、好用。

十二、總結

從“浏覽器模式”與“文檔模式”關聯，“文檔模式”與“盒子模型的渲染模式”挂鈎，到 IE10+一下子将三者關聯切斷，轉向 W3C 标準。一直覺得 IE9 是 IE 非标準與标準間的過渡帶，現在就更加認定是這樣了。

也許大家看到這裡會更加疑惑，似乎了解上述内容會加重開發的負擔（考慮的點更多了）。

其實我們隻要再次明确一下“文檔相容性模式”的目的就好了，對終端使用者來講它是為了在新版 IE 中盡量正确地顯示老網站；對開發者來講它是為了友善調試新網站在舊版 IE 上的顯示效果和 JS 的有效性，極端情況下會通過鎖定文檔模式來啟用舊技術（如 ie67 下的 vml）。

是以作為普通開發者的我們隻需做三件事：

1. 以有效的 doctype 作為文檔的第一行，保證渲染模式為标準模式；

2. 開發前設定網站的最佳運作環境範圍，就是需适配的 IE 版本号，是否适配 Webkit 等；

3. 開發并使用各種 hacks 為相容性付出不懈的努力。

另外我曾參與一個項目需要運用 VML 來畫圖，客戶大部分使用 IE678，少部分使用 IE910，其他浏覽器的可忽略不計，于是就可以通過鎖定文檔模式為模拟 IE7 标準模式來啟用 VML 支援了。（官方聲 IE9+不支援 VML，但實際上 IE8 已經不支援了。）

若作為庫或架構開發者，由于文檔模式影響大部分 JS API，而渲染模式影響各項樣式值和擷取方式等等，情況會複雜得多。是以綜合文檔模式判斷、特征嗅探、渲染模式判斷是必須的，上述内容隻是挖坑而已。

首先，浏覽器并沒有所謂的“HTML 5 模式"，而是隻有三種：怪異模式（Quirks)，幾乎标準的模式（Limited Quirks）和标準模式（Standards），其中幾乎标準的模式和标準模式之間的唯一差異在于是否對元素給定行高（line-height）和基線（baseline）

幾乎标準模式中，如果标簽所在行沒有其他的行内元素，将不指定基線（baseline），标簽是以會緊貼着父元素底部在标準模式中，行框總是會包含類似字母 g，f 尾巴下伸出來的那一部分空間（針對下行字母），即使行框内并沒有任何内容。是以這種情況下你看到的跟父元素底部幾個像素的間隙實際上就是為”字母尾巴“預留的

使用 XHTML Transitional Doctype 會是浏覽器運作在”幾乎标準模式（Limited Quirks）”。如果你使用XHTML Strict 或者HTML 4 Strict模式，你将看到和使用HTML 5 模式同樣的間隙，因為這是标準模式（Standards mode）

文檔模式

文檔模式主要分為混雜模式和标準模式兩種，而标準模式又可劃分為标準模式，準标準模式，超級标準模式三種（其中标準模式和準标準模式非常接近，他們的差異幾乎可以忽略不計）。具體區分如下圖：

文檔模式及盒子模型

标準模式

可通過以下任何一種類型來開啟：

HTML 4.01 嚴格型

<!-- HTML 4.01 嚴格型 -->

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

XHTML 1.0 嚴格型

<!-- XHTML 1.0 嚴格型 -->

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5

<!-- HTML 5 -->

<!DOCTYPE HTML>

準标準模式

可通過使用過渡型（transitional）或架構集型（frameset）來觸發，如下：

HTML 4.01 過渡型

<!-- HTML 4.01 過渡型 -->

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

HTML 4.01 架構集型

<!-- HTML 4.01 架構集型 -->

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

XHTML 1.0 過渡型

<!-- XHTML 1.0 過渡型 -->

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 架構集型

<!-- XHTML 1.0 架構集型 -->

<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

文檔模式及盒子模型

什麼是DOCTYPE？

文檔模式分類

如何觸發各種模式

标準模式和怪異模式下頁面渲染的差別

怎麼知道浏覽器用的是哪種模式

參考連結

一、前言

二、什麼是浏覽器模式？

三、什麼是文檔模式？

四、文檔模式的種類

五、IE8+設定文檔模式的方式

六、文檔模式的決定方式

七、注意

八、不一樣的标準模式

九、不一樣的怪異模式

十、文檔模式影響到哪些方面

十一、Jser 别太開心

十二、總結

繼續閱讀

為什麼把CSS放頭部，script放下面

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

layui多任務上傳添加進度條