一、元素分類 在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。 常用的塊狀元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用 ...
一、元素分類
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
二、元素分類--塊級元素
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>內聯塊狀元素</title> 6 <style type="text/css"> 7 div,p{background:pink;} 8 </style> 9 </head> 10 <body> 11 <div>div1</div> 12 <div>div2</div> 13 <p>段落1段落1段落1段落1段落1</p> 14 </body> 15 </html>元素分類--塊級元素
什麼是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。
設置display:block就是將元素顯示為塊級元素。如下代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點：
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
來試一試：感受一下塊級元素的特點
在代碼編輯器中輸入各種塊級標簽，試一試他們的特點。
三、元素分類--內聯元素
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>行內元素標簽</title> 6 <style type="text/css"> 7 a,span,em{ 8 background:pink;/*設置a、span、em標簽背景顏色都為粉色*/ 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.imooc.com">慕課網</a> 15 <span>33333</span> 16 <span>44444</span><em>555555</em> 17 </body> 18 </html>元素分類--內聯元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。
當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素，從而使 div 元素具有內聯元素特點。
div{
display:inline;
}
......
<div>我要變成內聯元素</div>
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯元素之間有一個間距問題。
來試一試：感受一下內聯元素的特點
在代碼編輯器中輸入各種內聯元素標簽，試一試他們的特點。
行內元素之間會產生間隙bug問題的場景：
1、當行內元素之間有“回車”、“tab”、“空格”時就會出現間隙。
如下代碼：
<div>
<a>1</a>
<a>2</a>
<span>33333</span>
<span>44444</span>
<em>555555</em>
</div>
解決方法：
1、寫在一行，之間不要有空格之類的符號。
2、使用font-size:0
div{font-size:0;}
a,span,em{font-size:16px;}
<div>
<a>我是鏈接</a>
<span>我是行空間</span>
</div>
四、元素分類--內聯塊狀元素
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>內聯塊狀元素</title> 6 <style type="text/css"> 7 a{ 8 9 width:20px;/*在預設情況下寬度不起作用*/ 10 height:20px;/*在預設情況下高度不起作用*/ 11 background:pink;/*設置背景顏色為粉色*/ 12 text-align:center; /*設置文本居中顯示*/ 13 } 14 </style> 15 </head> 16 <body> 17 <a>1</a> 18 <a>2</a> 19 <a>3</a> 20 <a>4</a> 21 </body> 22 </html>元素分類--內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，
代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增)，<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
來試試，仿分頁頁碼設計
在代碼編輯器中大家可以看到我們為 a 元素設置了寬和高，但都沒有起到作用，
原因是a在預設的時候是內聯元素，內聯元素是不可以設置寬和高的。
在編輯器的第8行，輸入：
display:inline-block;
將塊元素或行內元素轉換為行塊內元素：是為後面的課程做鋪墊，
你只要知道行內元素不能設置高寬，轉換後可以設置就行了，塊狀元素不能在一行顯示轉換後可以在一行顯示就行了。
a標簽變為內聯塊狀元素後，居中設置的意思是，數字在每一個塊內裡面是居中顯示的，而不是整個a標簽在頁面上居中
inline:內聯元素{
1，不能設置width和height；
2，多個行內元素排成一行，直到一行排不下，才會換新一行；
3，只可以設置水平方向的邊距，如：margin-left,margin-right,padding-left,padding-right.
}
block:塊級元素{
1，塊級元素獨占一行；
2，可以設置width和height，預設寬度為一整行，除非單獨設置寬度；
3，可以設置margin和padding屬性。
}
inline-block{
簡而言之就是讓元素既可以在一行內顯示，又可以設置寬高邊距等。
}
塊級元素預設占一整行 無論它的寬有沒有一整行寬 沒用完的空間不准其他元素使用
屬性:display:block;
預設占一整行 預設寬度一整行 可以設置寬高 一行只有自己
內聯(行內)元素 定義的是一段內容(文本)這一行內沒占用完的空間其他內聯元素可以共同使用
屬性:display:inline;
沒法設置寬高 一行可以有多個 大小由內容決定
內聯塊狀元素(行內塊級元素)
屬性:display:inline-block;
可以設置寬高
一行能有多個
