display:none和opacity:0
时间: 2023-04-21 10:04:08 浏览: 184
display:none和opacity:都是用来隐藏元素的CSS属性。
display:none会将元素完全从文档流中移除,不占据任何空间,同时也不会触发任何事件。而opacity:则是将元素透明度设置为,元素仍然存在于文档流中,占据空间,但是不可见。
两者的区别在于,使用display:none隐藏的元素不会占据空间,而使用opacity:隐藏的元素仍然会占据空间。另外,使用opacity:隐藏的元素可以通过JavaScript等方式进行操作,而使用display:none隐藏的元素则无法进行操作。
相关问题
visibility: hidden ,opacity display:none
这三个CSS属性都可以用于隐藏元素,但有一些区别:
1. `visibility: hidden`:元素不可见,但仍占用布局空间,即元素仍然存在于DOM中,可以通过更改CSS属性或通过JavaScript让其可见。
2. `opacity: 0`:元素透明度为0,即元素不可见,但仍占用布局空间,即元素仍然存在于DOM中,可以通过更改CSS属性或通过JavaScript让其可见。
3. `display: none`:元素不可见,且不占用布局空间,即元素在DOM中不存在,也不能通过JavaScript让其可见,要让其重新出现,必须更改CSS属性或通过JavaScript重新创建元素并添加到DOM中。
因此,在使用这些属性时,需要根据实际需求进行选择。如果需要隐藏元素但仍占用布局空间,则使用`visibility: hidden`或`opacity: 0`;如果需要完全移除元素并释放布局空间,则使用`display: none`。
display:none和visibile:hidden opacity0重绘重排
`display:none`和`visibility:hidden`以及`opacity:0`在页面中都可以隐藏元素,但它们的实现方式不同,会对页面的重绘重排产生不同的影响。
`display:none`会将元素从文档流中完全删除,这会导致元素不再占据任何空间,而且会导致页面的重排和重绘。
`visibility:hidden`会将元素隐藏起来,但是元素依然占据着原来的空间,这也会导致页面的重排和重绘。
`opacity:0`会将元素变得透明,但元素依然占据着原来的空间,这同样会导致页面的重排和重绘。
因此,如果需要在页面中隐藏元素,可以根据实际需要选择不同的方式。如果需要隐藏的元素不再需要使用,可以使用`display:none`;如果需要隐藏的元素需要重新显示,可以使用`visibility:hidden`或者`opacity:0`。但是需要注意,使用`display:none`将导致元素完全从文档流中删除,可能会影响到其他元素的布局,因此在使用时需要谨慎考虑。
阅读全文
相关推荐

















