標(biāo)簽的類型(顯示模式) HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。

一、塊級元素(block-level)

　　每個塊元素通常都會獨(dú)自占據(jù)一整行或多整行，可以對其設(shè)置寬度、高度、對齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

　　常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 標(biāo)簽是最典型的塊元素。

　　特點(diǎn)：（重要）

　　1、獨(dú)占父親一行，寬度默認(rèn)是容器的100%；

　　2、高度，行高、外邊距以及內(nèi)邊距都可以控制；（支持寬高的設(shè)置）

　　3、不設(shè)置高度，高度由內(nèi)容決定；

　　4、可以容納內(nèi)聯(lián)元素和其他塊元素；

二、行內(nèi)元素(inline-level)

　行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式。

　　常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 標(biāo)簽最典型的行內(nèi)元素。

　　特點(diǎn)：（重要）

　　1、和相鄰行內(nèi)元素在一行上，換行會有空隙；

　　2、高、寬無效，但水平方向的padding和margin可以設(shè)置，垂直方向的無效；（不支持寬高）

　　3、默認(rèn)寬度就是它本身內(nèi)容的寬度；

　　4、行內(nèi)元素只能容納文本或則其他行內(nèi)元素。（a特殊）

　　Tips：

　　1、只有 文字才 能組成段落 因此 p 里面不能放塊級元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素。

　　2、鏈接里面不能再放鏈接。

三、塊級元素和行內(nèi)元素區(qū)別

　　見上面的各自的特點(diǎn)。

四、行內(nèi)塊元素（inline-block）

　　在行內(nèi)元素中有幾個特殊的標(biāo)簽——<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，稱它們?yōu)?行內(nèi)塊元素。

　　特點(diǎn)：

　　1、和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙；

　　2、默認(rèn)寬度就是它本身內(nèi)容的寬度；

　　3、高度，行高、外邊距以及內(nèi)邊距都可以控制。

五、標(biāo)簽顯示模式轉(zhuǎn)換 display

　　在設(shè)計網(wǎng)頁的時候，可能需要給不同的標(biāo)簽設(shè)置不同的顯示模式。可以通過 display 實(shí)現(xiàn)。

　　1、塊轉(zhuǎn)行內(nèi)：display:inline;

　　2、行內(nèi)轉(zhuǎn)塊：display:block;

　　3、塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

知識點(diǎn)補(bǔ)充：css標(biāo)簽的顯示模式

標(biāo)簽的顯示模式

a、塊級元素（最典型的是  div標(biāo)簽）

特點(diǎn)：

　　默認(rèn)寬度  100%

　　可以容納塊級元素和內(nèi)聯(lián)元素

b、行內(nèi)元素 （最典型的是  span標(biāo)簽）

   特點(diǎn)：

c、行內(nèi)塊元素（最典型的是 img標(biāo)簽）

?。。?種模式的標(biāo)簽是可以轉(zhuǎn)換的

  display  （顯示模型屬性）  

a、塊級標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為行內(nèi)標(biāo)簽?zāi)Ｊ?/p>

div{display：inline；}

b、 行內(nèi)標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為塊級標(biāo)簽?zāi)Ｊ?/p>

span{display：block；}

c、行內(nèi)標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換為行內(nèi)塊標(biāo)簽?zāi)Ｊ?/p>

a{display：inline-block；}

總結(jié)

到此這篇關(guān)于CSS 標(biāo)簽顯示模式的文章就介紹到這了,更多相關(guān)css 顯示模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論