胖蔡说技术
随便扯扯

CSS隐藏元素及去除图片底部空白间隙的各种方式总结

一、CSS元素隐藏方式

在某些场景下,让指定元素隐藏,是我们开发中常见的一个需求,其实现也很简单,光CSS方式就有好几种,可以简单总结如下:

 

1.设置元素的display为none

plaintext
.hide {
  display:none;
}

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间会被其他元素占有。

2.设置元素的visibility为hidden

plaintext
.hide {
  visibility:hidden
}

和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着。

3.将元素的透明度设置为0

plaintext
.hide {
  opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,而区别则在于元素只是隐身了没有消失,它依旧存在页面中。

4.设置height,width等盒模型属性为0

plaintext
.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种,后面几种并不推荐,若有特殊场景需要则可适当选用。

二、图片底部空白间隙去除方式

在开发中经常会遇到这样一种情况:将一个图片放在一个盒子里,如果图片不做特殊处理,图片离盒子底部就会出现一段空白间隙,如下图:

f3e6476a81bad8b

这是因为,行内/行内块元素默认是与文字基线对齐的,而img是行内元素,它与文字基线对齐,但有的文字是有底线的(如下图中的”p”字母),基线与底线之间会有一段距离,所以造成了图片与盒子底部出现空白间隙。

6f2eab142b48a4f

解决方法

1.修改img行内元素的垂直居中方式,让它不再以基线对齐。

plaintext
1
2
3
img {
  vertical-align: top;
}

除了top值,还可以设置为middle或bottom 。

2.将img转为块元素,不在受行内基线的影响。

plaintext
img {
  display: block;
}

3.修改img父级元素的行高或字体大小为0,这样基线下方的位置基本可以忽略。

plaintext
div {
  font-size: 0px;
}
div {
  line-height: 0px;
}
赞(1) 打赏
转载请附上原文出处链接:胖蔡说技术 » CSS隐藏元素及去除图片底部空白间隙的各种方式总结
分享到: 更多 (0)

© 2024 胖蔡说技术   网站地图    皖ICP备19024802号-1    联系邮箱:1710600212@qq.com

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏