一、元素分類
在講解CSS布局之前，我們需要提前知道一些知識(shí)，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素，其性質(zhì)和特點(diǎn)如下
二、CSS盒模型之邊框
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
語法：div{border:2px solid red; }
上述格式等價(jià)為
div{
border-width:2px;
/*thin | medium | thick（但不是很常用）最常還是用象素（px）*/
bordet-style:solid; /*dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）*/
border-color:red;/*可設(shè)為十六進(jìn)制顏色*/
}
css 樣式中允許只為一個(gè)方向的邊框設(shè)置樣式，但如果有想為 p 標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式應(yīng)采取如下方法
div{border-bottom:1px solid red;}
類似的，同樣可以使用下面代碼實(shí)現(xiàn)其它三邊(上、右、左)邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
三、CSS盒模型之寬度與高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
四、CSS盒模型之填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時(shí)針)
如以下代碼：
div{padding:20px 10px 15px 30px;}
注意順序，以上代碼可以等價(jià)寫為
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}
五、盒模型-邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;}
如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;}
總結(jié)一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。
