css樣式中display屬性由隱藏到顯示會擠掉其

2022-02-25 01:54:36 字數 5527 閱讀 2026

1樓:書香學程式設計

vue實踐-css樣式position/display/float屬性對比使用

css中display:block是什麼意思?

2樓:匿名使用者

如果用+做一個按鈕,這個能理解吧,就是 想通過 link 來實現跳轉,但是看起來是個按鈕,且不需要觸發事件。而且 css 也比 button 的好用。

這中情況下,如果不是「塊」block,那麼只要點到文字上時才會觸發,點到 按鈕但是沒點到字是不行的,但是用了 block 後,整個按鈕都可以承載 a 的link操作了

css中的display是設定元素顯示的方式,block是一塊狀元素的方式顯示,

inline是以內聯元素的方式顯示,none是不不顯示;

塊狀元素會單獨佔據一樣,其他元素跟他在同一行的會被迫換行,擠到下一行那裡去,inline則不會這樣。

3樓:楊欣

根據css規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的型別,每一個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為「block」,成為「塊級」元素(block-level);而span元素的預設display屬性值為「inline」,稱為「行內」元素。

塊級元素:

動佔據一定矩形空間,可以通過設定高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子;

行內元素:

自己的獨立空間,它是依附於其他塊級元素存在的,因此,對行內元素設定高度、寬度、內外邊距等屬性,都是無效的。

例子:連結 a 元素,在預設情況下是是「行內元素」,因此對a元素設定高度、寬度等屬性,都是無效的。而比如div,p,li,img等預設情況下的display屬性值就是「block」。

所以對於連結a來說只能這樣:display:block;強制將它改成塊元素。

看完概念看**:

div預設為 block

加了block屬性

加了block屬性

加了block屬性

沒加block屬性

沒加block屬性

沒加block屬性

4樓:匿名使用者

前端教程 頁面佈局 div+css 5.display屬性 學習猿地

5樓:匿名使用者

css中的display是設定元素顯示的方式,block是一塊狀元素的方式顯示,inline是以內聯元素的方式顯示,none是不不顯示;塊狀元素會單獨佔據一樣,其他元素跟他在同一行的會被迫換行,擠到下一行那裡去,inline則不會這樣

6樓:匿名使用者

將內聯元素轉為塊狀元素

7樓:匿名使用者

元素是以行內元素顯示還是塊元素顯示

8樓:浩星代靈

塊的意思,比如說導航條垂直排列

css中display怎麼做顯示或隱藏

9樓:顧傾城

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

display:block可以顯示一個塊元素,或者display:inline是顯示一個內聯元素。

display主要用的css樣式有以下三個:

display:block——顯示為塊級元素。

display:inline——顯示為內聯元素。

display:inline-block——顯示為內聯塊元素,表現為同行顯示並可修改寬高內外邊距等屬性。

10樓:軒轅沐飛

css中的display和visibility

1、隱藏一個元素可以通過把display屬性設定為"none",或把visibility屬性設定為"hidden"。但是請注意,這兩種方法會產生不同的結果。

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

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

擴充套件資料

css為html標記語言提供了一種樣式描述,定義了其中元素的顯示方式。css在web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

總體來說,css具有以下特點:

1、豐富的樣式定義:

css提供了豐富的文件樣式外觀,以及設定文字和背景屬性的能力;允許為任何元素建立邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文字的大小寫方式、修飾方式以及其他頁面效果。

2、易於使用和修改:

css可以將樣式定義在html元素的style屬性中,也可以將其定義在html文件的header部分,也可以將樣式宣告在一個專門的css檔案中,以供html頁面引用。總之,css樣式表可以將所有的樣式宣告統一存放,進行統一管理。

另外,可以將相同樣式的元素進行歸類,使用同一個樣式進行定義,也可以將某個樣式應用到所有同名的html標籤中,也可以將一個css樣式指定到某個頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應的樣式宣告進行修改。

3、多頁面應用:

css樣式表可以單獨存放在一個css檔案中,這樣我們就可以在多個頁面中使用同一個css樣式表。css樣式表理論上不屬於任何頁面檔案,在任何頁面檔案中都可以將其引用。這樣就可以實現多個頁面風格的統一。

4、層疊:

簡單的說,層疊就是對一個元素多次設定同一個樣式,這將使用最後一次設定的屬性值。例如對一個站點中的多個頁面使用了同一套css樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。

這些後來定義的樣式將對前面的樣式設定進行重寫,在瀏覽器看到的將是最後面設定的樣式效果。

5、頁面壓縮:

在使用html定義頁面效果的**中,往往需要大量或重複的**和font元素形成各種規格的文字樣式,這樣做的後果就是會產生大量的html標籤,從而使頁面檔案的大小增加。

11樓:鰟鮍魚

css部分其實就是如果上面是8個選項,下面就有對應的8個內容區都放在下面,然後用css隱藏7個display:none,只顯示預設的一個,當然一開始的時候你不隱藏就是顯示的,所以這時候沒必要寫顯示類

然後滑鼠點選的時候8個內容區隱藏1個內容區顯示(我為什麼不說7個隱藏1個顯示呢?那是便於你理解,如果你用js或者jq語句,就是在點選事件裡執行兩句語句,1.先讓所有內容區隱藏,2.

讓滑鼠點選哪個選項(如第3個)就讓相對應的哪個如第3個內容區顯示)

寫語句的時候你可以給想隱藏的通通加上display:none隱藏類,想顯示的加上display:block顯示類,在這裡它們有點反義詞的意思,如果使用jq也可以用hide()和show()方法,它們也是用來隱藏和顯示的

12樓:小鳥蟻人

按鈕1顯示內容1

按鈕1顯示內容2

效果圖:

13樓:書香學程式設計

vue實踐-css樣式position/display/float屬性對比使用

14樓:

只需設定

display:none;

即可將該元素設為隱藏的。預設的是顯示的,即不設定display即預設顯示。

isplay 屬性規定元素應該生成的框的型別,定義建立佈局時元素生成的顯示框型別。

display的值可以取如下的值:

none    此元素不會被顯示。

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

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

inline-block    行內塊元素。(css2.1 新增的值)

15樓:陽光的豆豆魚

參考** 如下

**電視劇電影

16樓:匿名使用者

display:none是隱藏,block顯示

17樓:十三栗子

可以通過設定display:none;命令將該元素設為隱藏。display命令預設的是顯示的,如果不設定display就預設顯示。

isplay 屬性規定元素應該生成的框的型別,定義建立佈局時元素生成的顯示框型別。

display的值可以取如下的值:

none    此元素不會被顯示。

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

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

inline-block    行內塊元素。(css2.1 新增的值)

怎樣通過css屬性隱藏頁面中的div?

18樓:lv暗夜峰

設定你元素的display屬性,可以控制元素生成的顯示框型別。你將元素設定為:display:none;的樣式就ok了!

19樓:匿名使用者

用display屬性,想隱藏那一段就把**加在那一段,例子如下

20樓:匿名使用者

在它的類名的css里加一句display:none;

或者,直接在該div里加一句style="display:none;"

display屬性 滑鼠懸停時顯示隱藏內容,

21樓:匿名使用者

這個你還真的要copy用js來實現,借用js的事件 mouseover

比如懸停在div#mydiv上,讓裡面的內容div#nr顯示。當然,前提是 div#nr 是隱藏的。

var mydiv = document.getelementbyid("mydiv");

var nr= document.getelementbyid("nr");

mydiv.onmouseover = function()

22樓:佛金石

當滑鼠停留在div上時將color和bgcolor都定義成和背景一樣的顏色不就看不見了

23樓:萌萌豆比萬萬歲

html: 123

css:

divdiv >p /*假設div裡面的p中的內容是隱藏的*/

div:hover >p /*滑鼠懸停在div上時顯版示權p中的內容*/

css中display怎麼做顯示或隱藏

display none可以隱藏某個元素,且隱藏的元素不會佔用任何空間。該元素不但被隱藏了,而且該元素原本佔用的空間也會從頁面佈局中消失。display block可以顯示一個塊元素,或者display inline是顯示一個內聯元素。display主要用的css樣式有以下三個 display bl...

css常用屬性有哪些,css的屬性有哪些

下面的是文字常用 文字對齊屬性 text align 文字修飾屬性 text decoration 多用於a連結文字縮排屬性 text indent 行高屬性 line height 顏色屬性 color 字型 font 其他的 display position float background 基...

css中對全域性進行設定color屬性,怎麼排除《a》標籤呢

假設你的footer的class為footer,想讓裡面的a的顏色設定成紅色,只要在css裡面這樣定義就行了 footer a color red 給a新增一個父元素的選擇符,這樣它的優先順序是大於全域性樣式的。css 如下 a link 全域性設定可以用萬用字元 設定屬性,排除的標籤可以單獨設定c...