盒子模型与DOCTYPE
2019獨角獸企業重金招聘Python工程師標準>>>
盒子模型都具有的屬性：內容（content）、填充（padding）、邊框（border）、邊界（margin）；
W3C標準盒子模型定義：
從圖中可以看到： W3C標準盒子模型width和height只是content的寬度和高度，不包括padding、border、margin；
IE盒子模型：
從圖中可以看到：IE盒子模型width和height包括content、padding、border的寬度和高度；
Example： 一個盒子的css樣式為：{margin: 20px; ?border: 1px; ?padding: 10px; width: 200px; ?height: 50px;}，如果用W3C標準盒子模型解釋：盒子占用的寬度：20*2+1*2+10*2+200=262px，高度：20*2+1*2+10*2+50=112px，實際寬度：1*2+10*2+200=222px，實際高度：1*2+10*2+50=72px；如果用IE盒子模型解釋：盒子占用的寬度：20*2+200=240px；占用的高度：10*2+50=70px，盒子實際的寬度：200px，實際高度：50px。這就是兩者之間區別。
那到底該用哪種模型呢？當然是W3C標準盒子模型了，W3C標準盒子模型兼容所有瀏覽器。那該怎么確定頁面渲染是按照W3C標準盒子模型呢？只要在頁面頂部加上DOCTYPE（具體DOCTYPE說明，點這） 申明，瀏覽器就會按照W3C標準渲染，如果不加DOCTYPE申明，瀏覽器會按照本身默認標準去渲染頁面，除IE外所有瀏覽器按照W3C標準盒子模型渲染頁面，至于IE吧，當然會按照IE盒子模型渲染頁面了，只要加上DOCTYPE強制IE采用標準盒子模型渲染頁面。
下面我們測試一下：($.support.boxModel 在jQuery 1.10之后被去掉)
Test1：
<html> <head> <meta?charset="utf-8"> <title>HTML?BOX?MODEL</title> </head> <style?type="text/css"> #header?{width:?100px;height:?50px;padding:?30px;border:?solid?5px?red; } </style> <body> <div?id="header"><p?id="p">This?is?a?word!</p> </div> </body> <script?type="text/javascript"?src="jquery-1.8.3.min.js"></script> <script?type="text/javascript">var?theBox?=?$.support.boxModel???"標準W3C"?:?"IE";alert("頁面支持："?+?theBox?+?"盒子模型"); </script> </html>這個頁面頭部沒有DOCTYPE申明，所有瀏覽器下，$.support.boxModel 都為false，即弾框顯示IE盒子模型，這個$.support.boxModel有一定的誤導性。從實際頁面渲染效果就很明顯看出Chrome與IE之間的區別：（在IE7-IE9下，如果沒有指定DOCTYPE，會默認按照IE盒子模型，但從IE10之后，微軟逐漸向W3C靠攏，所以兩者盒子模型差別不大）：
? ? ? ? ? ? ? ? ??
Test2： （添加DOCTYPE 說明）
<!DOCTYPE?html> <!--?<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?--> <html>? <head><meta?charset="utf-8"><title>HTML?BOX?MODEL</title> </head> <style?type="text/css"> #header?{width:?100px;height:?50px;padding:?30px;border:?solid?5px?red; } </style> <body><div?id="header"><p?id="p">This?is?a?word!</p></div> </body> <script?type="text/javascript"?src="jquery-1.8.3.min.js"></script> <script?type="text/javascript">var?sBox?=?$.support.boxModel???'標準W3C'?:?'IE';alert("頁面支持："?+?sBox?+?"盒子模型"); </script> </html>添加DOCTYPE說明后，所有瀏覽器下$.support.boxModel 的值都為true，即弾框顯示W3C標準盒子模型，從頁面實際渲染效果看，的確按照W3C標準模型渲染，特別是在IE瀏覽器下。
所以，從測試結果看，DOCTYPE 申明直接影響頁面渲染效果，特別是在IE7-IE9下，所以為了所有頁面的標準和較少不必要的bug，每個頁面嚴格進行DOCTYPE說明。
轉載于:https://my.oschina.net/No5stranger/blog/209410
總結
以上是生活随笔為你收集整理的盒子模型与DOCTYPE的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Atitit.遍历图像像素点rgb ja
- 下一篇： stm32 Flash读写[库函数]