opiacity用于设置元素的不透明度级别，所有的浏览器都支持这个属。opacity会继承父元素的opacity 属性。占据空间，可以点击。

display:none将元素与其子元素从普通文档流中移除。元素的内容也会被所忽略，隐藏起来。不占空间，无法点击。

visibility属性规定元素是否可见，但是也会占据页面上的空间，可以点击。

flex:0  flex:none  flex:1  flex:auto之间的区别

flex属性是由flex-grow, flex-shrink, flex-basis这三个属性的缩写

flex:initial = flex: 0 1 auto   默认属性 容器有剩余空间时不增长，空间不足时会缩小，尺寸自适应

flex:0        = flex:0 0 0

flex:none  = flex:0 0 auto   grow和shrink为0表现为元素尺寸不会随空间弹性增大或减小

                                           basis固定尺寸为0 元素失去弹性 则flex:0尺寸为最小尺寸

                                           basis为auto表示固定尺寸由内容决定 但flex:none失去弹性 因此不会换行

flex:1        = flex:1 1 0

flex:auto   = flex:1 1 auto  grow和shrink为1时元素尺寸会随着空间弹性等比例增大或缩小

                                          flex:1 在空间不足时会优先最小化尺寸，较长的尺寸优先牺牲自己的尺寸

                                             flex:auto在空间不足时会优先最大化尺寸，较长的尺寸优先扩展自己的尺寸

                                             所以，flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用