CSS规则visibility:hidden和display:none两个结果中的元素不可见.这些同义词是？
display:none意味着有问题的标签根本不会出现在页面上(尽管你仍然可以通过dom与它进行交互).其他标签之间不会为其分配空间.
visibility:hidden意味着不同的是display:none,标签不可见,但在页面上为其分配了空间.标记已呈现,它只是在页面上看不到.
例如:
test | Appropriate style in this tag | test
更换[style-tag-value]用display:none的结果:
test | | test
更换[style-tag-value]用visibility:hidden的结果:
test | | test
它们不是同义词.
display:none 从页面的正常流中移除元素,允许其他元素填充.
visibility:hidden 将元素留在页面的正常流中,这样仍然占用空间.
想象一下,你正准备在游乐园里骑车,而且该线路上有人会如此吵闹,以至于安全人员将他们从线路上拽下来.然后排队的每个人都会向前移动一个位置来填补现在的空位.这就像display:none.
与此类似的情况形成鲜明对比,但是在你面前的某个人穿上了一件隐形斗篷.在查看线条时,它看起来似乎有一个空的空间,但人们无法真正填满那个空洞的空间,因为有人还在那里.这就像visibility:hidden.
有一点值得补充,虽然没有被问到,但是有第三种选择可以使对象完全透明.考虑:
1st unseen link.
2nd unseen link.
3rd unseen link.display:none 从布局流中删除元素.
visibility:hidden 隐藏它但留下了空间.
在子节点方面有很大的不同.例如:如果您有父div和嵌套子div.所以,如果你这样写:
在这种情况下,没有一个div可见.但如果你这样写:
然后子div将可见,而父div将不会显示.
它们不是同义词 - display: none从页面流中删除元素,页面的其余部分就像它不存在一样流动.
visibility: hidden 隐藏视图中的元素,但不隐藏页面流,在页面上留出空间.
display: none 完全从页面中删除元素,并且构建页面就像元素根本不存在一样.
Visibility: hidden 即使您无法再看到它,也会留下文档流中的空间.
这可能会也可能不会产生很大的不同,这取决于你在做什么.
随着visibility:hidden对象仍占用垂直高度在页面上.随着display:none它完全删除.如果您在图像下方有文字,那么display:none该文本将向上移动以填充图像所在的空间.如果您执行可见性:隐藏文本将保留在同一位置.
display:none将隐藏元素并折叠占用的空间,而visibility:hidden隐藏元素并保留元素空间.display:none也会影响旧版IE和Safari中javascript提供的一些属性.
除了所有其他答案之外,IE8还有一个重要区别:如果您使用display:none并尝试获取元素的宽度或高度,IE8将返回0(而其他浏览器将返回实际大小).IE8仅返回正确的宽度或高度visibility:hidden.
visibility:hidden保留空间; display:none没有.
display: none;
它不会在页面上显示,也不占用任何空间.
visibility: hidden;
它隐藏了一个元素,但它仍然会占用与以前相同的空间.该元素将被隐藏,但仍会影响布局.
visibility: hidden保留空间,display: none而不保留空间.
显示无示例:https://www.w3schools.com/css/tryit.asp？filename = trycss_display_none
能见度隐藏示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
如果将visibility属性设置为"hidden",则浏览器仍会在页面上占用内容空间,即使它不可见.
但是当我们将对象设置为时"display:none",浏览器不会在页面上为其内容分配空间.
例:
Content not display on screen and even space not taken.Content not display on screen but it will take space on screen.
查看详情
京公网安备 11010802040832号 | 京ICP备19059560号-6 