图片底部空白缝隙解决法方案(CSS)

当我想实现一个垂直轮播图时,图片底部会出现一个空白缝隙导致切换轮播图片显示不完整。

这里可以用两个方法解决

一、给图片添加(垂直对齐)vertical-align:baseline|middle|top;

vertical-align属性的值可以是

(1)关键字值:baseline|middle|top|bottom|sub|text-top|text-bottom;

               ( 基线)起点|中间|顶部|底部|向下位置|(文本)顶部|(文本)底部

(2)<length> 长度值:10em|4px;

(3)<percentage>百分比值:50%;

(4)全局值:inherit|revert|revert-layer|unset|initial;

inherit(继承)——指定一个属性值应该从其父元素继承。

【如果父元素没有为该属性显式设置值,浏览器会沿着DOM树向上查找,直到找到一个定义了该属性的值,或者到达文档的根节点。如果在整个DOM树中都找不到定义的值,浏览器将使用其默认值。】

revert(还原)——样式重置为浏览器默认值。

【revert关键字的几个要点:

1.revert关键字可以应用于任何CSS属性;

2.如果用户定义样式表中显式设置了某个属性,revert关键字不会覆盖这些设置,而是保留用户定义的值;

3.如果用户定义样式表中没有显式设置某个属性,revert关键字会将属性值重置为浏览器默认值;

4.revert关键字的效果与unset关键字类似,但unset在属性没有默认值时会将该属性值设置为initial;

5.revert关键字在Safari 9.1+和iOS 9.3+中得到支持。
revert-layer(还原层)——CSS全局关键字,用于控制样式的继承和覆盖。

继承样式 :revert-layer 的结果值将匹配上一个级联层或下一个匹配规则,允许你从当前规则跳到上一个级联层,从而继承另一个选择器的样式。

防止样式泄露 :使用 revert-layer 可以防止级联层中最接近的选择器的样式泄露到当前规则,这在重构CSS或重设样式时特别有用。

简化开发体验 :revert 关键字及其 revert-layer 值可以提高开发体验,尤其是在使用 display: none 或其他显示属性时。】

unset(未设置)——将一个属性重新重新设置为其从父母那继承的属性值,如果没有继承则是重置成初始值。它可以应用到所有的css属性上,包括css简写。

initial(初始值)——将CSS属性重置为它的默认值。(IE不支持)

CSS中vertical-align属性用来指定行内(inline)、行内区块(inline-block)、表格单元格(table-cell)盒子的垂直对齐方式。

vertical-align 属性可被用于两种上下文:

  • 使行内元素盒模型与其行内元素容器垂直对齐。例如,用于垂直对齐行文本内的图片。
  • 垂直对齐表格单元格的内容

二、把图片转换为块元素display:block;

display属性设置元素是否被视为块级或行级盒子以及用于子元素的布局,例如流式布局、网格布局或弹性布局。

语法:

/* 预组合值 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;/* 生成盒子 */
display: none;
display: contents;/* 多关键字语法 */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;/* 其他值 */
display: table;
display: table-row; /* 所有的 table 元素 都有等效的 CSS display 值 */
display: list-item;/* 全局值 */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…

计算机相关知识

前言 提醒&#xff1a; 文章内容为方便作者自己后日复习与查阅而进行的书写与发布&#xff0c;其中引用内容都会使用链接表明出处&#xff08;如有侵权问题&#xff0c;请及时联系&#xff09;。 其中内容多为一次书写&#xff0c;缺少检查与订正&#xff0c;如有问题或其他拓展…

鹦鹉的饮食偏好:探索多彩的食物世界

鹦鹉&#xff0c;作为聪明且迷人的鸟类&#xff0c;其饮食习性一直是鸟类爱好者关注的焦点。了解鹦鹉喜欢吃什么食物&#xff0c;对于确保它们的健康与幸福至关重要。 鹦鹉的食物种类丰富多样&#xff0c;首先是各类种子与谷物。例如&#xff0c;葵花籽富含脂肪和蛋白质&#…

2021 年 12 月青少年软编等考 C 语言四级真题解析

目录 T1. 移动路线思路分析T2. 移动办公思路分析T3. 最长公共子上升序列思路分析T4. 技能树思路分析T1. 移动路线 桌子上有一个 m m m 行 n n n 列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为 ( 1 , 1 ) (1,1)…

番外篇 | YOLO-ELA:高效的局部注意力建模,用于高性能实时缺陷检测 !

前言:Hello大家好,我是小哥谈。现有的从无人机(UAV)上进行的绝缘子缺陷识别方法在处理复杂背景场景和小型物体时,准确率较低且存在较多的假阳性检测。为解决这一问题,本文提出了一种基于局部注意力建模的新注意力基础架构,即YOLO-ELA。在YOLOv8的一阶段架构的Neck部分添…

自然语言处理和大语言模型综述(12.2-12.8)

目录 0 前言 1 NLP是什么 2 LLMs是什么 3 NLP和LLMs的发展 3.1 单词和句子向量 3.2 无监督预训练 3.3 预训练的Transformer 3.4 分布式训练的LLMs 4 NLP的应用 4.1 序列分类 4.2 两两序列分类 4.3 单词标注 4.4 Seq2Seq 5 LLMs的应用模型 5.1 GPT 5.2 BERT 5.…

【密码学】SM4算法

一、 SM4算法简介 SM4算法是中国国家密码管理局于2012发布的一种分组密码算法&#xff0c;其官方名称为SMS4&#xff08;SMS4.0&#xff09;&#xff0c;相关标准为GM/T 0002-2012《SM4分组密码算法》。SM4算法的分组长度和密钥长度均为128比特,采用非平衡Feistel结构。采用32…

【实现多网卡电脑的网络连接共享】

电脑A配备有两张网卡&#xff0c;分别命名为eth0和eth1&#xff08;对于拥有超过两张网卡的情况&#xff0c;解决方案相似&#xff09;。其中&#xff0c;eth0网卡能够连接到Internet&#xff0c;而eth1网卡则通过网线直接与另一台电脑B相连&#xff08;在实际应用中&#xff0…

VBA API 概述 | 宏编程

注&#xff1a;本文为 “VBA API 概述 | 宏编程 | 执行速度慢” 相关文章合辑。 VBA API 详解 Office 二次开发于 2020-12-17 22:27:10 发布 Office 版本变动 在 Office 2010 之前&#xff0c;微软仅提供 32-bit 版本的 Office。而自 Office 2010 起&#xff0c;出现了 32-b…

Node.js nvm(版本管理工具)

1. 介绍 nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具&#xff0c;方便切换不同版本的 Node.js 2. 使用 nvm 的使用非常的简单&#xff0c;跟 npm 的使用方法类似 2.1 下载安装 首先先下载 nvm&#xff0c;下载地址 https://github.com/coreybutl…

Scala的隐式类,隐式参数和值,隐式对象

1.Scala的隐式类定义语法&#xff1a;implicit class 类名(参数){ } 隐式类中参数只能定义一个&#xff0c;参数中的源类型与目标类型一一对应&#xff0c;只能从一种类型转换成另一种类型&#xff0c;不可以一对多或多对。 //隐式类&#xff1a;implicit class隐式转换函…

科技潮头浪接天,一桥飞架两界连。EthernetIP转Profinet互译连

本案例介绍的是西门子1200PLC通过稳联技术PROFINET转EtherNetIP网关&#xff08;WL-ABC2006&#xff09;连接HCS-6100系统配置案例。 打开稳联技术Ethernetip转profient网关(WL-ABC2006)配置软件&#xff0c;因为网关作为EtherNetIP从站&#xff0c;所以选择PN2EIP。设置网关Pr…

EasyPlayer.js播放器如何在iOS上实现低延时直播?

随着流媒体技术的迅速发展&#xff0c;H5流媒体播放器已成为现代网络视频播放的重要工具。其中&#xff0c;EasyPlayer.js播放器作为一款功能强大的H5播放器&#xff0c;凭借其全面的协议支持、多种解码方式以及跨平台兼容性&#xff0c;赢得了广泛的关注和应用。 那么要在iOS上…

LeetCode - #158 用 Read4 读取 N 个字符 II

文章目录 摘要描述题目描述方法定义 题解答案题解代码题解代码分析示例测试及结果示例测试代码示例运行结果 时间复杂度空间复杂度总结关于我们 摘要 本文将详细解读一道与文件读取相关的编程问题&#xff1a;如何使用 read4 实现按需读取 n 个字符的 read 方法。我们不仅会提…

Navigaiton源码解析(二)—— costmap、全局规划算法

1 costmap概述 红点代表障碍物,蓝色点代表膨胀后的障碍物。红色的多边形表示机器人的footprint(足迹),用来做碰撞检查。机器人的footprint与红色的障碍物点不应该相交,footprint的中心不应该与蓝色点重合 costmap_2d包提供了一个机器人在其中导航的占据栅格地图。costmap接收…

Oracle EBS PAC 如何复修非标任务单生产生非常大的PAC成本?

系统环境 RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题症状 非标准任务单组件和装配相同物料A,俗称投入A产A。该物料A的期初数量为0。 上期成本假设为20,而本期成本爆增至563.674234。关键问题点: 由于该物料没有期初数量,无法通过“更新定期成本”指定“新期本…

PHP:连接Grid++Report模板,实现循环打印

实现效果 模板 代码 cycle.php <html xmlns"http://www.w3.org/1999/xhtml"><head><title>Web报表(B/S报表)演示 - 不用报表插件展现报表而是直接输出</title><meta http-equiv"Content-Type" content"text/html; chars…

代理IP地址和端口是什么?怎么进行设置?

保护个人隐私、突破地域限制、提升网络安全性是我们不断追求的目标。IP地址与端口一种实现这些目标的重要工具。但是&#xff0c;你可能对它是什么&#xff0c;以及如何设置感到困惑。别担心&#xff0c;本文将为你揭开这些神秘的面纱&#xff0c;让你轻松掌握这项技能。 1.IP…

【单元测试】单元测试的重要性

1一些错误的认识 在实际的单元测试过程中总会有一些错误的认识左右着我们&#xff0c;使之成为单元测试最大的障碍&#xff0c;在此将其一一分析如下&#xff1a; 它太浪费时间了&#xff0c;现在要赶进度&#xff0c;时间上根本不允许&#xff0c;或者随便做做应付领导。 …

二叉树交换相关算法题|递归/非递归交换所有节点左右子树(C)

交换左右子树 设树B是一棵采用链式结构存储的二叉树&#xff0c;编写一个把树B中所有节点的左右子树进行交换的函数 算法思想 采用递归算法实现交换二叉树的左右子树&#xff0c;首先交换root节点左孩子的左右子树&#xff0c;然后交换root节点右孩子的左右子树&#xff0c;…