胖蔡说技术一、CSS元素隐藏方式
在某些场景下，让指定元素隐藏，是我们开发中常见的一个需求，其实现也很简单，光CSS方式就有好几种，可以简单总结如下：
1.设置元素的display为none
.hide { display:none; }
将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间会被其他元素占有。
2.设置元素的visibility为hidden
.hide { visibility:hidden }
和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着。
3.将元素的透明度设置为0
.hide { opacity:0; }
这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，而区别则在于元素只是隐身了没有消失，它依旧存在页面中。
4.设置height，width等盒模型属性为0
.hide{ margin:0; border:0; padding:0; height:0; width:0; overflow:hidden; }
5.设置元素的position与left、top、bottom、right等，将元素移出至屏幕外。
6.设置元素的position与z-index，将z-index设置成尽量小的负数
总结：隐藏元素最常用的方式为前2种，后面几种并不推荐，若有特殊场景需要则可适当选用。
二、图片底部空白间隙去除方式
在开发中经常会遇到这样一种情况：将一个图片放在一个盒子里，如果图片不做特殊处理，图片离盒子底部就会出现一段空白间隙，如下图：
这是因为，行内/行内块元素默认是与文字基线对齐的，而img是行内元素，它与文字基线对齐，但有的文字是有底线的（如下图中的”p”字母），基线与底线之间会有一段距离，所以造成了图片与盒子底部出现空白间隙。
解决方法
1.修改img行内元素的垂直居中方式，让它不再以基线对齐。
1 2 3
img { vertical-align: top; }
除了top值，还可以设置为middle或bottom 。
2.将img转为块元素，不在受行内基线的影响。
img { display: block; }
3.修改img父级元素的行高或字体大小为0，这样基线下方的位置基本可以忽略。
