HTML中display屬性的屬性值是什么

這篇文章主要為大家展示了“HTML中display屬性的屬性值是什么”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML中display屬性的屬性值是什么”這篇文章吧。

　　display在這里我說四個最常用的屬性值inline、block、inlin-block、none。

　　首先我們來說一下inline（n內(nèi)聯(lián)元素）：

　　該屬性值為默認(rèn)值。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。一般不會設(shè)置這個屬性值。個人理解，其實(shí)跟正常的行內(nèi)元素沒什么區(qū)別，用的比較多的還是block和inline-block。

　　接著是block（塊級元素）這個屬性值：

　　這個屬性值是比較有意思的，設(shè)置為塊級元素獨(dú)占一行，就換行來說和p標(biāo)簽的效果一樣，但是這個屬性值設(shè)置后，作為一個塊級元素他就具備了寬、高，和別的塊級元素的間距margin著屬性的設(shè)置，還有間距的設(shè)置padding，但是不能設(shè)置行高（line-height）。

　　還有inline-block（內(nèi)聯(lián)塊）這個屬性值：

　　這個屬性值是比較強(qiáng)大的，本人剛開始學(xué)的時候基本上見到需要設(shè)置的只要不是換行的就會設(shè)置這個屬性值，一來他可以作為塊級元素，可以具有block的特性，另一方面，由于本人初學(xué)，對于居中的設(shè)置比較麻煩，所有使用這個屬性值可以設(shè)置行高，從而使文字居中，方便易用。

　　對于這個導(dǎo)航欄的實(shí)現(xiàn)這幾個屬性很好用，主要用到block和inline-block這兩個屬性值，inline-block作為同一行的幾個元素的實(shí)現(xiàn)，block做為元素間換行的實(shí)現(xiàn)。大家可以試試。

　　對于最后一個none這個屬性值：

　　個人覺得用于隱藏元素比較方便，做那種鼠標(biāo)浮動的時候更改display的屬性值來達(dá)到顯示與隱藏元素的效果。

　　HTML中display一共有哪些比較常用的值呢，讓我們一起來看看

　　HTML中display在通常的項目開發(fā)中比較容易被使用的值主要有：

　　none（元素不會被顯示）;

　　block（元素將顯示為塊級元素，元素前后會帶有換行符）;

　　inline（元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符）;

　　inline-block（行內(nèi)塊元素。CSS2.1新增的值）;

　　table（元素會作為塊級表格來顯示，類似<table>，表格前后帶有換行符）;

　　table-row（元素會作為一個表格行顯示，類似<tr>）;

　　table-cell（元素會作為一個表格單元格顯示，類似<td>和<th>）。

　　display實(shí)現(xiàn)的水平垂直居中！

　　利用position和margin進(jìn)行元素水平垂直居中；想必大家還是比較熟悉，經(jīng)常用的。但不知道你是否使用過display：table與table-cell對元素進(jìn)行水平垂直居中呢？

　　以下就是利用display：table-cell進(jìn)行元素水平垂直居中的的兩種方法了：

　　1.利用display：table與table-cell進(jìn)行元素水平垂直居中

　　結(jié)構(gòu)：

　　<divclass="wrap">

　　<divclass="box">

　　<divclass="con">夢幻雪冰</div>

　　</div>

　　</div>

　　樣式：

　　.wrap{

　　/*讓元素以表格形式渲染*/

　　display:table;

　　height:400px;

　　width:400px;

　　background:#fcf;

　　}

　　.box{

　　/*讓元素以表格的單元素格形式渲染*/

　　display:table-cell;

　　/*使用元素的垂直對齊*/

　　vertical-align:middle;

　　}

　　.con{

　　width:200px;

　　height:200px;

　　margin:0auto;

　　background:#999;

　　}

　　優(yōu)點(diǎn)：

　　這種方法不會像前面的兩種方法一樣，有高度的限制，此方法可以要據(jù)元素內(nèi)容動態(tài)的改變高度，從而也就沒有空間的限制，元素的內(nèi)容不會因?yàn)闆]足夠的空間而被切斷或者出現(xiàn)難看的滾動條。

　　缺點(diǎn)：

　　不足之處呢？這種方法只適合現(xiàn)代瀏覽器，在IE6-7下無法正常運(yùn)行。

　　2.利用display：table-cell進(jìn)行元素水平垂直居中

　　結(jié)構(gòu)：

　　<divclass="wrap">

　　<divclass="box">

　　夢幻雪冰

　　</div>

　　</div>

　　樣式：

　　.wrap{

　　display:table-cell;

　　width:400px;

　　height:400px;

　　background:#fcf;

　　vertical-align:middle;

　　}

　　.box{

　　width:200px;

　　height:200px;

　　margin:0auto;

　　background:#999;

　　}

　　優(yōu)點(diǎn)：

　　這種方法的優(yōu)點(diǎn)和方法三是一樣的，不會有高度的限制。

　　缺點(diǎn)：

　　IE6、IE7不支持

以上是“HTML中display屬性的屬性值是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！