顯示display元素常見屬性整理

2021-07-15 17:23:20 字數 1114 閱讀 9389

常用的display屬性值:

none此元素不會被顯示並且不占用空間;

block此元素顯示為塊級元素,此元素前後會帶有換行符;

inline預設,此元素會被顯示為內聯元素,元素前後沒有換行符;

inline-block行內塊元素,前後無換行符;

inherit規定應該從父類元素繼承display屬性的

內聯元素block element

內聯元素

內聯元素inline-block

內聯元素

內聯元素inline

內聯元素

內聯元素list-item

內聯元素

內聯元素run-in

內聯元素

內聯元素none

內聯元素將hr的diaplay設定為inline

將hr的inline-block設定為inline

將hr的inline-block設定為inline-flex

在ie瀏覽器裡的ie11中的預覽效果圖

注:隱藏乙個元素可以通過把display屬性設定為"none",或把visibility屬性設定為"hidden"。

但是請注意,這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。

display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。

另一種表達!

display 屬性設定或返回元素的顯示型別。

html 中的元素大多是"內聯"或"塊"元素:乙個內聯元素,在其左側和右側都是浮動內容。乙個塊元素填滿整個行,並沒有什麼可顯示在其左側或右側。

display 屬性還允許作者顯示或隱藏乙個元素。與 visibility 屬性類似。然而,如果您設定 display:none,將隱藏整個元素,如果您設定 visibility:hidden,元素的內容將不可見,但元素保持原來的位置和大小。

CSS屬性 display 顯示屬性

演示示例 visibility 屬性?該css屬性用來設定物件如何顯示。的預設值都為 inline。值 block none inline inline block list item table header group table footer group inherit 可用值值的說明 blo...

元素常見的居中方式

1.行內文字居中,未設定高度,定位,浮動的情況下失效 text align center,水平居中 line height 行高,垂直居中 2.內元素的居中 text align center,水平居中 vertical align middle,垂直居中 3.元素水平居中,父元素和居中元素設定寬 ...

塊級元素 行內元素 display屬性

定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有...