首頁 > web前端 > css教學 > css裡的display屬性有啥作用

css裡的display屬性有啥作用

王林
發布: 2020-11-13 09:41:04
原創
9867 人瀏覽過

css裡的display屬性的作用是規定元素應該產生的框的類型。 display屬性是前端開發常用的屬性,常用的屬性值有block、none、inline、inline-block。

css裡的display屬性有啥作用

網頁上的每個元素都是一個矩形框。 display 屬性規定元素應該產生的框的類型。 display屬性是我們在前端開發中常常使用的屬性。

(學習影片建議:css影片教學

常用屬性值介紹:

block    區塊物件的預設值。以該值為物件之後新增一行    

none    隱藏物件。與visibility屬性的hidden值不同,其不為隱藏的物件保留其物理空間    

inline    內嵌物件的預設值。用該值將從物件中刪除行    

inline-block    行內區塊元素。這個屬性值融合了inline 和 block 的特性,也就是它既是內聯元素,又可以設定width和height。

一、display:block    

1、block: 將元素將顯示為區塊級元素,元素前後會帶有換行符,通常用於將行內元素轉換為區塊級元素時使用。那什麼是塊級元素呢?什麼是行內元素呢?

2、區塊級元素:

總是以一個區塊的形式表現出來,佔領一整行。若干同級塊元素會從上方依序排列(使用float屬性除外)。

可以設定高度、寬度、各個方向外補丁(margin)以及各個方向的內補丁(padding)。

當元素寬度(width)沒有設定時,它的寬度時其容器的100%,除非我們給它設定了固定的寬度。

區塊級元素中可以嵌套其他區塊級元素或行內元素。

區塊級元素的display屬性值預設為block。

3、行內元素

它不會單獨佔據一整行,而是只佔領自身的寬度和高度所在的空間,也就是元素的寬高度是由它的文本內容撐開。若干同級行內元素會由左至右(即某個行內元素可以和其他行內元素共處一行),由上至下依序排列。

行內元素不可以設定高度、寬度,其高度一般由其字體的大小來決定,其寬度由內容的長度控制。

行內元素只能設定左右的margin值和左右的padding值,而無法設定上下的margin值和上下的padding值。因此我們可以透過設定左右的padding值來改變行內元素的寬度。

行內元素一般不可以包含區塊級元素。

區塊級元素的display屬性值預設為inline。

二、display:none

display:none這個值表示元素不會顯示。當你想要某個元素隱藏時,就可以為某個元素設定這個屬性,它就會消失在網頁中,但元素並沒有在文件中刪除,只是隱藏在網頁結構中,不在網頁中顯示而已。但如果你想要元素顯示的話,可以為元素設定display:block,元素就可以顯示在網頁中了。

三、display:inline

display:inline 的作用可以將一個區塊級元素轉換成行內元素,那麼這個區塊級元素將不能再設定寬和高以及上下方向的margin和padding。這個區塊級元素實際的寬度和高度都是auto,並不是我們設定的值。

四、display:inline-block

根據名字來看,我們可以得到它是結合了inline和block並保留了它們的特性。所以設定了inline-block屬性的元素既具有block元素可以設定width和height屬性的特性,又保持了inline元素不換行的特性。

相關推薦:CSS教學

以上是css裡的display屬性有啥作用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板