CSS中的display屬性

2022-07-29 08:00:12 字數 882 閱讀 8528

display中文為顯示的意識,顯而易見它的功能就是為了控制頁面元素顯示方式

display中為我們提供了很多屬性,其中最常見的有:

none屬性代表著元素不會被顯示

比如很多**的頂部導航欄都會有二級選單,只有當我們的滑鼠移動或點選時二級選單才會顯示出來。這是就可以使用到display:none這個屬性。

乙個簡單的例子:

html**:

css**:

.button ul>li

.button ul>li>ul

.button ul>li:hover>ul

block的意思為「阻塞」,它的功能是使元素變為塊級元素

所謂塊級元素就是指每個元素的類容單獨佔據一行,我們常見的、、、等都是塊級元素

inline屬性的功能是把元素變為行內元素

所謂行內元素就是指元素不會單獨佔據一行,它只會佔據自己規定的高和寬。我們在**中常見的瀑布流樣式就是使用的行內元素。、等都屬於行內元素。

但是行內元素的大小是固定的,我們無法設定其大小,這時我們還需要使用display:block將其變為塊級元素後才可以改變它的大小。這是元素既有行類元素的特性又可以為其設定大小。

inline-block屬性就是同時有塊級元素和行內元素的屬性

inline-block就與上面的為inline屬性設定為block屬性的功能一樣,就是使元素就可以為其設定大小又可以具有行內元素的特徵。

css中display屬性詳解

display屬性值 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。inline block 行內塊元素。css2.1 新增的值 list item 此元素會作為列表顯示。run in 此元素...

css 中display屬性認識

none 設定元素不顯示。相當於對應元素不存在,不佔據空間。可以改善重排和重繪,這個不懂,需要去了解 inline 行內元素,顯示在一行。設定的width,height,text align都不起作用。設定line height可以讓文字垂直居中 block 設定元素為塊級。inline block...

細說CSS中的display屬性

相信大部分奮戰在前端的,尤其在前端攻城的過程中,有一種越陷越深的感覺,不錯,一如前端深似海,從此妹子是浮雲啊,前端上手容易,深入難啊!下面我就css中的display屬性講下我自己所積累的,與大家共享下,大神勿噴,我只是路過的。css中display屬性在w3c教程上有簡要說明 當然我是覺得講的不夠...