CSS属性：显示与可见性
Display和Visibility属性有什么区别？
visibility属性只告诉浏览器是否显示元素。 它可以是可见的（ visible – 你可以看到它），或不可见（ hidden – 你看不到）。
display属性告诉浏览器如何绘制和显示一个元素 – 是否应该显示为一个inline元素（即它与文本和其他内联元素stream）或block级元素（即它有高度和你可以设置的宽度属性，可浮动的等等），或者一个inline-block （即，它像一个块框，但内置的内联）和其他一些（ list-item ， table ， table-row ， table-cell ， flex等）。
当你设置一个元素来display: block但也设置visibility: hidden ，浏览器仍然把它视为块元素，除非你只是没有看到它。 有点像你把一个红色的盒子放在一个看不见的盒子上面：红色的盒子看起来好像在半空中漂浮，实际上它坐在一个你看不见的物理盒子的顶部。
换句话说，这意味着非display的元素仍然会影响页面元素的stream动，而不pipe它们是否可见。 围绕一个display: none元素的框display: none行为，就好像该元素从来没有（尽pipe它仍然在DOM中）。
display：none将元素从htmlstream中移除，而visibility：hidden不。
知名度：隐藏
- 该元素将不会被绘制，并且不会收到点击/触摸事件，但占用的空间仍然被占用
- 因为它仍然是为了布局的目的，所以你可以在不可见的情况下测量它
- 改变内容仍然会花费时间回stream/布置页面
- 可见性是inheritance的，所以这意味着你可以通过给子视图显示子视图：visible;
显示：无
- 会使元素不参与stream程/布局
- 可以（取决于使用的浏览器）杀死Flash电影和iframe（这将重新启动/重新加载时再次显示），虽然你可以防止这发生与iframe
- 元素不会占用任何空间。 为了布局的目的，就像它不存在
- 会使某些浏览器/设备（如iPad）直接取回该元素使用的内存，如果在animation过程中在无与其他值之间切换，则会导致小的混乱
额外的笔记：
- 隐藏内容中的图像：在所有stream行的浏览器中，图像仍然被加载，即使它们在具有可见性的任何元素内：隐藏的; 或显示：无;
- 隐藏内容中的字体： webkit浏览器（Chrome / Safari）可能会延迟加载只在隐藏元素中使用的自定义字体，包括通过可见性或显示。 这可能会导致您测量仍在使用后备字体的元素，直到加载自定义字体。
显示：无; 将从DOM中删除DOM元素的视觉风格/物理空间，而可见性：隐藏; 将不会删除元素，而只是隐藏它。 因此，在DOM中占据300px垂直空间的div在设置为visibility时将仍然占用300px的垂直宽度：hidden; 但设置为显示时：无; 它的视觉风格和它占据的空间是隐藏的，空间因此被“释放”，因为没有一个更好的词。
[编辑] – 我刚才写了上面的内容，是不是有足够的知识或者糟糕的一天，我不知道，但事实是，这个元素永远不会从DOM层次中移除。 所有的块级显示“样式”在使用display：none时是完全“隐藏的”，而可见性：隐藏的; 该元素本身是隐藏的，但它仍占用DOM中的可视空间。 我希望这个清理的事情
