![css中display为none 和visibility为hidden的区别 css中display为none 和visibility为hidden的区别](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
区别一:
display:none
Turns off the display of an element (it has no effect on layout);
all child elements also have their display turned off.
//隐藏这个元素;所有的子元素也跟着他隐藏.
visibility:hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout.
Descendants of the element will be visible
if
they have visibility:visible
(
this
doesn't work
in
IE up to version 7).
//这个容器不可见(完全透明),但占有布局.后代(子)元素将会显示,如果设有visible属性
区别二:
display为none时,元素不占用页面流,就好像该元素不存在一样.
visibility为hidden时,仍然占用页面流,也就是这块区域虽然不可见,但是占据一块空间.
visibility为hidden时,仍然占用页面流,也就是这块区域虽然不可见,但是占据一块空间.