一個盒子我們會分成幾個部分：
內(nèi)容區(qū)(content)
內(nèi)邊距(padding)
邊框(border)
外邊距(margin)
內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。
如果沒有為元素設置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認和盒子大小是一致的。
通過width和height兩個屬性可以設置內(nèi)容區(qū)的大 小。
width和height屬性只適用于塊元素。
顧名思義，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。
默認情況下width和height不包含padding的大小。
使用padding屬性來設置元素的內(nèi)邊距。
例如：
padding:10px 20px 30px 40px
這樣會設置元素的上、右、下、左四個方向的內(nèi)邊距
內(nèi)邊距
padding:10px 20px 30px;
分別指定上、左右、下四個方向的內(nèi)邊距
padding:10px 20px;
分別指定上下、左右四個方向的內(nèi)邊距
padding:10px;
同時指定上左右下四個方向的內(nèi)邊距
同時在css中還提供了padding-top、padding-right、padding-
right、padding-bottom分別用來指定四個方向的內(nèi)邊距
邊框可以設置多種樣式：
none（沒有邊框）
dotted（點線）
dashed（虛線）
solid（實線）
double（雙線）
groove（槽線）
ridge（脊線）
inset（凹邊）
outset（凸邊）
外邊距
外邊距是元素邊框與周圍元素相距的空間。
使用margin屬性可以設置外邊距。
用法和padding類似，同樣也提供了四個方向的 margin-top/right/bottom/left。
當將左右外邊距設置為auto時，瀏覽器會將左右外 邊距設置為相等，所以這行代碼margin:0 auto可 以使元素居中。
相對定位
每個元素在頁面的文檔流中都有一個自然位置。相 對于這個位置對元素進行移動就稱為相對定位。周 圍的元素完全不受此影響。
當將position屬性設置為relative時，則開啟了元素 的相對定位。
當開啟了相對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
絕對定位
絕對定位指使元素相對于html元素或離他最近 的祖先定位元素進行定位。
當將position屬性設置為absolute時，則開啟 了元素的絕對定位。
當開啟了絕對定位以后，可以使用top、right、 bottom、left四個屬性對元素進行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box1{
/*
使用width來設置盒子內(nèi)容區(qū)的寬度
使用height來設置盒子內(nèi)容區(qū)的高度
width和height只是設置的盒子內(nèi)容區(qū)的大小，而不是盒子的整個大小，盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定
/
width: 300px;
height: 300px;
/設置背景顏色/
background-color: #bfa;
/為元素設置邊框
要為一個元素設置邊框必須指定三個樣式
border-width:邊框的寬度
border-color:邊框顏色
border-style:邊框的樣式
/
/border-width: 10px;/
/
使用border-width可以分別指定四個邊框的寬度
如果在border-width指定了四個值
則四個值會分別設置給上、右、下、左，按照順時針的方向設置的
如果指定三個值
則三個值會分別設置給上、左右、下
如果指定兩個值
則兩個值會分別設置給上下、左右
如果指定一個值，則四邊全都是該值
