display属性跟visibility属性

Display属性：

        对于一个元素而言，如果display计算值是none，则该元素以及所有后代元素都隐藏。对于很多前端小伙伴来说对于display属性的了解应该止步于此。实际上display属性还有很多隐藏的小知识点，下面就给小伙伴一一列举。

        在fireFox浏览器下，display:none的元素的background-image图片是不加载的，包括父元素display:none也是如此。

        如果是Chrome和Safari浏览器，则要分情况，如果父元素display:none则不加载背景图片资源；如果背景图片本身所在元素隐藏，则图片依旧会去加载。

        对于IE浏览器而言，无论怎样都会去加载图片。        

        另外，如果不是background-image图片，而是<img>元素，则设置display:none在所有浏览器下依旧都会请求图片资源。

        tips:

                html5中新增了hidden这个布尔属性，可以让元素天生display:none隐藏。

                IE11以及其他现代浏览器都支持它，因此，如果要兼容桌面端，需要如下CSS设置

               

[hidden] {
    display: none;
}

        display:none显隐控制并不会影响CSS3 animation动画的实现，但是会影响transition动画的执行。也就是说display并不支持过渡动画

Visbility属性：

        visibility属性除去隐藏元素并且还要占据空间的特性以外还有一下少为人知的特性

        1、继承性

                父元素设置visibility:hidden，子元素也会看不见，原因就是其继承性，子元素继承了visibility属性，但是此时设置子元素visibility：visible，则子元素就会显示出来.

        2、visibility与transition

               过渡属性支持visibility属性

                一个实际的用例，当我们有一个表格时，通过某一个格子需要显示操作，但是当我们滑动鼠标时，很容易就会把我们不需要的操纵菜单显示出来，因此，我们可以通过visibility属性跟transition属性进行配合，给过渡动画一个延迟，那么鼠标滑动时就会大大减少其他操作菜单出现的几率，提高了用户体验，具体代码如下：

	<td>
		<a href=''>操作</a>
		<div class='list'>
			<a href="">编辑</a>
			<a href="">删除</a>
		</div>
	</td>

    .list {
	    position: absolute;
	    visibility: hidden;
    }

    td:hover .list {
	    visibility: visible;
	    transition: visibility 0s .2s;
    }