今天講課的時(shí)候，講到了html中的標(biāo)簽的顯示模式，大致分為塊級(jí)標(biāo)簽和行內(nèi)標(biāo)簽。那么初學(xué)者在剛使用標(biāo)簽的時(shí)候會(huì)發(fā)現(xiàn)有些屬性在一些標(biāo)簽上不起作用，比如寬、高、水平居中等，其實(shí)這個(gè)屬性的使用只有在塊級(jí)標(biāo)簽上使用才起作用。個(gè)人認(rèn)為這個(gè)也是初學(xué)者非常容易忽略的地方，所以我就把它記下來(lái)！
比如會(huì)有一種情況，給p標(biāo)簽水平居中有作用，但是給font加水平居中屬性就沒(méi)作用（如下）：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- p{ color:red; text-align:center;}<BR>font{color:red; text-align:center;}
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <p>我是塊級(jí)標(biāo)簽p</p><BR><font>我是行內(nèi)標(biāo)簽font</font>
運(yùn)行預(yù)覽之后p能使文本水平居中，但是font就不可以（如下）：
那么以上這個(gè)問(wèn)題就和html中的顯示模式有關(guān)了：
顯示模式的特性：
主要分為兩大類：
塊級(jí)元素：獨(dú)占一行，對(duì)寬高的屬性值生效；如果不給寬度，塊級(jí)元素就默認(rèn)為瀏覽器的寬度，即就是100%寬；
行內(nèi)元素：可以多個(gè)標(biāo)簽存在一行，對(duì)寬高屬性值不生效，完全靠?jī)?nèi)容撐開寬高！
其中還有一種結(jié)合兩種模式有點(diǎn)的顯示模式：
行內(nèi)塊元素：結(jié)合的行內(nèi)和塊級(jí)的有點(diǎn)，不僅可以對(duì)寬高屬性值生效，還可以多個(gè)標(biāo)簽存在一行顯示；
在html中顯示模式分為塊級(jí)和行內(nèi)，其中常用的塊級(jí)有：div,p,h1~h6,ul,li,dl,dt,dd... 常用的行內(nèi)有：span，font,b,u,i,strong,em,a,img,input，其中img和input為行內(nèi)塊元素。
那么有的同學(xué)就會(huì)想了，難道我就不可以控制span或者font的寬高了嗎？可以的，那么我們這次拋開浮動(dòng)和定位不說(shuō)，就說(shuō)通過(guò)display屬性來(lái)將它們互相轉(zhuǎn)換：
1、塊級(jí)標(biāo)簽轉(zhuǎn)換為行內(nèi)標(biāo)簽：display:inline;
2、行內(nèi)標(biāo)簽轉(zhuǎn)換為塊級(jí)標(biāo)簽：display:block;
3、轉(zhuǎn)換為行內(nèi)塊標(biāo)簽：display：inline-block;
只要給對(duì)應(yīng)的標(biāo)簽使用這個(gè)display這個(gè)屬性，取相應(yīng)的值，就可以將顯示模式互相轉(zhuǎn)換。
在這之前有說(shuō)過(guò) text-align這個(gè)屬性是否生效，原因是塊級(jí)標(biāo)簽如果不給寬度，塊級(jí)元素就默認(rèn)為瀏覽器的寬度，即就是100%寬，那么在100%的寬度中居中生效；但是行內(nèi)元素的寬完全是靠?jī)?nèi)容撐開，所以寬度就是內(nèi)容撐開的寬，我們給個(gè)背景測(cè)試看看：
所以塊級(jí)是在盒子中間居中了，但是因?yàn)樾袃?nèi)元素的寬就是內(nèi)容寬，沒(méi)有可居中的空間，所以text-align:center;就沒(méi)有作用；但是如果給font轉(zhuǎn)換為塊級(jí)就不一樣了：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- p{ background:green; color:red; text-align:center;}
- font{background:green;color:red; text-align:center;display:block;}
同理，要是塊級(jí)轉(zhuǎn)換為行內(nèi)了，文本也不能居中顯示了。
因?yàn)樵趆tml中，行內(nèi)元素被視為有文字特性的標(biāo)簽，塊級(jí)能使文本水平居中，那么在塊級(jí)當(dāng)中的行內(nèi)標(biāo)簽被視為文本的特性，那么塊級(jí)使用text-align:center；的話，里面的行內(nèi)標(biāo)簽會(huì)被像文本一樣水平居中在塊級(jí)標(biāo)簽中：
不加text-align:center；時(shí)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- p{ padding:5px;background:green; color:red;}
- font{ background:yellow;}
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <p>
- <font>我是行內(nèi)標(biāo)簽font</font> <font>我是行內(nèi)標(biāo)簽font</font>
- </p>
加上text-align:center;后
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- p{ padding:5px;background:green; color:red;text-align:center;}
- font{ background:yellow;}
這次主要是講一下html中顯示模式的特性，如果本文對(duì)您有幫助，記得推薦一下哦！
原文地址：http://www.cnblogs.com/xcaocao/archive/2016/07/07/5649828.html
