盒子模型（box model）組成：邊框（border）、外邊距(margin)、內邊距(padding)、和實際內容(content)。
border可以設定元素的邊框，邊框有三部分組成邊框寬度(粗細）、邊框樣式、邊框顏色。
語法：border ： border-width || border-style || border-color
屬性作用
border-width
定義邊框粗細，單位是px（畫素）
border-style
邊框的樣式
border-color
邊框顏色
css邊框屬性允許你指定乙個元素邊框的樣式和顏色
邊框簡寫：
border : 1px solid red ;沒有順序
邊框分開寫法：
border-top : 1px solid red ；/* 只設定上邊框 其餘同理 */
**的細線邊框
border-collapse屬性控制瀏覽器繪製**邊框的方式，它控制相鄰單元格的邊框。
語法：border-collapse ： collapse；
邊框會影響盒子實際大小
邊框會額外增加盒子的實際大小，因此我們有兩種方案解決
測量盒子大小的時候不測量邊框
如果測量的時候包含了邊框，則需要width/height減去邊框寬度
padding屬性用於設定內邊距，即邊框與內容之間的距離
屬性作用
padding-left
左內邊距
padding-right
右內邊距
padding-top
上內邊距
padding-bottom
下內邊距
padding屬性（簡寫屬性）可以是一到四個值
值的個數
表達意思
padding : 5px;
1個值，代表上下左右都有5畫素內邊距
padding : 5px 10px;
2個值，代表上下內邊距是5畫素，左右內邊距是10畫素
padding : 5px 10px 20px;
3個值，代表上內邊距5畫素，左右內邊距10畫素，下內邊距20畫素
padding : 5px 10px 20px 30px;
4個值，上是5畫素 右10畫素 下20畫素 左是30畫素 順時針
當我們給盒子指定padding值之後，發生了了、2件事情：
內容和邊框有了距離，新增了內邊距
padding影響了盒子實際大小。也就是說，如果盒子已經有了寬度和高度，此時再指定內邊距，會撐大盒子。
解決方案：
如果保證盒子跟效果圖大小保持一致，則讓width/height減去多出來的內邊距大小即可
重點：如果盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子大小（意思是當盒子中沒有穩定width/height時定義padding是無效的）
margin屬性用於設定外邊距，即控制盒子和盒子之間的距離
屬性作用
margin-left
左外邊距
margin-right
右外邊距
margin-top
上外邊距
margin-bottom
下外邊距
margin簡寫方式代表的意義跟padding完全一致。
外邊距典型應用
外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
盒子必須指定了寬度（width）
盒子左右的外邊距都設定為auto。
.header
常見的寫法，以下三種都可以：
注意：以上方法是讓塊級元素水平居中，行內元素或者塊內塊元素居中給其父元素新增text-aligen : center；即可
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距合併。
當上下相鄰的兩個塊元素（兄弟關係）相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，取兩個值中的較大者這種現象被稱為相鄰元素垂直外邊距的合併。
解決方案：盡量給乙個盒子新增margin值。
對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上邊距，此時父元素會塌陷較大的外邊距值。
解決方案：
可以為父元素定義上邊框
可以為父元素定義內邊距
可以為父元素新增overflow : hidden ;。
還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題。
網頁元素很多都帶有預設的內外邊距，而且不同瀏覽器預設的也不一致，因此我們在布局前，首先要清除下網頁元素的內外邊距。
padding : 0 ; /* 清除內邊距 */
margin : 0 ; /* 清除外邊距 */
注意：行內元素為了照顧相容性，盡量只設定左右內外邊距，不要設定上下內外邊距，但是轉換為塊級和行內塊元素就可以了。
盒子模型相關知識點
垂直盒子css樣式 div one two 垂直盒子html 水平盒子 css div one 1 two 1 水平盒子 html one 1 box1 div two 1 box2 div 重疊盒子 1 margin不同於border和padding只能取正數，margin的值可以取負數。marg...
CSS盒子模型相關屬性
在css屬性中，boder style屬性用於設定邊框樣式 語法結構 border style 上邊 右邊 下邊 左邊 在設定邊框樣式時既可以針對四條邊分別設定，也可以綜合設定四條邊的樣式。boder style屬性的常用屬性值有4個，分別用於定義不同的顯示樣式，具體如下。使用boder style...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...