首页 > 代码库 > 细说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属性来控制的。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。