參考鏈接：
https://www.2cto.com/kf/201805/751002.html
http://www.php.cn/div-tutorial-380752.html
瀏覽器的標準模式和怪異模式到底是什么足绅？
標準模式：
是瀏覽器按照W3C標準解析執(zhí)行代碼婴谱，這樣用規(guī)定的語法去渲染，就可以兼容各個瀏覽器夸盟，保證以正確的形式展示網頁斜棚。
怪異模式：
是使用瀏覽器自己的方式解析執(zhí)行代碼俺亮，因為不同瀏覽器解析執(zhí)行的方式不一樣沥邻，所以我們稱之為怪異模式平项。
為什么還要存在怪異模式呢赫舒？
在HTML與CSS的標準化未完成之前，各個瀏覽器對于HTML和CSS的解析有各自不同的實現闽瓢，而有很多舊的網頁都是按照這些非標準的實現去設計的接癌。在HTML與CSS標準確定之后，瀏覽器一方面要按照標準去實現對HTML與CSS的支持扣讼，另一方面又要保證對非標準的舊網頁設計的后向兼容性缺猛。因此，現代的瀏覽器一般都有兩種渲染模式：標準模式和怪異模式椭符。在標準模式下荔燎，瀏覽器按照HTML與CSS標準對文檔進行解析和渲染；而在怪異模式下销钝，瀏覽器則按照舊有的非標準的實現方式對文檔進行解析和渲染有咨。
瀏覽器如何確定使用哪種渲染模式？
如果你的頁面添加了<!DOCTYPE html>(注意：大小寫不敏感)蒸健，那么就等同于開啟了標準模式座享。即如下面代碼展示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
如果省略了，瀏覽器會采用不符合某些標準的渲染模式似忧。
標準模式與怪異模式的常見區(qū)別
盒模型的處理差異：標準CSS盒模型的寬度和高度等于內容區(qū)的高度和寬度渣叛，不包含內邊距和邊框，而IE6之前的瀏覽器實現的盒模型的寬高計算方式是包含內邊距和邊框的盯捌。因此诗箍，對于IE，怪異模式和標準模式下的盒模型寬高計算方式是不一樣的；
行內元素的垂直對齊：很多早期的瀏覽器對齊圖片至包含它們的盒子的下邊框滤祖，雖然CSS的規(guī)范要求它們被對齊至盒內文本的基線筷狼。標準模式下，基于Gecko的瀏覽器將會對齊至基線匠童，而在quirks模式下它們會對齊至底部埂材。最直接的例子就是圖片的顯示。在標準模式下汤求，圖片并不是與父元素的下邊框對齊的俏险，如果仔細觀察，你會發(fā)現圖片與父元素下邊框之間存在一點小空隙扬绪。那是因為標準模式下竖独，圖片是基線對齊的。而怪異模式下挤牛，則不存在這個問題莹痢。
兩者的區(qū)別：
1.盒模式的解析上：
在strict mode 中： width是內容寬度
在quirks mode 中： width則是元素的實際寬度，
而內容寬度 = width- (margin-left + margin-right + padding-left + padding-right + border-left + border-right)
- 圖片元素垂直對齊方式
在strict mode 中： vertical-align 屬性默認取值為baseline
在 quirks mode 中： vercital-align 屬性默認為bottom墓赴，因此在圖片底部會有幾像素的空間竞膳。
3.<table>元素中的字體
quirks mode 下，對于table元素诫硕，字體的某些屬性將不會從body或其它封閉元素繼承到table中坦辟，特別是font-size屬性
4，內聯元素的尺寸
在standards mode 下章办，non-repalced inline 元素無法自定義大小锉走，而在quirks mode 下，定義這些元素的width 和 height屬性藕届，能夠影響改元素顯示的大小尺寸
5.元素的百分比高度
當一個元素使用百分比高度時挠日，在standards mode 下 高度取決于內容的變化，而在 quirks mode 下翰舌，百分比能被正確的應用
6.元素的溢出處理
在 stand mode下， overflow取默認值visible冬骚，即溢出可見椅贱，這種情況下，溢出內容不會被裁剪只冻，呈現在元素框外庇麦，而在quirks mode下，該溢出被當作跨展box來對待喜德，即元素的大小由其內容決定山橄，溢出不會被裁剪，元素框自動調整舍悯，包含溢出內容
