首頁 > web前端 > html教學 > HTML中display屬性的屬性值有哪些? display屬性是怎麼實現水平垂直居中的?

HTML中display屬性的屬性值有哪些? display屬性是怎麼實現水平垂直居中的?

寻∝梦
發布: 2018-08-15 15:01:23
原創
14434 人瀏覽過

HTML中display屬性的屬性值有哪些?都有什麼意義?還有HTML中display屬性是怎麼實現水平垂直居中的?今天這篇文章要跟大家介紹HTML中display屬性的值,還有HTML中display屬性的值是怎麼實現水平垂直居中的,介紹了兩種方法。

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

首先我們先來看看inline(n內嵌元素):

該屬性值為預設值。此元素會被顯示為內聯元素,元素前後沒有換行符號。一般不會設定這個屬性值。個人理解,其實跟正常的行內元素沒什麼差別,用的比較多的還是block和inline-block。

接著是blo​​ck(區塊級元素)這個屬性值:

這個屬性值是比較有意思的,設定為區塊級元素獨佔一行,就換行來說和p標籤的效果一樣,但是這個屬性值設定後,作為一個區塊級元素他就具備了寬、高,和別的區塊級元素的間距margin著屬性的設置,還有間距的設定padding,但是不能設定行高(line-height)。

還有inline-block(內聯區塊)這個屬性值:

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

對於這個導覽列的實作這幾個屬性很好用,主要用到block和inline-block這兩個屬性值,inline-block作為同一行的幾個元素的實現,block做為元素間換行的實作。大家可以試試。

對於最後一個none這個屬性值:

個人覺得用來隱藏元素比較方便,做那種滑鼠浮動的時候會改變display的屬性值來達到顯示與隱藏元素的效果。

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

HTML中display在通常的專案開發中比較容易被使用的數值主要有: