css盒子模型用於處理元素的內容、內邊距、邊框和外邊距的方式簡稱。元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。
內邊距、邊框和外邊距都是可選的，默認值是零。但是，許多元素將由用戶代理樣式表設置外邊距和內邊距。可以通過將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。
* { margin: 0; padding: 0; }
css盒子模型到底的思想是什么？
CSS實現頁面布局的一種思想：把頁面的所有元素都看成一個類似於禮品盒的盒子，禮品盒可能會有好多層包裝組成，那么頁面元素也對應的有內容、邊框、內外邊距等組成。這里特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的3D屬性,css盒子3D模型從上到下分為5層：1、border；2、content+padding；3、background-image；4、background-color；5、margin。
目前有：標准盒子模型和IE盒子模型 2種盒模型 ，區別在於：
標准盒模型： 元素的width和height = content //內容
IE盒模型： 元素的width和height =content+border+padding //內容+邊框+內邊距
為了滿足跨瀏覽器的差異，我們比較肯定的方式是使用標准盒模型，這里通過在網頁頂部增加DOCTYPE的聲明，來解決跨瀏覽器兼容方案（或者使用css3的聲明方式）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS盒子模型對行內元素和塊級元素的區別和特點
塊級元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度。
行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化，另外
塊級元素可以設置width,height屬性。
行內元素設置width,height屬性無效，它的長度高度主要根據內容決定。
塊級元素即使設置了寬度,仍然是獨占一行。
塊級元素可以設置margin和padding屬性。
行內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不會產生邊距效果。
塊級元素對應於display:block. 行內元素對應於display:inline。
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table...
如果想讓一個元素可以設置寬度高度，又讓它以行內形式顯示，我們可以設置display的值為inline-block。
Box-sizing說明
CSS3增加的box-sizing屬性,允許我們規定元素使用哪種盒模型。IE8及以上版本支持該屬性，Firefox 需要加上瀏覽器廠商前綴-moz-，對於低版本的IOS和Android瀏覽器也需要加上-webkit-。它具有有3個屬性值：
box-sizing:content-box： W3C標准盒模型，默認屬性。padding和border不被包含在定義的width和height之內。
box-sizing:border-box：IE6混雜模式盒模型， padding和border被包含在定義的width和height之內。此屬性表現為怪異模式下的盒模型。
box-sizing：inherit： 從父級元素中繼承該屬性。
如果設置box-sizing：border-box來使用IE6混雜盒模型 ，那么
.demo { width: 100px; height: 100px; padding: 10px; border: 5px solid black; box-sizing: border-box; /*增*/
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
設置padding與border后，內容區的寬度和高度被壓縮為70px*70px,盒子的原尺寸仍然是100px*100px
辦公資源網址導航 https://www.wode007.com
Box-sizing 的應用場景？
當一個容器寬度定義為 width:100%; 之后，如果再增加 padding 或者 border 則會溢出父容器，是向外擴張的。如果使用該樣式，指定為 box-sizing: border-box; 則 padding 和 border 就不會再溢出，而是向內收縮的，這個效果是非常實用的。