html塊級標籤,行內標籤,行內塊標籤的顯示模式有哪些

這次帶給大家html塊級標籤,行內標籤,行內塊標籤的顯示模式有哪些，使用html塊級標籤,行內標籤,行內塊標籤顯示模式的注意事項有哪些，下面就是實戰案例，一起來看看。

今天講課的時候，講到了html中的標籤的顯示模式，大致分為區塊級標籤和行內標籤。那麼初學者在剛使用標籤的時候會發現有些屬性在某些標籤上不起作用，例如寬、高、水平居中等，其實這個屬性的使用只有在區塊級標籤上使用才會起作用。個人認為這也是初學者非常容易忽略的地方，所以我就把它記下來！

例如會有一種情況，給p標籤水平居中有作用，但是給font加水平居中屬性就不起作用（如下）：

p{ color:red; text -align:center;}
font{color:red; text-align:center;}    

我是區塊級標籤p

我是行內標籤font  

運行預覽之後p能使文字水平居中，但是font就不可以

那麼以上這個問題就和html中的顯示模式有關了：

顯示模式的特性：

主要分為兩大類：

區塊級元素：獨佔一行，對寬高的屬性值生效；如果不給寬度，區塊級元素就預設為瀏覽器的寬度，即就是100%寬；

行內元素：可以多個標籤存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！

其中還有一種結合兩種模式有點的顯示模式：

行內塊元素：結合的行內和區塊級的有點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；

在html中顯示模式分為區塊級和行內，其中常用的區塊級有：p,p,h1~h6,ul,li,dl,dt,dd.. .  常用的行內有：span，font,b,u,i,strong,em,a,img,input，其中img和input為行內塊元素。

那麼有的同學就會想了，難道我就不可以控制span或font的寬高了嗎？可以的，那麼我們這次拋開浮動和定位不說，就說透過display屬性來將它們互相轉換：

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

只要給對應的標籤使用這個display這個屬性，取對應的值，就可以將顯示模式互相轉換。

在這之前有說過 text-align這個屬性是否生效，原因是塊級標籤如果不給寬度，塊級元素就默認為瀏覽器的寬度，即就是100%寬，那麼在100 %的寬度中居中生效；但是行內元素的寬完全是靠內容撐開，所以寬度就是內容撐開的寬，我們給個背景測試看看：

所以塊級是在盒子中間居中了，但是因為行內元素的寬就是內容寬，沒有可居中的空間，所以text-align:center;就沒有作用；但是如果給font轉換為塊級就不一樣了：

p{ background:green; color:red; text-align:center;}    
font{background:green;color:red; text-align:center;display:block;}

同理，要是區塊級轉換為行內了，文字也不能居中顯示了。

因為在html中，行內元素被視為有文字特性的標籤，塊級能使文本水平居中，那麼在塊級當中的行內標籤被視為文本的特性，那麼塊級使用text -align:center；的話，裡面的行內標籤會被像文字一樣水平居中在區塊級標籤中：

不加text-align:center；時：

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

加上text -align:center;後

p{ padding:5px;background:green; color:red;text-align:center;}    
font{ background:yellow;}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

HTML基礎知識，關於超連結設定的樣式的詳細介紹

HTML的基礎知識.關於css樣式表與樣式屬性的詳細介紹

HTMLa標籤的href屬性指定相對路徑與絕對路徑使用方法

#HTMLa標籤的href屬性指定相對路徑與絕對路徑使用方法#########

以上是html塊級標籤,行內標籤,行內塊標籤的顯示模式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！