CSS display 属性

飘逸的风11年前 (2015-04-05)前端7111

浏览器支持

IE Firefox Chrome Safari Opera

所有主流浏览器都支持 display 属性。

注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

定义和用法

display 属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

默认值: inline
继承性: no
版本: CSS1
JavaScript 语法: object.style.display="inline"

可能的值

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

相关文章

JS版的in_array和is_array

写PHP代码是我们可以使用is_array()方法来检测一个变量是否是数组,使用in_array()来判断一个变量是否包含在一个数组中,那么在JS中我们该,如何来判断呢?   下面来分享...

JS对cookie的操作

1、设置cookie 01 function addCookie(objName, objValue, objHours) { //添加cookie 02...

js判断undefined类型,undefined,null,NaN的区别

js判断undefined类型 今天使用showModalDialog打开页面,返回值时。当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined 所以自作聪明判断&nb...

JS键盘控制翻页代码

<script language="javascript"> <!-- document.onkeydown=nextpage var prevpage="prev.html"...

jquery 事件方法总结

Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"te...

jQuery下拉框美化插件DropKick

jQuery下拉框美化插件DropKick

DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己...

评论列表

启智网
11年前 (2015-05-29)

启智网 - 中国专业的个人博客博客平台,欢迎您的光临
http://www.7qizhi.com/

飘逸的风
11年前 (2015-04-06)

@wys.me:很久很久以前玩过,当时感觉和谷歌浏览器差不多,现在不清楚了。。。

wys.me
wys.me
11年前 (2015-04-06)

早上好。前面三种浏览器我常用,后面两个没玩过,好玩吗?

飘逸的风 回复:
@wys.me:很久很久以前玩过,当时感觉和谷歌浏览器差不多,现在不清楚了。。。
11年前 (2015-04-06)

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。