display顯示方式

2022-03-30 12:26:20 字數 1925 閱讀 3201

元素的diplay顯示方式有多種,隱藏、塊級、內聯、內聯-塊級。

1.display:none   隱藏

2.display:block; 表示塊級元素。

塊級元素會自動在前面和後面加上換行,並且在其上的width和height也能夠生效。

div預設是塊級元素

span預設是內聯元素(不會有換行,width和height也不會生效)

<

style

>

div,span

.dstyle

>

<

div>普通的div塊

div>

<

span

>這是普通span

span

>

<

span

>這是普通span

span

>

<

span

>這是普通span

span

>

<

span

class

="d"

>這是span,被改造成了塊級元素

3.display:inline; 表示內聯元素

內聯元素前後沒有換行,並且在其上的width和height也無效。 其大小由其中的內容決定

div預設是塊級元素

span預設是內聯元素

<

style

>

div,span

.sstyle

>

<

span

>這是普通span

span

>

<

span

>這是普通span

span

>

<

span

>這是普通span

span

>

<

div

class

="s"

>這是div,被改造成了內聯元素

4.內聯-塊級  

inline-block
內聯是不換行,但是不能指定大小

塊級時能制定大小,但是會換行

有時候,需要元素處於同一行,同時還能指定大小,這個時候,就需要用到內聯-塊級 inline-block

<

style

>

span

style

>

像這樣 ,每個都能設定寬度 ,同時還能在同一行。

<

br>

<

span

>蓋倫

span

>

<

span

>夢多醫生

span

>

<

span

>奈德麗

span

>

<

span

>蒸汽機械人

5.其他

其他的顯示方式像

list-item 顯示為列表

table 顯示為**

inline-table 顯示為前後無換行的**

table-cell 顯示為單元格

這些就不太常見了

DISPLAY分頁顯示

displaytag是乙個非常好用的 顯示標籤,適合mvc模式,其主頁在 一 最簡單的情況,未使用標籤 request.setattribute test new reportlist 6 標籤遍歷list裡的每乙個物件,並將物件裡的所有屬性顯示出來。一般用於開發的時候檢查物件資料的完整性。二 使用...

css之元素顯示方式的轉換(display的用法)

css元素的顯示方式的轉換 1 display樣式的none 段落1段落2 釋放該元素所佔的空間。2 visibility定義為hidden 段落1段落2 visibility 的hidden屬性,它雖然也能隱藏元素但是,並不釋放占用的空間 因此,一般情況下使用display的none值將元素隱藏。...

標籤顯示模式 display

1 塊級元素 block 常見得塊級元素有 1.自己獨佔一行 2.可以設定寬度和高度,外邊距以及內邊距都可以控制 3.寬度預設是容器 父級寬度 得100 2 行內元素 inline 常見的行內元素有 等1.一行可以顯示多個行內元素 2.高度和寬度直接設定是無效得 3.預設寬度就是他本身內容得寬度 3...