html visibility属性,CSS属性参考 | visibility
CSS visibility 属性用于隐藏一个元素。
CSS visibility属性用于隐藏一个元素。当取值为hidden时用于隐藏非表格元素,当取值为collapse时用于隐藏表格行或列。
使用visibility属性隐藏的元素只是在视觉上不可见,元素并不会被从页面中移除,元素仍然会影响页面的布局。这是和使用display属性来隐藏元素不同的地方。使用display属性来隐藏的元素会被从页面中移除,元素原来占据的位置会被其它元素替代。
使用visibility属性并设置值为hidden的元素,在效果上就好像该元素是完全透明的,但是它仍然会占据原来所在的位置。
当一个父元素使用了visibility: hidden之后,它的子元素可以通过设置visibility: visible来使它们可见。这是和display属性有区别的第二个地方。
使用visibility属性隐藏后的元素不会接收鼠标事件pointer-events,但是如果它的子元素是可见的,那么事件仍然会在子元素上被触发。
有些现代浏览器对visibility: collapse不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成visibility: hidden的效果。建议不要使用该属性值。
visibility:collapse会改变表格的布局,嵌套在其被折叠的单元格中的表格也会同样被折叠,除非专门为此嵌套表格指定visibility: visible。
官方语法
visibility: visible | hidden | collapse | inherit
参数:
visible:默认值,使元素可见。
hidden:使元素隐藏(变为透明),但是不会将元素从页面中移除,元素仍然占据原来的位置。其子元素可以通过设置值visible使子元素可见。
collapse:用于表格行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间(与将 display: none用于表格的行/列上的效果相当)。但是其他行与列的宽和高不会重新计算,行与列的宽高计算依然会将被设为collapse的行和列考虑进去。这是用于快速从表格中删除一行或一列,而无需重新计算表格其他元素的宽和高。(用于其他元素时,collapse效果与hidden相同。)
inherit:继承父元素的visibility属性。
visibility属性的初始值为visible。
应用范围
visibility属性可以应用所有元素上。
示例代码
/* 隐藏段落 */
p{ visibility: hidden; }
/* 只有 class 设为 showme 的才会显示*/
p.showme { visibility: visible; }
/* 折叠 class 设为 col 的行 */
tr.col { visibility: collapse; }
在线演示
下面的例子演示隐藏父元素,但是其子元素可见的效果。
visibility是一个可以动画的属性,使用鼠标滑过这里来使父元素变得可见。
浏览器支持
所有现代浏览器都支持CSS visibility属性,包括:Chrome, Firefox, Safari, Opera, Internet Explorer, 以及 Android 和 iOS。
某些现代浏览器对visibility: collapse不支持或是不完全支持。下面列出了一些浏览器解析visibility: collapse时的问题:
webkit内核的浏览器会折叠一行,但是它占据的位置仍然会存在。
Chrome和Safari浏览器不会折叠列或列组。
Firefox浏览器在设置了border-collapse: collapse之后,隐藏
或元素时不会隐藏边框。
在任何浏览器中,如果一个列被折叠,列中单元格的文本不会被显示。
Opera浏览器中(带WebKit前缀)会折叠除了表格单元格之外的任何东西。
相关阅读
html visibility属性,CSS属性参考 | visibility相关推荐
- html left属性,CSS属性参考 | left
CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...
- html图片缩小属性,CSS属性实现同比例缩小图片
本文向大家描述一下如何使用CSS属性同比例缩小图片,一般情况下如果要把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 符合Web标 ...
- Dom基础 特殊的节点 获取元素节点的内容 获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- css所有缩写属性,CSS属性简写整理
<写出高效整洁的css的13条规则>里面有提到要尽量简写css.具体怎么简写呢,总结如下: 盒子的内外边距(margin和padding) 以margin为例,padding相同.盒子有上 ...
- jq添加标签属性_前端-jq创建标签/添加属性/css属性
jq创建标签 var ptag = $(' '); jq添加属性如href,id,class,name等 $('#content').attr('class/id/name/href', 'activ ...
- web表格在css中属性,CSS属性之表格(Table)_html/css_WEB-ITnose
HTML为表格定义了3个元素用于对行进行分组,它们是 thead (表头).tbody (表格主体).tfoot (脚注). 在HTML4中文档结构中的 tfoot 必须出现在 tbody之前,HTM ...
- 【重识 HTML + CSS】基本 CSS 属性
[重识 HTML + CSS] CSS 简介 内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则 设置网页的图标 常用 CSS 属性 初识 CS ...
- 常见的CSS属性和值CascadingStyleSheets
字体 文本 背景 位置 边框 列表 其他 CSS中修饰字体的属性 属 性 描 述 属 性 值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等, ...
- html中collapse代码怎么写,CSS里的visibility属性有个鲜为人知的属性值:collapse
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS里的visibility属性,相信你用过不下几百 ...
最新文章
- 基于投影仪的定位技术
- parse函数 python_python的parse_args()函数
- vue项目搜索历史功能的实现
- mysql 导出用户权限_MySQL中导出用户权限设置的脚本分享
- php中的fpm_详解PHP中PHP-FPM是什么?有什么用?
- 用zlib库读取单个压缩文档[转]
- x210 debug口当普通串口使用
- BugkuCTF-Crypto题MathEnglish
- 织梦dedecms系统修改文章描述调用字数的方法
- xcode cocos2dx 3.x mac工程 当assert(cond)触发断点,但cond却为0
- Java equalsIgnoreCase() 方法
- android 4g wifi内外网,android 中判断网络状态5G 4G 3G 还是wifi
- dao获取到mysql存储函数_GreenDao3.0使用
- 一款功能强大、高颜值、官方出品的Redis可视化工具
- 打开客户端出现 sorry this application cannot run under a virtual machine错误
- Python爬虫——全网获取音乐
- 网易云音乐8.0版本背后的野心
- 20191009 csp-s模拟T3(并查集)
- 编程中遇到的优秀网站收藏
- 系统引导盘制作与Windows系统安装
热门文章
- 51 单片机 蜂鸣器
- python生成日期列表_PYTHON生成日期维度表
- 爆刷PAT(甲级)——之【1148】 Werewolf - Simple Version(20 分)——思维
- ADN: Artifact Disentanglement Network for Unsupervised Metal Artifact Reduction
- htc a620d 刷android,千元WP8双核智能机 HTC 8S电信版评测
- [Python3]数独计算器
- windows7经典开机音乐_Windows 7正式退休,微软出手,网友含泪告别情怀:感谢11年陪伴...
- openGauss Summit 2021 | 汇聚数据库创新力量 逐梦数字时代星辰大海
- 小时,速度,筒仓团队和甘特斯
- linux与pe到移动硬盘,将PE放入移动硬盘的简单方法几点疑问-已解决(转自深