博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS display 属性
阅读量:5075 次
发布时间:2019-06-12

本文共 1954 字,大约阅读时间需要 6 分钟。

本文转自<http://tiankonguse.com/blog/tiankonguse1362439415.html>个人网站

定义和用法

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

说明

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

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

默认值:inline

继承性:no

版本:CSS1

JavaScript 语法:object.style.display="inline"

实例

使段落生出行内框:p.inline{

display:inline;}

浏览器支持

所有主流浏览器都支持 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"。

 

可能的值

值                                    描述

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 属性的值。

 

HTML DOM display 属性

 

实例

本例设置不显示元素:

实例

本例设置不显示元素:

<html>

<head>
<script type="text/javascript">
function removeElement()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<h1>Hello</h1>
<p id="p1">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" οnclick="removeElement()"
value="Do not display paragraph" />
</body>
</html>

转载于:https://www.cnblogs.com/tiankonguse/archive/2012/08/21/2649597.html

你可能感兴趣的文章