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

一、塊級元素(block-level)

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

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

　　特點：（重要）

　　1、獨占父親一行，寬度默認是容器的100%；

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

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

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

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

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

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

　　特點：（重要）

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

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

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

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

　　Tips：

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

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

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

　　見上面的各自的特點。

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

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

　　特點：

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

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

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

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

　　在設計網(wǎng)頁的時候，可能需要給不同的標簽設置不同的顯示模式?？梢酝ㄟ^ display 實現(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;

知識點補充：css標簽的顯示模式

標簽的顯示模式

a、塊級元素（最典型的是  div標簽）

特點：

　　默認寬度  100%

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

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

   特點：

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

！??！3種模式的標簽是可以轉(zhuǎn)換的

  display  （顯示模型屬性）  

a、塊級標簽模式轉(zhuǎn)換為行內(nèi)標簽模式

div{display：inline；}

b、 行內(nèi)標簽模式轉(zhuǎn)換為塊級標簽模式

span{display：block；}

c、行內(nèi)標簽模式轉(zhuǎn)換為行內(nèi)塊標簽模式

a{display：inline-block；}

總結

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

最新評論