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

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

 p 我是塊級標簽p /p BR font 我是行內(nèi)標簽font /font 

運行預覽之后p能使文本水平居中，但是font就不可以（如下）：

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

顯示模式的特性：

主要分為兩大類：

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

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

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

行內(nèi)塊元素：結(jié)合的行內(nèi)和塊級的有點，不僅可以對寬高屬性值生效，還可以多個標簽存在一行顯示；

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

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

1、塊級標簽轉(zhuǎn)換為行內(nèi)標簽：display:inline;

2、行內(nèi)標簽轉(zhuǎn)換為塊級標簽：display:block;

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

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

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

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

XML/HTML Code復制內(nèi)容到剪貼板

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

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

同理，要是塊級轉(zhuǎn)換為行內(nèi)了，文本也不能居中顯示了。

因為在html中，行內(nèi)元素被視為有文字特性的標簽，塊級能使文本水平居中，那么在塊級當中的行內(nèi)標簽被視為文本的特性，那么塊級使用text-align:center；的話，里面的行內(nèi)標簽會被像文本一樣水平居中在塊級標簽中：

不加text-align:center；時：

XML/HTML Code復制內(nèi)容到剪貼板

p{ padding:5px;background:green; color:red;} font{ background:yellow;}

XML/HTML Code復制內(nèi)容到剪貼板

 p  font 我是行內(nèi)標簽font /font font 我是行內(nèi)標簽font /font  /p 

加上text-align:center;后

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

這次主要是講一下html中顯示模式的特性，如果本文對您有幫助，記得推薦一下哦！

相關推薦：

css的顯示模式display記錄筆記

以上就是html塊級標簽行內(nèi)標簽的顯示模式的詳細內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。