html~display的使用

eternalshallow發表於2017-12-14

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

首先我們來說一下inline(n內聯元素):

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

接著是block(塊級元素)這個屬性值:

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

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

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

html~display的使用

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


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

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


如果覺得有幫助請給個喜歡唄~~~
有錯誤的話,歡迎指正,本人郵箱:2372734044@qq.com。

相關文章