今天講課的時候，講到了html中的標籤的顯示模式，大致分為塊級標籤和行內標籤。那麼初學者在剛使用標籤的時候會發現有些屬性在一些標籤上不起作用，比如寬、高、水平居中等，其實這個屬性的使用只有在塊級標籤上使用才起作用。個人認為這個也是初學者非常容易忽略的地方，所以我就把它記下來！
比如會有一種情況，給p標籤水平居中有作用，但是給font加水平居中屬性就沒作用（如下）：
1.p
>
2.font
1
>
我是塊級標籤pp
>
>
>
我是行內標籤fontfont
>
那麼以上這個問題就和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屬性來將它們互相轉換：
1、塊級標籤轉換為行內標籤：display:inline;
2、行內標籤轉換為塊級標籤：display:block;
3、轉換為行內塊標籤：display：inline-block;
只要給對應的標籤使用這個display這個屬性，取相應的值，就可以將顯示模式互相轉換。
在這之前有說過 text-align這個屬性是否生效，原因是塊級標籤如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬，那麼在100%的寬度中居中生效；但是行內元素的寬完全是靠內容撐開，所以寬度就是內容撐開的寬，我們給個背景測試看看：
所以塊級是在盒子中間居中了，但是因為行內元素的寬就是內容寬，沒有可居中的空間，所以text-align:center;就沒有作用；但是如果給font轉換為塊級就不一樣了：
同理，要是塊級轉換為行內了，文字也不能居中顯示了。
因為在html中，行內元素被視為有文字特性的標籤，塊級能使文字水平居中，那麼在塊級當中的行內標籤被視為文字的特性，那麼塊級使用text-align:center；的話，裡面的行內標籤會被像文字一樣水平居中在塊級標籤中：
不加text-align:center；時：
1.p
2.font
1.
>
2.
>
我是行內標籤fontfont
>
>
我是行內標籤fontfont
加上text-align:center;後
1.p
2.font
這次主要是講一下html中顯示模式的特性。 元素（塊 行內 行內塊
塊元素的特點 1.支援所有樣式 2.塊級元素 獨佔一行3.塊級元素預設寬度和父元素一樣 常用塊元素塊級元素 一般 div p ol ul h1 h6 li dl dt dd等都是 初始化 樣式重置 1.實際開發中，我們會把這些預設的樣式在樣式定義開頭清除掉，清除掉這些預設樣式，方便我們寫自己的定義的...
常見行內 塊級 行內塊級元素
1 元素分類 一 塊級元素 block element 獨佔一行，可以定義寬高。二 內聯元素 也叫行內元素 inline element 不獨佔一行，無法定義寬高。三 內聯塊級元素 inline block element 不獨佔一行，同時可以定義寬高。2 常見內聯元素 strong em del ...
行內元素 塊級元素和行內塊級元素
而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...