超級工具人：實力不夠震撼，吸引不夠震撼，追到女朋友也沒有用，不是工具人做到死就是麻煩一大堆。css處理網頁時，它認為每個元素都包含在乙個不可見的盒子裡。
為什麼要想象成盒子呢？因為如果把所有的元素都想象成盒子，那麼我們對網頁的布局就相當於是擺放盒子。
我們只需要將相應的盒子擺放到網頁中相應的位置即可完成網頁的布局。
所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。
不同部分的說明：
chrome的控制台的截圖：
最外面橙色的就是外邊距區域(margin area)，往裡黃色的是邊框區域(border area)，再往裡的綠色的是內邊距區域(padding area)，最裡面藍色的就是內容區域（content area）了。
重要:當您指定乙個css元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完全大小的元素，你還必須新增填充，邊框和邊距。.
下面的例子中的元素的總寬度為300px：
div讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
試想一下，你只有250畫素的空間。讓我們設定總寬度為250畫素的元素:
div最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
盒子模型
240px，而不是200px了。
這是為什麼呢？因為預設情況下，設定width、height等作用物件是內容區域，所以設定的width: 200px僅僅是內容區域的寬度，加上左右內邊距大小，導致了元素的整體尺寸變大了。這和我們對現實世界的中盒子的認識有差異的。比如，你我們說房子的面積，並不單單指可用面積，還要包括牆壁厚度、陽台、電梯之類的空間的。
width設定寬
height設定高
屬性值值
描述auto
預設。瀏覽器會計算出實際的高度。
length
使用 px、cm 等單位定義高度。
%基於包含它的塊級物件的百分比高度。
inherit
規定應該從父元素繼承 height 屬性的值。
p.exmargin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。
margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
屬性
屬性描述
margin
簡寫屬性。在乙個宣告中設定所有外邊距屬性。
margin-bottom
設定元素的下外邊距。
margin-left
設定元素的左外邊距。
margin-right
設定元素的右外邊距。
margin-top
設定元素的上外邊距。
margin可能的值值說明
auto
設定瀏覽器邊距。
這樣做的結果會依賴於瀏覽器
length
定義乙個固定的margin（使用畫素，em等）
%定義乙個使用百分比的邊距
margin可以使用負值，重疊的內容。
margin屬性可以有一到四個值。
margin:25px 50px 75px;
margin:25px 50px;
margin:25px;
屬性描述
border
簡寫屬性，用於把針對四個邊的屬性設定在乙個宣告。
border-style
用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。
border-width
簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
border-color
簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
border-style屬性值值描述
none
定義無邊框。
hidden
與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。
dotted
定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed
定義虛線。在大多數瀏覽器中呈現為實線。
solid
定義實線。
double
定義雙線。雙線的寬度等於 border-width 的值。
groove
定義 3d 凹槽邊框。其效果取決於 border-color 的值。
ridge
定義 3d 壟狀邊框。其效果取決於 border-color 的值。
inset
定義 3d inset 邊框。其效果取決於 border-color 的值。
outset
定義 3d outset 邊框。其效果取決於 border-color 的值。
inherit
規定應該從父元素繼承邊框樣式。
border-style屬性可以有1-4個值：
border-style:dotted solid double;
border-style:dotted solid;
border-style:dotted;
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
可以設定的屬性分別（按順序）：border-width, border-style,和border-color.
如果上述值缺少乙個沒有關係，例如border：＃ff0000;是允許的。
border:5px solid red;當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性可以改變上下左右的填充。
padding屬性，可以有一到四個值。
padding:25px 50px 75px 100px;
padding:25px 50px 75px;
padding:25px 50px;
padding:25px;
屬性
屬性說明
padding
使用簡寫屬性設定在乙個宣告中的所有填充屬性
padding-bottom
設定元素的底部填充
padding-left
設定元素的左部填充
padding-right
設定元素的右部填充
padding-top
設定元素的頂部填充
注意：padding、border的縮寫方法和margin是一致的。
盒模型和總結
盒模型 包含有外邊距margin 和內邊距padding 邊框border和內容element 盒子的寬 高 margin 2 padding 2 border 2 element 也就是乙個模型的總長度是所有的邊距加盒子邊框的粗度和元素本體的寬高 margin的方法 margin top marg...
總結盒模型的考點
盒模型，前端面試中必考的點！盒子模型有兩種 w3c標準盒模型 ie盒模型 w3c定義的盒子模型包括margin border padding content 元素的width content的寬度 ie盒子模型與w3c的盒子模型唯一區別就是元素的寬度，元素的width content padding...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...