在頁面頂部設定 doctype是為了統一標準
瀏覽器有標準模式和怪異模式
而這兩種模式最大區別就是 盒模型的解析不同
摘自網路
比如ie width=100px padding=20px; 那ie的width在網頁裡面還是顯示為：100px; padding的20px。是包含在100px裡面。也就是說這時content 是80px；
而標準width=100px就是content=100px padding=20px。標準的padding把內容撐開了
換句話說，ie下寬度還是自身寬度，padding在這個寬度裡面。展現還是自身的寬度
標準時padding把設定的寬度撐破了
ie6 盒子模型中，盒子的尺寸包含了 內容區，padding， border 和 margin 這四個部分，而 w3c 的盒子模型中，盒子的尺寸只包含內容區，padding，border 和 margin 被排除在盒子尺寸之外。
說來說去就是一句話：加上doctype宣告，讓瀏覽器使用標準模式
********************=
部分資訊 參考網路資料
理解標準盒模型和怪異模式 box sizing屬性
盒子模型 主要有兩種，w3c標準盒模型，ie下的怪異盒模型，其實還有就是彈性盒模型 上篇文章我們用他很好的解決了對齊問題 盒模型分為 標準w3c盒模型 ie盒模型 以及css中的伸縮盒模型 當我們使用編輯器建立乙個html頁面時，我們一定會發現最頂上的doctype標籤 這些doctype都是標準的...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...