display:block display:inline-block 的屬性、呈現和作用

weiqier發表於2019-10-14

display是控制元件的css屬性之一,表示的是顯示模式。none表示不顯示在網頁上,但是程式碼存在;bolck是此元素將顯示為塊級元素,此元素前後會帶有換行符。

在CSS中,塊級物件元素會單獨佔一行顯示,多個block元素會各自新起一行,並且可以設定width,height屬性;而內聯物件元素前後不會產生換行,一系列inline元素都在一行內顯示,直到該行排滿,對inline元素設定width,height屬性無效。

我們有個時候既希望元素具有寬度高度特性,又具有同行特性,這個時候我們可以使用inline-block。在CSS中通過display:inline-block對一個物件指定inline-block屬性,簡單來說就是將物件呈現為inline物件,但是物件的內容作為block物件呈現。之後的內聯物件會被排列在同一行內。比如我們可以給一個link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性。

Practice makes perfect !

相關文章