標準模式和怪異模式的來由
在HTML與CSS的標準化未完成之前燕少，各個瀏覽器對于HTML和CSS的解析有各自不同的實現(xiàn)照筑，而有很多舊的網(wǎng)頁都是按照這些非標準的實現(xiàn)去設計的搓译。在HTML與CSS標準確定之后卖毁，瀏覽器一方面要按照標準去實現(xiàn)對HTML與CSS的支持池颈，另一方面又要保證對非標準的舊網(wǎng)頁設計的后向兼容性。因此刺彩，現(xiàn)代的瀏覽器一般都有兩種渲染模式：標準模式和怪異模式迷郑。在標準模式下，瀏覽器按照HTML與CSS標準對文檔進行解析和渲染创倔；而在怪異模式下嗡害，瀏覽器則按照舊有的非標準的實現(xiàn)方式對文檔進行解析和渲染。這樣的話三幻，對于舊有的網(wǎng)頁就漾，瀏覽器啟動怪異模式，就能夠使得舊網(wǎng)頁正常顯示念搬；對于新的網(wǎng)頁抑堡，則可以啟動標準模式，使得新網(wǎng)頁能夠使用HTML與CSS的標準特性朗徊。
瀏覽器如何確定使用哪種渲染模式
知道了這兩種渲染模式的來由首妖，那剩下的問題就是瀏覽器如何能夠確定應該使用哪種模式了。其實歸根結底就是爷恳，瀏覽器如何能將舊網(wǎng)頁與新網(wǎng)頁區(qū)分開來有缆。
平常編寫網(wǎng)頁的時候，一般都會見到HTML文檔的頭部會有文檔類型聲明：DOCTYPE温亲。當瀏覽器遇到正確的文檔聲明時棚壁，瀏覽器就會啟動標準模式，按照制定的文檔類型標準解析和渲染文檔栈虚。而對于舊有的網(wǎng)頁袖外，由于網(wǎng)頁編寫的當時標準還沒有確定，所以一般是不會有文檔類型聲明的魂务。所以曼验，對于沒有文檔類型聲明或者文檔類型聲明不正確的文檔泌射，瀏覽器就會認為它是一個舊的HTML文檔，就會使用怪異模式解析和渲染該文檔鬓照。關于DOCTYPE的更詳細說明熔酷，請戳這里 DOCTYPE聲明作用及用法詳解。
標準模式與怪異模式的兩個常見區(qū)別
- 盒模型的處理差異：標準CSS盒模型的寬度和高度等于內容區(qū)的高度和寬度豺裆，不包含內邊距和邊框拒秘，而IE6之前的瀏覽器實現(xiàn)的盒模型的寬高計算方式是包含內邊距和邊框的。因此臭猜，對于IE翼抠，怪異模式和標準模式下的盒模型寬高計算方式是不一樣的；
- 行內元素的垂直對齊：很多早期的瀏覽器對齊圖片至包含它們的盒子的下邊框获讳，雖然CSS的規(guī)范要求它們被對齊至盒內文本的基線。標準模式下活喊，基于Gecko的瀏覽器將會對齊至基線丐膝，而在quirks模式下它們會對齊至底部。最直接的例子就是圖片的顯示钾菊。在標準模式下帅矗，圖片并不是與父元素的下邊框對齊的，如果仔細觀察煞烫，你會發(fā)現(xiàn)圖片與父元素下邊框之間存在一點小空隙浑此。那是因為標準模式下，圖片是基線對齊的滞详。而怪異模式下凛俱，則不存在這個問題。具體請看這篇文章 CSS深入理解vertical-align和line-height的基友關系料饥。
