什麼是盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際内容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖檔說明了盒子模型(Box Model)：
元素顯示模式
元素的顯示模式通俗來說就是元素以什麼形式在網頁顯示，常見的顯示模式有塊元素和行内元素、以及行内塊元素。不同的顯示模式擁有各自獨特的屬性，可以在網頁顯示中搭配出非常完美的效果。
常見的塊元素有
~
、
、、、、等，其中 标簽是最典型的元素。
塊級元素的特點：
自己獨占一行。
高度，寬度、外邊距以及内邊距都可以控制。
寬度預設是容器（父級寬度）的100%。
是一個容器及盒子，裡面可以放行内或者塊級元素。
注意：
文字類的元素内不能使用塊級元素
标簽主要用于存放文字，是以
裡面不能放塊級元素，特别是不能放
同理，
~等都是文字類塊級标簽，裡面也不能放其他塊級元素
常見的行内元素有、、<b>、<em>、、、、、、等，其中
标簽是最典型的行内元素。有的地方也将行内元素稱為内聯元素。
行内元素的特點：
相鄰行内元素在一行上，一行可以顯示多個。
高、寬直接設定是無效的。
預設寬度就是它本身内容的寬度。
行内元素隻能容納文本或其他行内元素。
連結裡面不能再放連結
特殊情況連結 裡面可以放塊級元素，但是給 轉換一下塊級模式最安全
在行内元素中有幾個特殊的标簽——、、
，它們同時具有塊元素和行内元素的特點。
有些資料稱它們為行内塊元素。
行内塊元素的特點：
和相鄰行内元素（行内塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行内元素特點）。
預設寬度就是它本身内容的寬度（行内元素特點）。
高度，行高、外邊距以及内邊距都可以控制（塊級元素特點）。
轉換為塊元素：display:block;
轉換為行内元素：display:inline;
轉換為行内塊：display: inline-block;
元素屬性
高度寬度隻在塊級元素或者行内塊元素中有效，行内元素想要使用下列屬性需要将行内元素轉換成塊級元素：
height：元素高度屬性
weight：元素寬度屬性
例如想要設定一個高度為40，寬度為60的盒子：
border可以設定元素的邊框。邊框有三部分組成:邊框寬度(粗細) 邊框樣式邊框顔色。
文法：
邊框樣式border-style 可以設定如下值：
none：沒有邊框即忽略所有邊框的寬度（預設值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
值
描述
border-width
規定邊框的寬度。參閱：border-width 中可能的值。
border-style
規定邊框的樣式。參閱：border-style 中可能的值。
border-color
規定邊框的顔色。參閱：border-color 中可能的值。
例如，我們設定div的邊框為一像素的黑色實線邊框
CSS 邊框屬性允許你指定一個元素邊框的樣式和顔色。
邊框簡寫：
邊框分開寫法：
border-collapse 屬性控制浏覽器繪制表格邊框的方式。它控制相鄰單元格的邊框。
collapse 單詞是合并的意思
border-collapse: collapse; 表示相鄰邊框合并在一起
注意：邊框會額外增加盒子的實際大小
padding 屬性用于設定内邊距，即邊框與内容之間的距離。
屬性
說明
padding
使用簡寫屬性設定在一個聲明中的所有填充屬性
padding-bottom
設定元素的底部填充
padding-left
設定元素的左部填充
padding-right
設定元素的右部填充
padding-top
設定元素的頂部填充
padding 屬性（簡寫屬性）可以有一到四個值。
上填充為25px
右填充為50px
下填充為75px
左填充為100px
左右填充為50px
上下填充為25px
所有的填充都是25px
當我們給盒子指定padding 值之後，發生了2 件事情：
内容和邊框有了距離，添加了内邊距。
padding影響了盒子實際大小。
也就是說，如果盒子已經有了寬度和高度，此時再指定内邊框，會撐大盒子。
margin 屬性用于設定外邊距，即控制盒子和盒子之間的距離。
margin
簡寫屬性。在一個聲明中設定所有外邊距屬性。
margin-bottom
設定元素的下外邊距。
margin-left
設定元素的左外邊距。
margin-right
設定元素的右外邊距。
margin-top
設定元素的上外邊距。
margin 簡寫方式代表的意義跟padding 完全一緻。
外邊距可以讓塊級盒子水準居中，但是必須滿足兩個條件：
盒子必須指定了寬度（width）。
盒子左右的外邊距都設定為auto 。
注意：以上方法是讓塊級元素水準居中，行内元素或者行内塊元素水準居中給其父元素添加text-align:center 即可。
外邊距合并
使用margin 定義塊元素的垂直外邊距時，可能會出現外邊距的合并。
主要有兩種情況:
相鄰塊元素垂直外邊距的合并
嵌套塊元素垂直外邊距的塌陷
當上下相鄰的兩個塊元素（兄弟關系）相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top ，則他們之間的垂直間距不是margin-bottom 與margin-top 之和。取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并。
解決方案：
盡量隻給一個盒子添加margin 值。
對于兩個嵌套關系（父子關系）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
可以為父元素定義上邊框。
可以為父元素定義上内邊距。
可以為父元素添加overflow:hidden。
盒子内設定屬性盡量用内邊距不要用外邊距
還有其他方法，比如浮動、固定，絕對定位的盒子不會有塌陷問題。
其他元素屬性
在CSS3 中，新增了圓角邊框樣式，這樣我們的盒子就可以變圓角了。
border-radius 屬性用于設定元素的外邊框圓角。
參數值可以為數值或百分比的形式
如果是正方形，想要設定為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為50%
該屬性是一個簡寫屬性，可以跟四個值，分别代表左上角、右上角、右下角、左下角
分開寫：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和
border-bottom-left-radius
相容性ie9+ 浏覽器支援, 但是不會影響頁面布局,可以放心使用
CSS3 中新增了盒子陰影，我們可以使用box-shadow 屬性為盒子添加陰影。
h-shadow
必需的。水準陰影的位置。允許負值
v-shadow
必需的。垂直陰影的位置。允許負值
blur
可選。模糊距離
spread
可選。陰影的大小
color
可選。陰影的顔色。在CSS顔色值尋找顔色值的完整清單
inset
可選。從外層的陰影（開始時）改變陰影内側陰影
預設的是外陰影(outset), 但是不可以寫這個單詞,否則造成陰影無效
盒子陰影不占用空間，不會影響其他盒子排列。
在CSS3 中，我們可以使用text-shadow 屬性将陰影應用于文本。
必需。水準陰影的位置。允許負值。
必需。垂直陰影的位置。允許負值。
可選。模糊的距離。
可選。陰影的顔色。參閱 CSS 顔色值。