第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > html中display有哪些属性值 css中display属性是什么及其各个值的作用和用法

html中display有哪些属性值 css中display属性是什么及其各个值的作用和用法

时间:2020-09-23 21:49:37

相关推荐

html中display有哪些属性值 css中display属性是什么及其各个值的作用和用法

当你查看别人写的css代码的时候,经常会看到display:block、none、inline、table等,那么在css中display属性到底是什么呢,都可以取什么值,每个值又有什么样的作用,到底怎么使用呢?虽然好奇害死猫,但是对于像我这样对网页技术非常感兴趣的人来说,估计都会想方设法把他给搞清楚,搞明白的,下面就和我一起来探索display属性的奥秘吧~~~!!

首先,display属性是什么?

本人英文不行,小学水平,只好拿着display这个单词去请教谷歌翻译大哥了,谷歌大哥果然没让我失望,我个人大概理解为:display属性很有可能是控制显示的。然后又到w3school查看了一下它给出的定义“display 属性规定元素应该生成的框的类型。”也就是说设置了display属性的元素会根据display的取值在浏览器中进行不同的显示。

那么display属性可以取哪些值,每个值的作用又是什么呢?

值 作用

none 此元素不会被显示。

block 此元素将显示为块级元素,此元素前后会带有换行符。也就是说其他元素不能在其后面并列显示。

inline 默认。此元素会被显示为内联元素,元素前后没有换行符。在元素后面删除换行符,多个元素可以在一行内并列显示。

inline-block 行内块元素。(CSS2.1 新增的值)

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示(类似

inline-table 此元素会作为内联表格来显示(类似

table-row-group 此元素会作为一个或多个行的分组来显示(类似

)。

table-header-group 此元素会作为一个或多个行的分组来显示(类似 )。

table-footer-group 此元素会作为一个或多个行的分组来显示(类似

)。

table-row 此元素会作为一个表格行显示(类似

)。

table-column-group 此元素会作为一个或多个列的分组来显示(类似

)。

table-column 此元素会作为一个单元格列显示(类似

)

table-cell 此元素会作为一个表格单元格显示(类似

和 )

table-caption 此元素会作为一个表格标题显示(类似

)

inherit 规定应该从父元素继承 display 属性的值。

默认情况下,所有元素的display值都为inline,而以下元素除外:

元素 display 属性值

ADDRESS block

BLOCKQUOTE block

BODY block

CENTER block

COL block

COLGROUP block

DD block

DIR block

DIV block

DL block

DT block

FIELDSET block

FORM block

FRAME none

hn block

HR block

IFRAME block

LEGEND block

LI list-item

LISTING block

MARQUEE block

MENU block

OL block

P block

PLAINTEXT block

PRE block

TABLE block

TBODY none

TD block

TFOOT none

TH block

THEAD none

TR block

UL block

XMP block

关于display元素的用法,我们可以根据他每个值的作用和我们的实际需求来设置相对应的值也就是:“display”+“:”+“你需要的值”。好了,就先说到这里吧,这个只是个人查阅相关资料后的个人见解,如果有哪里说的不对的地方,欢迎访问村姑网留言指正,谢谢~~!!

(注:欢迎转载,转载请注明来源于“村姑网-”,谢谢~!)

《css中display属性是什么及其各个值的作用和用法》地址:/article/10.html,本文来自村姑网,您身边的IT专家

,转载请注明出处,您的支持是我们创作的源泉~!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。