HTML中display屬性的屬性值有哪一些？display屬性是如何完成水平垂直居中的？

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

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

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

接著是block（塊級(jí)元素）這個(gè)屬性值：

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

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

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

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

對(duì)于最后一個(gè)none這個(gè)屬性值：

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

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

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

• none（元素不會(huì)被顯示）;

• block（元素將顯示為塊級(jí)元素，元素前后會(huì)帶有換行符）;

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

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

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

• table-row（元素會(huì)作為一個(gè)表格行顯示，類似 <tr>）;

• table-cell（元素會(huì)作為一個(gè)表格單元格顯示，類似 <td> 和 <th>）。

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

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

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

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

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

<div class="wrap">
 <div class="box">
  <div class="con">夢(mèng)幻雪冰</div>
 </div>
</div>

樣式：

.wrap {
    /*讓元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*讓元素以表格的單元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直對(duì)齊*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

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

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

缺點(diǎn)：

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

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

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

<div class="wrap">
 <div class="box">
  夢(mèng)幻雪冰
 </div>
</div>

樣式：

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

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

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

缺點(diǎn)：

IE6、IE7不支持

【相關(guān)推薦】

HTML5中web是什么？web存儲(chǔ)中的元素有哪些？

HTML IMG標(biāo)簽的屬性是有哪些？了解IMG標(biāo)簽的用法

以上就是HTML中display屬性的屬性值有哪些？display屬性是怎么實(shí)現(xiàn)水平垂直居中的？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！