作為前端工作者，想必對於盒模型這個概念應該並不陌生，我們在平日的工作中無時無刻不在使用它，但是作為剛剛踏入這個行業的小白來講，對於標准盒模型和怪異盒模型的理解或許還是傻傻分不清，這里小編我就來跟大家聊一聊關於我理解中的盒模型的那些事兒~希望對剛剛踏入這個行業的小伙伴們有所幫助！！！廢話不多說，我們走起~~~~
首先我們要了解一下什么是盒模型？下面甩出盒模型的解釋！！
通俗的講，盒模型是css布局的基礎，它的作用是規定了網頁元素在網頁上如何顯示以及元素之間的相互關系，css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)。
上圖很明白的就可以看出來，盒模型由以下幾部分組成：
內容區(content):元素的寬和高
補白（填充）(padding)：元素內容和外邊緣之間的空間
邊框(border)：盒子的外邊緣
邊界(外邊距)(margin)：盒子外邊緣以外的空間
這其實就是一個標准的盒模型。
width/height(元素的內容寬或高)：內容區(content)、補白（填充）(padding)以及邊框(border)的總和
邊界(外邊距)(margin)：盒子外邊緣以外的空間
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box{ 8 width:300px; 9 height:300px; 10 background:#f00; 11 border:10px solid #000; 12 padding:20px; 13 box-sizing: border-box;/* 轉換成怪異盒模型 該屬性下面有說明*/ 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box"></div> 19 </body> 20 </html>
標准盒模型的呈現形式為：
圖片上可以看到，div的值由原始的300加上padding和border的值最后變為了360x360。
怪異盒模型的呈現形式為：
可以看到，加上padding和border值之后，div的寬度和高度依舊為300x300不變，填充以及邊框屬性值都包含在了元素的體內。
相信看到這里，大家應該能夠理解他們的不同之處了吧？
PS : 我們可以通過CSS3屬性進行盒模型之間的轉換操作，下面是它的一個屬性設置：
1 border-sizing: border-box/* 表示怪異盒模型 */ 2 border-sizing: content-box/* 表示標准盒模型 */
通過設置該屬性，我們可以轉換元素的盒模型進行自己想要的效果呈現，當然我們常用的一些元素中也有自帶怪異盒模型屬性的，例如我們大家熟知的頁面提交按鈕，還有表格table，其實他們都是屬於怪異盒模型的，所以在以后的工作中，應該明白為什么明明設置了填充元素高度依舊不夠的緣故了吧？
結束語-------------------分享知識從我做起，大家一起高飛猛進！