CSS中將每一個元素都設置為了一個矩形的盒子，便于方便的頁面布局。
盒子的組成部分
- 內容區，內邊距，邊框，外邊距。
邊框必須指定的三個樣式
- border-width：邊框的寬度；
- 如果指定了4個值，會分別設置給：上，右，下，左。（順時針方向）
- 三個值：上，左右，下；
- 兩個值：上下，左右；
- 另外兩個樣式同理。
- border-color：邊框的顏色；
- border-style：邊框的樣式；
大部分瀏覽器中，邊框寬度 和 顏色都有默認值，而邊框的樣式默認值都為none；
使用border設置邊框
同時設置4個邊框
不區分 樣式，顏色，寬度 的順序。
可以使用border-top:,border-right：,border-bottom：,border-left：；分別設置四個邊框。
內邊距（padding），指的是盒子的內容區與盒子邊框之間的距離。
內邊距會影響盒子的可見框大小，元素的背景會延伸到內邊距。
一共有四個方向的內邊距，可以通過：
- padding-top
- padding-right
- padding-bottom
- padding-left
來設置四個方向的內邊距
盒子的大小由 內容區，內邊距和邊框共同決定。
使用padding可以同時設置四個邊框的樣式，規則和border一致。
外邊距指的是當前盒子與其它盒子之間的距離。
它不會影響可見框大小，會影響盒子的位置。四個外邊距：
- margin-top
- margin-right
- margin_bottom
- margin_left
上外邊距，左外邊距 改變自己位置。（向左向上看齊）
下外邊距，右外邊距 改變別人位置。外邊距可以為 負值，使元素反方向移動。
margin還可以設置為auto：
- 單獨設置左，右為auto時為最大值；
- 同時設置左右為auto時水平居中。
- 垂直方向設置為auto，外邊距默認為0；（一般不用垂直方向）
相鄰的垂直外邊距的重疊
垂直方向的，相鄰，外邊距，重疊。（即取較大值，而非取和）父子元素的垂直外邊距相鄰時，子元素的外邊距會給父元素。
解決方法：
- 使其不相鄰：加邊框，內邊距。
- 直接使用父元素內邊距調整位置（父元素本身形狀會受影響）
瀏覽器的默認樣式
瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，
所以為很多的元素都設置了一些默認的margin和padding，
而它這些默認樣式，正常情況我們是不需要使用的。
往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統統去掉。
*｛
margin:0;
padding:0;
｝
內聯元素垂直padding不會影響布局，只會單純調整大小，相鄰的直接覆蓋。
文檔流
一個文檔就是網頁。（網頁即html文檔）
網頁是多層結構，文檔流就是最下面那層的地基。
塊元素 只有在文檔流中才會獨占一行（自上向下排列）。
當元素的高度或寬度的值為auto時，此時指定內邊距不會影響可見框的大小，而是會自動修改寬度，以適應內邊距。（高度被內容撐開）
