盒子模型

在HTML中，瀏覽器在解析每一個標籤元素時，都會將標籤解析成一個裝東西的盒子，超文字標記語言中，內容本身就定義在標籤內部的。它將標籤解析一個一個盒子，盒子之間存在間距，盒子內部裝的東西與盒子之間也存在間距，並且盒子本身也是存在邊框的。

盒子本身的邊框也就是(邊框border )，盒子和盒子之間的距離也就是(外邊距 margin ) ，盒子到內容之間的距離也就是(內邊距padding )，剩下中間的就是內容（content）。

當外邊距越大，盒子和盒子之間的距離就越大；當內邊距越大，邊框和內容之間距離就越大，相對而言，內容就越少。所以合理設定margin和padding是非常重要的。換句話說：一個元素的真實高度和真實寬度，並不僅僅由我們大家設定的width和 height來決定，還應該包括內邊距，邊框寬度，以及外邊距來決定。

邊框：我們可以通過border等其他的衍生屬性來進行設定；內邊距：我們就需要使用paddinq或者它衍生屬性來進行設定；外邊距：我們可以通過使用magin或者它的衍生屬性進行設定。

boder設定邊框

要顯示邊框，比如div這種，那麼必須要設定broder-style，否則預設是沒有邊框的。

border 簡寫屬性在一個宣告設定所有的邊框屬性。

可以按順序設定如下屬性：

1. border-width
2. border-style
3. border-color

如果不設定其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。

例如：

border: medium double rgb(250,0,255);

屬性：

magin屬性設定外邊距

margin 簡寫屬性在一個宣告中設定所有外邊距屬性。該屬性可以有 1 到 4 個值。

說明：

這個簡寫屬性設定一個元素所有外邊距的寬度，或者設定各邊上外邊距的寬度。

塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。

註釋：允許使用負值。

屬性值：

它還有一些衍生屬性，單獨設定，比如：margin-top、margin-left等等

padding屬性設定內邊距

設定內邊距我們要使用padding屬性進行設定。

padding 簡寫屬性在一個宣告中設定所有內邊距屬性。

說明：

這個簡寫屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。

註釋：不允許使用負值。

屬性值：

它還有一些衍生屬性，單獨設定，比如：padding-top、padding-left等等