盒模型俺陋，英文名：“box model”。所有的html元素都可以被看作一個盒子昙篙，而盒模型描述了元素所占空間的內容腊状。每個盒子包括有外邊距(margin)、邊框(border)苔可、內邊距(padding)和實際內容(content aera)缴挖。
如圖所示：
下面，來介紹具體一下盒模型中的基本元素
content area
盒子的中心是內容content硕蛹，content可以是任何元素醇疼，我們可以給content設定寬度width和高度height等屬性來確定內容大小。
border
有了內容法焰，可以給內容設定一個邊框border將里面的內容包裹住秧荆。給元素設定border是比較常見的方法。如果當你在做布局時埃仪，寫了幾組塊級元素而又搞不清楚他們互相嵌套的關系乙濒，或者想要知道一些元素實際的空間，可以給加上給他們加上border: 1px solid red;1像素的紅色實線邊框，就一目了然了颁股。
值得一提么库，如果要讓盒模型顯示邊框，一定會占用元素的空間甘有。如果不想占用元素的空間诉儒，可以給元素設定outline，既可以顯示元素的邊框亏掀，又不會占空空間忱反。
padding
padding是盒模型中的內邊距，顧名思義滤愕，就是內容距離邊框的內部距離温算。padding的值不能為負。我們可以給padding分別設定padding-top间影、padding-bottom注竿、padding-left、padding-right四個屬性來設定元素的上下左右內邊距魂贬，也可以將padding的四個屬性都寫在一個padding中來表示巩割。根據padding中值的指定個數，有如下四種情況随橘，可以視情況而定喂分。
- 指定一個值時 該值指定四個邊的內邊距
- 指定兩個值時 第一個值指定上下兩邊的內邊距 第二個指定左右兩邊的內邊距
- 指定三個值時 第一個指定上邊的內邊距.第二個指定左右兩邊 第三個指定下邊
- 指定四個值時分別為上 右 下 左（順時針順序）
margin
margin是盒模型中的外邊距。在網頁中看到的相鄰元素間分隔的距離机蔗，呈現出的優(yōu)美效果蒲祈，通常都是給元素設定的margin屬性起的作用。我們同樣給margin設定margin-top萝嘁、margin-bottom梆掸、margin-left、margin-right四個屬性來確定四個方向的邊距牙言。具體的用法可以參照上述padding的用法酸钦。
有趣的是，我們可以給元素設定負margin咱枉，而這在css規(guī)范中是被允許的卑硫，并且是很常見的〔隙希可以增加塊狀元素寬度欢伏，在不給元素設定浮動或定位的情況下，就能讓元素進行位移亿乳。
box-sizing
box-sizing屬性是用于更改用于計算元素寬度和高度的默認的CSS盒模型硝拧。box-sizing有兩個值径筏，content-box和border-box ,那兩者都有什么區(qū)別呢？
-
content-box是默認值障陶，就是標準的盒子屬性滋恬。其中元素的寬度width和高度height在計算時只是包括內容content的width和height，并不包含border抱究、margin恢氯、padding這些元素。 -
border-box則不同鼓寺，元素的寬度width和高度height在計算時不但包括內容content的width和height酿雪，還包括了border和padding三樣東西加在一起構成的，等于是元素的寬高等價于包括border內部的寬高侄刽。
所以在CSS中我們經常會設定這樣一條屬性box-sizing: border-box;，便于計算盒模型的寬高朋凉。
總結
知道了上述有關盒模型的基本概念州丹，我們可以自己動手，在瀏覽器中檢查元素杂彭，在樣式中就可以看到所選元素的盒模型了墓毒，如下圖所示chrome瀏覽器的盒模型，一起來試一下吧亲怠。
