標籤：href 空間 center pen 解決 label 文字 代碼 strong
一、元素分類在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;}
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;
可以設定寬高
一行能有多個
五、什麼是盒模型視頻課程
從零開始學習html（十一）CSS盒模型——上
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
