css-display:none和visibility：hidden的不同

標籤：hidden   flow   效能   不同   部落格   splay   存在   css   使用   

摘自張鑫旭老師的部落格——

display:none和visibility:hidden都能使元素隱藏，但是有明顯區別，主要有以下三點：

1. 空間佔據
2. 重排與重繪
3. 株連性

1、空間佔據。

使用display隱藏後，元素不佔用任何空間，而visibility佔據的空間仍在。

2、重排與重繪

reflow和repaint。由於display隱藏後佔據的空間不存在了，所以導致頁面的重排與重繪；而visibility佔據空間仍在，不引起重排重繪，所以前者會對效能產生影響。

3、株連性

如果父元素應用了display：none，那麼子項目無論如何都沒有辦法顯示出來，所以其具有明顯的“株連性”；visibility在父元素hidden後，如果子項目應用了visible，那麼子項目仍然會顯示出來。

css-display:none和visibility：hidden的不同