zoukankan      html  css  js  c++  java
  • CSS display 属性


    本文转自tiankonguse<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" onclick="removeElement()"
    value="Do not display paragraph" />

    </body>
    </html>

  • 相关阅读:
    Django基础六之ORM中的锁和事务
    Django学习之model进阶
    Django基础八之cookie和session
    Django基础五之django模型层(二)多表操作
    Django基础五之django模型层(一)单表操作
    Django基础四之模板系统
    webpack最佳入门实践系列(4)
    webpack最佳入门实践系列(3)
    webpack最佳入门实践系列(2)
    webpack最佳入门实践系列(1)
  • 原文地址:https://www.cnblogs.com/tiankonguse/p/2649597.html
Copyright © 2011-2022 走看看