html中设置元素隐藏显示,细说HTML元素的隐藏和显示
CSS文档对HTML的显示和隐藏有2个属性可供选择:
1、display
2、visiblity
这2个有什么区别呢?
display:
display版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:有
语法:
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
取值:
block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none : CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
list-item : CSS2 将块对象指定为列表项目。并可以添加可选项目标志/** 以下值未支持 **/compact : CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
marker : CSS2 未支持。指定内容在容器对象之前或之后。要使用此参数,对象必须和 :after 及 :before 伪元素一起使用
inline-table : CSS2 未支持。将表格显示为无前后换行的内联对象或内联容器
run-in : CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
table : CSS2 未支持。将对象作为块元素级的表格显示
table-caption : CSS2 未支持。将对象作为表格标题显示
table-cell : CSS2 未支持。将对象作为表格单元格显示
table-column : CSS2 未支持。将对象作为表格列显示
table-column-group : CSS2 未支持。将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 未支持。将对象作为表格行显示
table-row-group : CSS2 未支持。将对象作为表格行组显示
visibility:
visibility版本:CSS2 兼容性:IE4+ NS6+ 继承性:无
语法:
visibility : inherit | visible | collapse | hidden
取值:
inherit : 默认值。继承父对象的可见性
visible : 对象可视
hidden : 对象隐藏
collapse : 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于 hidden。IE6及以下不支持此参数值
经过在IE、chrom、firfox中测试结果如下:
display的none会使被隐藏的对象释放被占用的空间
visibility的hidden不会使被隐藏的对象释放被占用的空间。
visibility的collapse在chrom下table并未释放空间,在IE和firfox下释放了。
翻阅了JQuery的show和hide方法的源码,发现其控制元素显示与否是通过display属性来控制的。
html中设置元素隐藏显示,细说HTML元素的隐藏和显示相关推荐
- seaborn使用violinplot函数可视化小提琴图、并在violinplot函数中设置inner参数来添加横线(inner=“stick“)显示数据的稠密程度
seaborn使用violinplot函数可视化小提琴图.并在violinplot函数中设置inner参数来添加横线(inner="stick")显示数据的稠密程度(Seaborn ...
- html中设置字体字型,html中 如何在font中设置字体样式(粗体斜体等)
html> 字体加粗 用<b>加粗字体:加粗 用<strong>加粗字体:加粗 用CSS font-weight 加粗 normal(400), bold(700) ...
- html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
- 在Word2010文档中设置和显示隐藏文字
用户在使用Word2010编辑文档的过程中,常常需要将Word文档中的特定文字设置为隐藏文字,以实现保密效果.本篇教程介绍在Word2010文档中设置和显示隐藏文字的方法. 1.设置隐藏文字 用户可以 ...
- excel切片器显示错误_使用切片器在Excel中设置过滤条件
excel切片器显示错误 In most cases, it's best if you keep people away from your data in Excel. It's too easy ...
- Android 虚拟按键隐藏或显示之后共享元素动画异常解决方案
背景 本篇算是共享元素的第三篇文章.主要还是因为第一篇才会衍生出来了第二篇和第三篇文章,后两篇均属于bug的分析和解决. 1.Android 仿微信朋友圈图片拖拽返回 2.Android 共享元素动画 ...
- CSS中 设置( 单行、多行 )超出显示省略号
1. 设置超出显示省略号 css设置超出显示省略号可分两种情况: 单行文本溢出显示省略号- 多行文本溢出显示省略号- 但使用的核心代码是一样的:需要先使用 "overflow:hidden; ...
- Android中设置显示文本,Android文本显示控件-TextView属性详解
android:autoLink //设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all) andr ...
- html 中设置样式方式,在html元素中设置css样式的方式是什么
如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置"id" 和 "class"选择器. (推荐教程:CSS教程) 下面我们来分别说一下id选择 ...
最新文章
- [力扣] 501. 二叉搜索树中的众数
- IE6-IE9兼容性问题列表及解决办法_补遗漏之一:button的type默认值改变为submit了。...
- Ubuntu下Postgres安装与配置
- ASP导出数据到excel
- 增加mysql的最大连接数
- [转]Intellij idea创建javaWeb以及Servlet简单实现
- 1.springboot:入门程序
- 如何使用Docker、Docker-Compose和Rancher搭建部署Pipeline(二)
- C++11新特性之auto关键字的使用
- html取php值,使用PHP从HTML中提取值
- windows配置jdk环境变量、mysql环境变量、tomcat环境变量、maven环境变量、git环境变量、node环境变量
- c语言1到100奇数和与偶数和,C语言实现1到100的和奇数与偶数和
- 关于学习的过程:痛并快乐着是一种收获
- 计算机专业论文提纲,计算机硕士毕业论文提纲(范文精选)
- WINVNC Server详解
- 安装与破解IntelliJ IDEA2017
- 【STM32】关于Clion+STM32cubeMX环境搭建过程中所遇到的一些问题·其一
- C++ typename的起源与用法
- 【android opengles开发的一些基础类】
- 一瓶OTC,药店被罚10万,原因是...
热门文章
- linux 脚本中 -le,linux shell中if的各种判断
- redis 作用和应用场景等总结篇
- 数据结构与算法(C语言 严蔚敏)一
- poli-java开源BI软件
- python 日期解析_如何在Python中解析ISO 8601格式的日期?
- SNAP计算哨兵二号的叶面积指数(LAI)
- 解决微信昵称含有表情符号等插入到数据库报错问题
- 微盛·企微管家携手企业微信参加2021第六届中国抗衰老医学(官方)大会
- python语言不采用严格的缩进来表示程序的格式框架_python语言采用严格的什么
- C语言学习笔记之动态内存分配结构体——辣鸡版学生管理系统