CSS中，有以下幾種標(biāo)簽類型：塊級(jí)標(biāo)簽治唤、行內(nèi)標(biāo)簽棒动、行內(nèi)-塊級(jí)標(biāo)簽。
塊級(jí)標(biāo)簽
特點(diǎn)：
1.獨(dú)占一行的標(biāo)簽宾添；
2.能隨時(shí)設(shè)置寬度和高度船惨。
eg：div、p缕陕、h1掷漱、h2、ul榄檬、li
<div> div標(biāo)簽 </div>
<p> 段落標(biāo)簽 </p>
<!--列表標(biāo)簽-->
<ul>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
<li> 我是無序列表 </li>
</ul>
<!--標(biāo)題標(biāo)簽:h標(biāo)簽-->
<h1>我是h1標(biāo)簽</h1>
<h2>我是h2標(biāo)簽</h2>
行內(nèi)標(biāo)簽
特點(diǎn)：
1.多個(gè)行內(nèi)標(biāo)簽?zāi)芡瑫r(shí)顯示在一行卜范；
2.寬度和高度取決于內(nèi)容的尺寸。
eg：span鹿榜、a海雪、label
<span>我是行內(nèi)標(biāo)簽</span>
<a href="#">我是超鏈接</a>
行內(nèi)-塊級(jí)標(biāo)簽
特點(diǎn)：
1、多個(gè)行內(nèi)-塊級(jí)標(biāo)簽可以顯示在同一行舱殿；
2奥裸、能夠隨時(shí)設(shè)置寬度和高度。
eg：input沪袭、button
<input placeholder="我是輸入框">
<button>我是按鈕</button>
我把以上三種標(biāo)簽類型完整展示出來湾宙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常見的標(biāo)簽類型</title>
<style>
div{
background-color: red;
}
p{
background-color: yellow;
}
span{
background-color: aqua;
width: 300px;
height: 90px;
}
a{
background-color: blueviolet;
}
input{
/*background-color: burlywood;*/
width: 200px;
height: 100px;
}
button{
/*background-color: pink;*/
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<!--塊級(jí)標(biāo)簽-->
<div> div標(biāo)簽 </div>
<div> div標(biāo)簽 </div>
<div> div標(biāo)簽 </div>
<p> 段落標(biāo)簽 </p>
<!--行內(nèi)標(biāo)簽-->
<span>我是行內(nèi)標(biāo)簽</span>
<span>我是行內(nèi)標(biāo)簽</span>
<span>我是行內(nèi)標(biāo)簽</span>
<a href="#">我是超鏈接</a>
<!--行內(nèi)—塊級(jí)標(biāo)簽-->
<input placeholder="我是輸入框">
<button>我是按鈕</button>
</body>
</html>
顯示效果如下：
Paste_Image.png
如果我們想要讓這幾種標(biāo)簽類型相互轉(zhuǎn)換，那就要用到
display屬性冈绊。
display：規(guī)定元素應(yīng)該生成的框的類型侠鳄。
實(shí)現(xiàn)相互轉(zhuǎn)換需要用到的值：
none 此元素不會(huì)被顯示。
block 此元素將顯示為塊級(jí)元素死宣，此元素前后會(huì)帶有換行符伟恶。
inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素毅该，元素前后沒有換行符博秫。
inline-block 行內(nèi)塊元素。（CSS2.1 新增的值）
通過顯示效果來進(jìn)行對(duì)比眶掌，在<style>中添加display代碼：
<style>
div{
background-color: red;
/* 隱藏標(biāo)簽 */
/*display: none;*/
/*改變標(biāo)簽的類型：塊級(jí)——>行內(nèi)標(biāo)簽*/
/*display: inline;*/
/*改變標(biāo)簽的類型：塊級(jí)——>行內(nèi)-塊級(jí)標(biāo)簽*/
display: inline-block;
}
p{
background-color: yellow;
}
span{
background-color: aqua;
width: 300px;
height: 90px;
/*改變標(biāo)簽的類型：行內(nèi)——>塊級(jí)標(biāo)簽*/
/*display: block;*/
/*改變標(biāo)簽的類型：行內(nèi)——>行內(nèi)-塊級(jí)標(biāo)簽*/
display: inline-block;
}
a{
background-color: blueviolet;
}
input{
/*background-color: burlywood;*/
width: 200px;
height: 100px;
}
button{
/*background-color: pink;*/
width: 100px;
height: 80px;
}
</style>
顯示效果如下：
Paste_Image.png
