8月文章分享

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

+---
+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;
+}
+```