掌握盒子的显示方式与可见性概念

来自CloudWiki
跳转至： 导航， 搜索

元素的显示方式

display:显示方式; display属性可指定元素的类型以决定元素的显示方式。 行内元素除了通过float浮动后可转换成块级元素外，也可通过display:block;将其设置为块级元素。 通过CSS“:hover”伪类或用JavaScript代码设置元素的display属性可实现动态隐藏元素为不可见或由不可见恢复为可见。 

inline      行内元素，在当前区域块内显示不换行（行内元素默认）
block      作为块级元素显示一个新段落（块级元素默认）
none       隐藏元素不显示，也不再占用页面空间，相当于该元素已不存在
list-itme    添加列表项的项目编号并另起一行显示在下一行—块级元素
inline-block 生成为行内块元素

 <html>
    <head>
       <style type="text/css">
          p {display: inline}
          div a{display:block;}
          #hidden {display: none}
       </style>
     </head>

    <body>
       <p>本例中的样式表把段落元素设置为行内元素。</p>

       <p>而 div 元素不会显示出来！</p>
      <div><a> 把a元素转化为块级元素</a>
           <a> 把a元素转化为块级元素</a>
           <a> 把a元素转化为块级元素</a>
           <a> 把a元素转化为块级元素</a>
           <a> 把a元素转化为块级元素</a>
      </div>

      <div id="hidden">div 元素的内容不会显示出来！</div>
    </body>
  </html>

元素的可见性visibility

visibility:可见性; 

visible   元素可见（独立元素的默认值）
hidden   元素隐藏不可见（但仍占据空间，显示为父元素背景色）
inherit   使用父元素的可见性（子元素的默认值）
collapse  用于表格中可删除一行或一列（不占空间），用于其他元素相当于hidden

无父元素的单独元素默认visible可见，子元素默认inherit继承父元素的可见性，若父元素不可见则子元素不可见，需要子元素当地可见时必须设置 visibility:visible覆盖为可见。 任何元素使用visibility:hidden只是不可见，原来占据的页面空间不变，隐藏后不会影响页面中其他元素的位置，需要动态可见时可通过CSS“:hover”伪类或JavaScript代码设置visibility:visible恢复可见。 

 <html>
    <head>
      <style type="text/css">
         h1.visible {visibility:visible}
         h1.invisible {visibility:hidden}
      </style>
    </head>

    <body>
       
       <h1 class="invisible">这是不可见的标题</h1>
       <h1 class="invisible">这是不可见的标题</h1>
       <h1 class="visible">这是可见的标题</h1>
    </body>

  </html>

总结：

  1. display: none 元素不可见，也不占用空间
  2. visibility:hidden 元素可见 ，但是占用空间
取自“http://www.openbrains.net/mediawiki/index.php?title=掌握盒子的显示方式与可见性概念&oldid=10471”