图片以及显示隐藏元素

一、图片下间隙问题解决方案：

方法一：

img{vertical-align:middle;} 不改变图片本身内联块的特性

方法二：

img{display:block}

将图片显示为块（改变了图片本身内联块的特点）

方法三：

img父级{font-size:0}

隐患：由于字号可继承，需要重新定义其它后代元素的字号

二、图片水平居中

方法一：

作为行内块

img父级{text-align:center;}

方法二：

作为块

img{display:block;margin-left:auto;margin-right:auto;}

三、显示影藏元素

1、display

none隐藏（隐藏不占位）；

block显示

2、visibility

hidden隐藏；

visible显示；

隐藏以后仍然占位；

3、透明度

（1）rgba(r,g,b,a)

alpha透明度：

0全透明；

1全部透明；

0-1之间半透明；

主要用于处理颜色透明（边框、背景、文字）；

ie9及以上

（2）IE透明

兼容性：仅支持IE6、7、8、9，在IE10版本被废除；

filter:alpha(opacity=50);

取值：0-100（默认是元素和内容都透明，通过子元素相对定位实现内容不透明）；

（3）opacity

取值0-1之间：

0全透明；

1全部透明；

0-1之间半透明；

整个元素透明（当前元素及内容），IE9以及以上