CSS visibility 属性

深碍√TFBOYSˉ_ 2021-09-15 06:26 274阅读 0赞

## 属性定义及使用说明 ##

visibility属性指定一个元素是否是可见的。

**提示:**即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

## 浏览器支持 ##

![Internet Explorer][]![Firefox][]![Opera][]![Google Chrome][]![Safari][]

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

**注意：** ：Internet Explorer（包括IE8）没有版本支持属性值"inherit"或"collapse"。

--------------------

## 属性值 ##

<table style="border:0px; margin:4px 0px; padding:0px; border-collapse:collapse; width:729.091px; color:rgb(51,51,51); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,&quot;Noto Sans CJK SC&quot;,&quot;WenQuanYi Micro Hei&quot;,Arial,sans-serif; font-size:12px"> 
 <tbody style="border:0px; margin:0px; padding:0px"> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <th style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); background-color:rgb(85,85,85); vertical-align:top; text-align:left"> 值</th> 
   <th style="border:1px solid rgb(85,85,85); margin:0px; padding:3px; color:rgb(255,255,255); background-color:rgb(85,85,85); vertical-align:top; text-align:left"> 描述</th> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> visible</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 默认值。元素是可见的。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> hidden</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 元素是不可见的。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> collapse</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。</td> 
  </tr> 
  <tr style="border:0px; margin:0px; padding:0px; background-color:rgb(246,244,240)"> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; min-width:24px; line-height:2em; vertical-align:top"> inherit</td> 
   <td style="border:1px solid rgb(212,212,212); margin:0px; padding:7px 5px; font-size:13px; line-height:2em; min-width:24px; vertical-align:top"> 规定应该从父元素继承 visibility 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

visible   因为元素是可见的  可以在文档中显示提示信息那种

hidded  常用与商品的提示信息方面  鼠标移动移除有提示信息显示

collapse  表格隐藏可以 自己设定div删除行和列  不影响表格的布局

、

[Internet Explorer]: http://www.runoob.com/images/compatible_ie.gif
[Firefox]: http://www.runoob.com/images/compatible_firefox.gif
[Opera]: http://www.runoob.com/images/compatible_opera.gif
[Google Chrome]: http://www.runoob.com/images/compatible_chrome.gif
[Safari]: /images/20210813/9a3a239021fe47829e4b0972e0730798.png