CSS標簽顯示模式的示例分析

這篇文章給大家分享的是有關CSS標簽顯示模式的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

一、塊級元素(block-level)

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

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

　　特點：（重要）

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

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

　　3、不設置高度，高度由內容決定；

　　4、可以容納內聯元素和其他塊元素；

二、行內元素(inline-level)

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

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

　　特點：（重要）

　　1、和相鄰行內元素在一行上，換行會有空隙；

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

　　3、默認寬度就是它本身內容的寬度；

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

　　Tips：

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

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

三、塊級元素和行內元素區別

　　見上面的各自的特點。

四、行內塊元素（inline-block）

　　在行內元素中有幾個特殊的標簽&mdash;&mdash;<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，稱它們為 行內塊元素。

　　特點：

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

　　2、默認寬度就是它本身內容的寬度；

　　3、高度，行高、外邊距以及內邊距都可以控制。

五、標簽顯示模式轉換 display

　　在設計網頁的時候，可能需要給不同的標簽設置不同的顯示模式。可以通過 display 實現。

　　1、塊轉行內：display:inline;

　　2、行內轉塊：display:block;

　　3、塊、行內元素轉換為行內塊： display: inline-block;

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

標簽的顯示模式

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

特點：

　　默認寬度  100%

　　可以容納塊級元素和內聯元素

b、行內元素 （最典型的是  span標簽）

   特點：

c、行內塊元素（最典型的是 img標簽）

！！！3種模式的標簽是可以轉換的

  display  （顯示模型屬性）  

a、塊級標簽模式轉換為行內標簽模式

div{display：inline；}

b、 行內標簽模式轉換為塊級標簽模式

span{display：block；}

c、行內標簽模式轉換為行內塊標簽模式

a{display：inline-block；}

感謝各位的閱讀！關于“CSS標簽顯示模式的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！