CSS隐藏元素及去除图片底部空白间隙的各种方式总结.md 2.66 KB
Newer Older
liyan's avatar
liyan committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
---
title: CSS隐藏元素及去除图片底部空白间隙的各种方式总结           
date: 2022/8/30 22:42:20
tags:                    
- 前端
- CSS        
author: 李燕         
---

**一、CSS元素隐藏方式**

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

<!-- more -->

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](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a86a6dfc5e30449192553a4f0843fda5~tplv-k3u1fbpfcp-zoom-1.image)

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

![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ca4bcb031ea4745854a49f033e5a0e1~tplv-k3u1fbpfcp-zoom-1.image)

#### 解决方法

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

```
img {
  vertical-align: top;
}
```

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

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

```
img {
  display: block;
}
```

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

```
div {
  font-size: 0px;
}
div {
  line-height: 0px;
}
```