visibility和display的异同

都有隐藏节点的作用。

visibility:hidden;

display:none;

（1）visibility

规定了元素是否可见，即使不可见也会占用上面的空间，在这里就是在指它与display的不一样了。

（2）display

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

（3）对比：

相同点：都有相同的功能就是隐藏。

不同点：当我们定义了display后，在渲染树中是不会去构建这个框的。而visibility当我们使它隐藏的时候，他在渲染树中会构建，只是不去渲染。这也就是W3c上面所说的不可见会占空间的原因。他们两者在优化中visibility会显得更好，因为我们不会因为它而去改变了文档中已经定义好的显示层次结构了。