html標籤的顯示模式（塊級標籤，行內標籤，行內塊標籤）

今天講課的時候，講到了html中的標籤的顯示模式，大體分爲塊級標籤和行內標籤。那麼初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起做用，好比寬、高、水平居中等，其實這個屬性的使用只有在塊級標籤上使用才起做用。我的認爲這個也是初學者很是容易忽略的地方，因此我就把它記下來！

好比會有一種狀況，給p標籤水平居中有做用，可是給font加水平居中屬性就沒做用（以下）：

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

 

<p>我是塊級標籤p</p>
<font>我是行內標籤font</font>

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

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

顯示模式的特性：

主要分爲兩大類：

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

行內元素：能夠多個標籤存在一行，對寬高屬性值不生效，徹底靠內容撐開寬高！

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

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

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

那麼有的同窗就會想了，難道我就不能夠控制span或者font的寬高了嗎？能夠的，那麼咱們此次拋開浮動和定位不說，就說經過display屬性來將它們互相轉換：

一、塊級標籤轉換爲行內標籤：display:inline;

二、行內標籤轉換爲塊級標籤：display:block;

三、轉換爲行內塊標籤：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;}

 

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