關(guān)于顯示html,行內(nèi)標(biāo)簽?zāi)Ｊ降臏\談

　　今天講課的時候，講到了html中的標(biāo)簽的顯示模式，大致分為塊級標(biāo)簽和行內(nèi)標(biāo)簽。那么初學(xué)者在剛使用標(biāo)簽的時候會發(fā)現(xiàn)有些屬性在一些標(biāo)簽上不起作用，比如寬、高、水平居中等，其實這個屬性的使用只有在塊級標(biāo)簽上使用才起作用。個人認(rèn)為這個也是初學(xué)者非常容易忽略的地方，所以我就把它記下來！

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

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板 p{color:red;text-align:center;}
font{color:red;text-align:center;} XML/HTML Code復(fù)制內(nèi)容到剪貼板

我是塊級標(biāo)簽p

我是行內(nèi)標(biāo)簽font

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

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

　　顯示模式的特性：

　　主要分為兩大類：

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

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

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

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

　　在html中顯示模式分為塊級和行內(nèi)，其中常用的塊級有：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é)就會想了，難道我就不可以控制span或者font的寬高了嗎？可以的，那么我們這次拋開浮動和定位不說，就說通過display屬性來將它們互相轉(zhuǎn)換：

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

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

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

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

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

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

　　XML/HTML Code復(fù)制內(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)元素被視為有文字特性的標(biāo)簽，塊級能使文本水平居中，那么在塊級當(dāng)中的行內(nèi)標(biāo)簽被視為文本的特性，那么塊級使用text-align:center；的話，里面的行內(nèi)標(biāo)簽會被像文本一樣水平居中在塊級標(biāo)簽中：

　　不加text-align:center；時：

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板 p{padding:5px;background:green;color:red;} font{background:yellow;} XML/HTML Code復(fù)制內(nèi)容到剪貼板

我是行內(nèi)標(biāo)簽font我是行內(nèi)標(biāo)簽font

　　加上text-align:center;后

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板 p{padding:5px;background:green;color:red;text-align:center;} font{background:yellow;}

【顯示html,行內(nèi)標(biāo)簽?zāi)Ｊ降臏\談】相關(guān)文章：

收集的常用的HTML標(biāo)簽01-22

關(guān)于Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細(xì)線顯示?03-29

過濾HTML代碼08-29

HTML的語言剖析03-30

HTML5和HTML4有何區(qū)別？03-28

HTML5的發(fā)展03-27

HTML文件的增強標(biāo)記12-26

HTML語言的網(wǎng)頁教程03-29

什么是HTML相關(guān)的介紹03-30