1. 盒子模型簡介
概述：所謂盒子模型，就是把HTML頁面中的布局元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。當這些元素都是盒子以後，我們的布局就變成了在頁面中擺放盒子。每個矩形都由元素的內容(content)、內邊距（padding）、邊框（border）和外邊距（margin）組成
盒子模型特性：每個盒子都有：邊界、邊框、填充、內容 4個屬性；每個屬性都包括4個部分：上、右、下、左。屬性的4部分可以同時設置，也可以分別設置
2. 邊框（border）
border屬性來定義盒子的邊框
語法：border : border-width || border-style || border-color
注意：這個順序不能錯
該屬性包含3個子屬性：
border-width(邊框寬度) ：定義邊框的粗細，單位是pxborder-style(邊框樣式)：邊框的樣式border-color(邊框顏色)：邊框的顏色邊框樣式：
邊框分開寫：
注意：當定義邊框寬度時，必須要定義邊框的顯示樣式。由於默認樣式為none,所以僅設置邊框的寬度，由於樣式不存在，邊框寬度也自動被清除為 0
表格的細線邊框（border-collapse:collapse;）
這個屬性控制瀏覽器繪製表格邊框的方式，它控制相鄰單元格的邊框，從而讓兩個重疊的單元格之間的那條重疊線變成一條線
collapse這個單詞是合併的意思；border-collapse:collapse;表示相鄰邊框合併在一起
3. 內邊距（padding）
padding屬性用於設置內邊距。 是指 邊框與內容之間的距離。padding-top:上內邊距padding-right:右內邊距padding-bottom:下內邊距padding-left:左內邊距 注意：
後面跟幾個數值表示的意思是不一樣的padding也會影響盒子的實際大小
4. 外邊距（margin）
margin屬性用於設置外邊距。 設置外邊距會在元素之間創建「空白」，定義了元素與其他相鄰元素的距離， 這段空白通常不能放置其他內容。margin-top:上外邊距margin-right:右外邊距margin-bottom:下外邊距margin-left:上外邊距margin:上外邊距 右外邊距 下外邊距 左外邊取值順序跟內邊距相同
擴展1：盒子水平居中，必須滿足以下兩個條件：
必須是塊級元素盒子必須指定了寬度（width）
然後就給左右的外邊距都設置為auto，就可使塊級元素水平居中
擴展2：清除元素的默認內外邊距為了更方便地控制網頁中的元素，製作網頁時，可使用如下代碼清除元素的默認內外邊距：
Tips： 行內元素是只有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。我們儘量不要給行內元素指定上下的內外邊距就好了。行內元素修改text-align:center也可以達到居中顯示的效果
擴展3：外邊距合併
1、相鄰塊元素垂直外邊距的合併（外邊距垂直塌陷）
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
2、嵌套塊元素垂直外邊距的合併
對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
解決方案：
可以為父元素定義1像素的上邊框或上內邊距。可以為父元素添加overflow:hidden
5. 內容的寬度（weight）和高度（height）
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值
計算方式：
/*外盒尺寸計算（元素空間尺寸）*/Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內盒尺寸計算（元素實際大小）*/ Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border （Width為內容寬度）
注意：
1、寬度屬性 width 和高度屬性 height 僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。
6. 盒子模型布局穩定性
根據穩定性來分，建議如下：按照優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）
7. 圓角邊框：border-radius
在ＣSS3中，新增了圓角邊框的樣式，這樣就能讓盒子變成圓角了
border-radius屬性用於設置元素的外邊框圓角
語法：border-radius: length;
radius半徑（圓的半徑）原理：橢圓與邊框的交集形成圓角效果
參數值：
可以為數值或百分比的形式如果是正方形，想要設置一個圓，把數值改為高度或者寬度的一半即可，或者直接寫50%如果是矩形，設置為高度的一半就可以做該屬性是一個簡寫屬性，可以跟四個值
分別表示左上角、右上角、右下角、 左下角
border-top-left-radius、border-top-right-radius
border-bottom-right-radius、border-bottom-left-radius
8. 盒子陰影：box-shadow
box-shadow屬性為盒子添加陰影
語法：box-shadow:h-shadow v-shadow blur spread color inset;
注意：
默認是外陰影（outset），不要寫這個單詞，否則會導致陰影失效。如果改為inset就是內部陰影了盒子陰影不佔用空間，不會影響其他盒子排列
9. 文字陰影：text-shadow
使用text-shadow屬性來設置文本的陰影