1.元素分類
在講解CSS布局之前纯陨，我們需要提前知道一些知識坛芽，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素翼抠、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素咙轩。
常用的塊狀元素有：
<div>、<p>阴颖、<h1>...<h6>活喊、<ol>、<ul>量愧、<dl>钾菊、<table>帅矗、<address>、<blockquote> 结缚、<form>
常用的內(nèi)聯(lián)元素有：
<a>损晤、<span>软棺、
红竭、<i>、<em>喘落、<strong>茵宪、<label>、<q>瘦棋、<var>稀火、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>赌朋、<input>
2.元素分類--塊級元素
什么是塊級元素凰狞？在html中<div>、 <p>沛慢、<h1>赡若、<form>、<ul> 和 <li>就是塊級元素团甲。設(shè)置display:block就是將元素顯示為塊級元素逾冬。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點躺苦。
a{display:block;}
塊級元素特點：
1身腻、每個塊級元素都從新的一行開始，并且其后的元素也另起一行匹厘。（真霸道嘀趟，一個塊級元素獨占一行）
2、元素的高度愈诚、寬度她按、行高以及頂和底邊距都可設(shè)置。
3扰路、元素寬度在不設(shè)置的情況下尤溜，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度汗唱。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>內(nèi)聯(lián)塊狀元素</title>
<style type="text/css">
div,p{background:pink;}
a{
display:block;
}
a{background:green;}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<p>段落1段落1<a>段落1</a>段落1段落1</p>
</body>
</html>
3. 元素分類--內(nèi)聯(lián)元素
在html中宫莱，<span>、<a>哩罪、<label>授霸、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素巡验。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素碘耳，從而使 div 元素具有內(nèi)聯(lián)元素特點显设。
div{
display:inline;
}
......
<div>我要變成內(nèi)聯(lián)元素</div>
內(nèi)聯(lián)元素特點：
1、和其他元素都在一行上辛辨；
2捕捂、元素的高度、寬度及頂部和底部邊距不可設(shè)置斗搞；
3指攒、元素的寬度就是它包含的文字或圖片的寬度，不可改變僻焚。
4.元素分類--內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素允悦、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素虑啤。(css2.1新增)隙弛，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽狞山。
inline-block 元素特點：
1全闷、和其他元素都在一行上；
2铣墨、元素的高度室埋、寬度、行高以及頂和底邊距都可設(shè)置伊约。
5.什么是盒模型
6.盒模型--邊框（一）
盒子模型的邊框就是圍繞著內(nèi)容及補白的線姚淆，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個屬性)屡律。
如下面代碼為 div 來設(shè)置邊框粗細(xì)為 2px腌逢、樣式為實心的、顏色為紅色的邊框：
div{
border:2px solid red;
}
上面是 border 代碼的縮寫形式超埋，可以分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1搏讶、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
2霍殴、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色媒惕，如:
border-color:#888;//前面的井號不要忘掉。
3来庭、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用）妒蔚，最常還是用象素（px）。
7.盒模型--邊框（二）
現(xiàn)在有一個問題，如果有想為 p 標(biāo)簽單獨設(shè)置下邊框肴盏，而其它三邊都不設(shè)置邊框樣式怎么辦呢科盛？css 樣式中允許只為一個方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現(xiàn)其它三邊(上、右菜皂、左)邊框的設(shè)置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
8.盒模型--寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的贞绵，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍恍飘。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界榨崩。
元素的高度也是同理。
比如：
css代碼：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代碼：
<body>
<div>文本內(nèi)容</div>
</body>
元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px常侣。在chrome瀏覽器下可查看元素盒模型蜡饵，如下圖：
9.盒模型--填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”胳施。填充也可分為上、右肢专、下舞肆、左(順時針)。如下代碼：
div{padding:20px 10px 15px 30px;}
順序一定不要搞混博杖〈豢瑁可以分開寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右剃根、下哩盲、左的填充都為10px;可以這么寫
div{padding:10px;}
如果上下填充一樣為10px，左右一樣為20px狈醉，可以這么寫：
div{padding:10px 20px;}
10.盒模型--邊界
元素與其它元素之間的距離可以使用邊界（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在邊框外眨猎。
