CSS樣式 display有哪些作用?

2021-08-15 12:51:16 字數 3514 閱讀 2824

其實就是要你說清楚該屬性有哪些值,每個值都有什麼作用,這個題目可以答得很簡單,但要答全也並非是一件容易的事情。

(頭部元素都是)

示例:div+css製作**

html**

[html]

view plain

copy

<

divclass

="table"

>

<

h2class

="table-caption"

>

花名冊:

h2>

<

divclass

="table-column-group"

>

<

divclass

="table-column"

>

div>

<

divclass

="table-column"

>

div>

<

divclass

="table-column"

>

div>

div>

<

divclass

="table-header-group"

>

<

ulclass

="table-row"

>

<

liclass

="table-cell"

>

序號li

>

<

liclass

="table-cell"

>

姓名li

>

<

liclass

="table-cell"

>

年齡li

>

ul>

div>

<

divclass

="table-footer-group"

>

<

ulclass

="table-row"

>

<

liclass

="table-cell"

>

footer

li>

<

liclass

="table-cell"

>

footer

li>

<

liclass

="table-cell"

>

footer

li>

ul>

div>

<

divclass

="table-row-group"

>

<

ulclass

="table-row"

>

<

liclass

="table-cell"

>1li

>

<

liclass

="table-cell"

>

john

li>

<

liclass

="table-cell"

>

19li

>

ul>

<

ulclass

="table-row"

>

<

liclass

="table-cell"

>2li

>

<

liclass

="table-cell"

>

mark

li>

<

liclass

="table-cell"

>

21li

>

ul>

<

ulclass

="table-row"

>

<

liclass

="table-cell"

>3li

>

<

liclass

="table-cell"

>

kate

li>

<

liclass

="table-cell"

>

26li

>

ul>

div>

div>

css**

[html]

view plain

copy

ul  

.table  

.table-caption  

.table-column-group  

.table-column  

.table-row-group  

.table-row  

.table-row-group .table-row:hover,.table-footer-group .table-row:hover  

.table-cell  

.table-header-group  

.table-footer-group  

效果圖

行式布局 flex-flow: row;

html**

[html]

view plain

copy

<

divclass

="div-flex-box"

>

<

divclass

="flex-1"

>

div>

<

divclass

="flex-2"

>

div>

<

divclass

="flex-3"

>

div>

div>

css**

[css]

view plain

copy

.div-flex-box   

.flex-1

.flex-2

.flex-3  

效果圖

display有哪些值

引數 block 塊物件的預設值。用該值為物件之後新增新行 none 隱藏物件。與visibility屬性的hidden值不同,其不為被隱藏的物件保留其物理空間 inline 內聯物件的預設值。用該值將從物件中刪除行 compact 分配物件為塊物件或基於內容之上的內聯物件 marker 指定內容在...

css樣式display屬性

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

CSS樣式 顯示模式display

顯示模式共三種 block inline inline block 第一種 block 塊級元素 常見塊級元素 div h1 h6 p ul ol li,其中div元素經常被當做布局元素使用 塊級元素的特點 所有的塊級元素自己占用一行,無論寬度是多少 塊級元素可以設定寬度 width 和高度 hei...