html中display屬性的屬性值概念是什么

本篇內容介紹了“html中display屬性的屬性值概念是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

常用屬性值介紹：

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元素不換行的特性。

“html中display屬性的屬性值概念是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！