zoukankan      html  css  js  c++  java
  • (转)CSS的display属性

    原文链接:http://www.cnblogs.com/xieon1986/articles/1424022.html

    display属性中:
    block:块状显示,在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。
    inline:内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。

    重点:
    display属性的浏览器兼容表及用法详解

    该CSS属性用来设定对象如何显示。

    值:block | none | inline | inline-block | list-item | table-header -group | table-footer-group | inherit

    可用值 值的说明
    block 象块类型元素一样显示。
    none 缺省值。向行内元素类型一样显示。
    inline-block 象行内元素一样显示 ,但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示,并添加样式列表标记。
    table-header-group 显示在任何表格行和行组合之前,在头部标题之后。
    table-footer-group 显示在任何表格行和行组合之后,在底部标题前。

    除了以下元素 ,所有元素的 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

    所 有可见的 html 对象为 block 或者 inline。举例来说,div 对象就是一个块类型元素 (block element),而 span 对象则是一个行内元素 (inline element)。Block 元素另起一行,并可以包含其它 block 元素和 inline 元素。Inline 元素则不会另起一行 ,inline 元素包含其它 inline 元素或者数据。改变 display元素会影响周围的内容:

    • 将元素设为 block,会在该元素后换行。
    • 将元素设为 inline,会消除元素换行。
    • 将元素设为 none ,隐藏该元素内容。

    对比 visibility 属性, display 值设为 none 时,会消除该元素占据的空间。

    示例代码

    div {display:none;}

    下面的代码显示了 display 属性中block, inline, none的区别。

    <html >

    <head><title>不同display属性的代码示例</title></head>

    <body>

    <P ><SPAN id="oSpan" style="">This is a SPAN</SPAN> in a sentence.</P>

    <P>

    <input type=button value ="Inline" onclick ="oSpan.style.display='inline'">

    <input type=button value="Block" onclick ="oSpan.style.display='block'">

    <input type =button value="None" onclick="oSpan.style .display='none'">

    </P>

    </body>

    </html >

    演示示例

    参考:
    http://www.dhucst.com/supesite/html/33/t-233.html
    http://www.blabla.cn/html_ref/css_attrs/display.html

  • 相关阅读:
    浏览器缓存之灾
    js控制页面带参跳转
    解决 iOS7 通过tag 找不到 UITableViewCell 的子控件(转)
    Xcode工程添加第三方文件的详细分析 Create folder references for any added folders(转)
    iOS开发 frame 与 bounds 的区别与关系 转自隔叶黄莺
    关于UIGestureRecognizerState
    iOS 开发,工程中混合使用 ARC 和非ARC(转)
    iOS使用NSURLConnection发送同步和异步HTTP Request
    关于error:Cannot assign to 'self' outside of a method in the init family
    ios学习之UIWebView网页视图调整
  • 原文地址:https://www.cnblogs.com/lidongloveyiyi/p/3957653.html
Copyright © 2011-2022 走看看