CSS自學筆記（10）:CSS3盒子模型
CSS3為CSS技術的升級版本、最新版本。
就CSS而言，它是一個模組，是一個龐大而又複雜的模組，但是在CSS3中，將這一個龐大的模組分解為一個個容易理解的同時又很精簡的小模組，同時CSS3中又添加了一些新的模組，所以CSS3朝著模組化的方向發展。
CSS3中比較重要的模組有：選擇器、盒子模型、背景和邊框、文字特效、2D/3D轉換、動畫、多列布局、使用者介面。
CSS3的選擇器常用的和CSS選擇器差不多。
CSS3 盒子模型
盒子模型是CSS3很重要的一個模型，它是指元素以何種方式顯示以及元素間如何互動。
一個盒子是由元素的內容、內邊距、邊框、外邊距構成的，所以在瀏覽器上看到的每一個元素都可以理解為一個盒子。多個盒子通過不同的方式排列(上下、並列、巢狀等)後就形成了我們看到的網頁。
盒子組成結構圖：
類似於CSS的框，有圖可以看出，一個盒子的寬度=左右外邊距+左右邊框+左右內邊距+內容寬度。如果兩個盒子是巢狀的，那麼兩個盒子(盒子B巢狀在盒子A中)邊框之間的舉起為A的內邊距+B的外邊距。
盒子模型中實實在在我們可以看到的有邊框、元素。內邊距和外邊距都是虛的，我們只能看到它們對元素的影響，所以盒子模型中只能定義兩類顏色：邊框和背景顏色。
盒子模型中可以定義三類距離：邊框值、外邊距值、內邊距值，從而在一定程度上修飾元素。
注： 大部分元素的盒子屬性(margin,padding)預設都為0。 有部分元素的盒子屬性(margin,padding)預設值不為0，所以有必要時應先定義這些屬性為0. input元素的的邊框屬性定義為0一般是為了美化輸入框和按鈕。我們可以通過盒子模型簡單的美化一下(應該比預設情況下的要好看一點吧)
同樣，我們也可以對錶格、圖片等元素的邊框等定義不同的樣式。
對一個盒子模型，樣式定義好後就要考慮放哪了？所以就要對盒子進行定位。
盒子的定位有三種形式：
- 在普通流下的定位
- html元素預設的定位方式
- 行內元素在同一行內橫向排列
- 塊級元素則是豎向排列
- 在浮動屬性下的定位
- 在定位屬性的定位
注：盒子的預設定位是普通流下的定位。
如果我們不給元素加邊框(如下圖左)。但是當加上元素邊框時，就變成了下面的右圖了，看起來很擁擠，當某個元素有背景色時，就會看出元素重疊了。
所以適當的調整元素的邊框、外邊距、內邊距，可以使各個元素之間的佈局更合理。
還需要注意的是，有時我們定義了元素的邊框、外邊距、內邊距，也會造成元素之間的重疊。
這時我們可以使用display屬性了，這個屬性可以控制元素是以行元素顯示還是塊元素顯示或者不顯示。
display屬性
| 屬性 | 特點 |
|---|---|
| block |
|
| inline |
|
| none |
|
| ……………………… | ………………………………… |
需要定義display屬性的地方：
- 讓一個行內元素從新的一行開始。
- 讓一個塊元素和其他元素保持在一行。
- 控制行元素的寬度(例如垂直列表、導航欄等)。
- ……
我們定義多個行元素時，它們位於同一行：
當我們給這些行元素樣式定義中加上display: block時，它們就會按照塊元素的顯示方式顯示：
