元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設定對應的樣式分别為：盒子的邊框(border)、盒子内的内容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設定一邊的邊框，比如頂部邊框，可以按如下設定：
上面三句可以簡寫成一句：
設定其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設定左邊，換成'right'就是設定右邊，換成'bottom'就是設定底邊。
四個邊如果設定一樣，可以将四個邊的設定合并成一句：
設定盒子四邊的内間距，可設定如下：
上面的設定可以簡寫如下：
padding後面還可以跟3個值，2個值和1個值，它們分别設定的項目如下：
外邊距的設定方法和padding的設定方法相同，将上面設定項中的'padding'換成'margin'就是外邊距設定方法。
按照下面代碼制作頁面：
頁面顯示效果如下：
通過上面的頁面得出結論：盒子的width和height設定的是盒子内容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
盒子寬度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
1.在布局中，如果我想增大内容和邊框的距離，又不想改變盒子顯示的尺寸，應該怎麼做？
請制作圖中所示的标題：
1、設定元素水準居中： margin:x auto;
2、margin負值讓元素位移及邊框合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們将形成一個外邊距。合并後的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設定一邊的外邊距，一般設定margin-top
3、将元素浮動或者定位
在兩個盒子嵌套時候，内部的盒子設定的margin-top會加到外邊的盒子上，導緻内部的盒子margin-top設定失敗，解決方法如下：
1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用僞元素類：