当前位置: 首页 > news >正文

移动端设置position: fixed;固定定位,底部出现一条缝隙,不知原因,欢迎探讨!!!

1、问题 

在父盒子中有一个子盒子,父盒子加了固定定位,需要子盒子上下都有要边距,用margin或者padding挤开时,会出现缝隙是子盒子背景颜色的。

测试过了,有些手机型号有,有些没有,微信小程序同移动端都有

 如下代码,并没有设置底边框

<view class="videoContainer"><!-- 头部区域 --><view class="search-box"><view class="search iconfont icon-sousuo" bindtap="toSearch">大家都在看 更多精彩视频</view></view>
</view>
.videoContainer {background-color: #f8f9fd;height: 200vh;
}.videoContainer .search-box {position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 100%;background-color: gold;
}.videoContainer .search {margin: 15rpx auto 10rpx;width: 90%;height: 70rpx;line-height: 70rpx;border-radius: 40rpx;font-size: 28rpx;background-color: red;color: #767c92;letter-spacing: 2rpx;
}

 2、解决方法

1、父盒子不设置颜色,让其为默认的白色

2、设置父盒子高度不超过子盒子的【底部】(不包括子盒子的边距)

3、子盒子加上transform:translateZ(0);之后,缝隙消失

如果有更多方法,懂得其中原因,欢迎在评论区探讨

相关文章:

移动端设置position: fixed;固定定位,底部出现一条缝隙,不知原因,欢迎探讨!!!

1、问题 在父盒子中有一个子盒子&#xff0c;父盒子加了固定定位&#xff0c;需要子盒子上下都有要边距&#xff0c;用margin或者padding挤开时&#xff0c;会出现缝隙是子盒子背景颜色的。 测试过了&#xff0c;有些手机型号有&#xff0c;有些没有&#xff0c;微信小程序同移…...

有关网络安全的课程学习网页

1.思科网络学院 免费学习skillsforall的课程 课程链接&#xff1a;Introduction to Cybersecurity by Cisco: Free Online Course (skillsforall.com) 2.斯坦福大学计算机和网络安全基础 该证书对于初学者来说最有价值&#xff0c;它由最著名的大学之一斯坦福大学提供。您可…...

计算机网络-面试题

一、基础 1、网络编程 网络编程的本质是多台计算机之间的数据交换存在问题 如何准确的定位网络上一台或多台主机如何进行可靠传输2、网络协议 在计算机网络有序的交换数据,就必须遵守一些事先约定好的规则,比如交换数据的格式、是否需要发送一个应答信息。这些规则被称为网络…...

C++虚函数

C虚函数 在C中&#xff0c;虚函数&#xff08;Virtual Function&#xff09;是一个使用关键字virtual声明的成员函数&#xff0c;它在基类中被声明&#xff0c;以便在任何派生类中被重写&#xff08;Override&#xff09;。使用虚函数的目的是实现多态性——一种允许使用基类指…...

MySQL数据库基础(二):MySQL数据库介绍

文章目录 MySQL数据库介绍 一、MySQL介绍 二、MySQL的特点 三、MySQL版本 四、MySQL数据库下载与安装 1、下载 2、安装 五、添加环境变量&#xff08;Windows&#xff09; 六、检测环境变量是否配置成功 MySQL数据库介绍 一、MySQL介绍 MySQL是一个关系型数据库管理…...

常用文件命令

文章目录 文件命令文件内容查看catnlmoreless&#xff08;more的plus版&#xff09;headtailod 文件属性操作用户权限常见的权限chownchmodchgrpumask 隐藏属性常见的隐藏属性lsattrchattr 查找文件查看文件类型查找文件位置whichwhereislocatefind 文件操作&#xff08;复制、…...

在屏蔽任何FRP环境下从零开始搭建安全的FRP内网穿透服务

背景 本人目前在境外某大学读博&#xff0c;校园网屏蔽了所有内网穿透的工具的数据包和IP访问&#xff0c;为了实现在家也能远程访问服务器&#xff0c;就不得不先开个学校VPN&#xff0c;再登陆。我们实验室还需要访问另一个大学的服务器&#xff0c;每次我都要去找另一个大学…...

OpenGL-ES 学习(1)---- AlphaBlend

AlphaBlend OpenGL-ES 混合本质上是将 2 个片元的颜色进行调和(一般是求和操作)&#xff0c;产生一个新的颜色 OpenGL ES 混合发生在片元通过各项测试之后&#xff0c;准备进入帧缓冲区的片元和原有的片元按照特定比例加权计算出最终片元的颜色值&#xff0c;不再是新&#xf…...

Python 函数的学习笔记

Python 函数的学习笔记 0. Python 函数的概要说明1. 自定义函数示例2. 匿名函数示例3. 内置函数示例3-1. filter() 示例3-2. map() 示例3-3. reduce() 示例 4. 可变长参数*args和**kwargs示例4-1. *args&#xff08;Positional Variadic Arguments&#xff09;4-2. **kwargs&am…...

详解 Redis 实现数据去重

✨✨ 欢迎大家来到喔的嘛呀的博客✨✨ &#x1f388;&#x1f388;希望这篇博客对大家能有帮助&#x1f388;&#x1f388; 目录 言 一. Redis去重原理 1. Redis Set 数据结构 2. 基于 Set 实现数据去重 3. 代码示例 4. 总结 …...

FreeRTOS 延迟中断处理

采用二值信号量同步 二值信号量可以在某个特殊的中断发生时&#xff0c;让任务解除阻塞&#xff0c;相当于让任务与中断 同步。这样就可以让中断事件处理量大的工作在同步任务中完成&#xff0c;中断服务例程(ISR) 中只是快速处理少部份工作。如此&#xff0c;中断处理可以说是…...

计网体系结构

计算机网络的概述 概念 网络&#xff1a;网状类的东西或系统。 计算机网络&#xff1a;是一个将分散的、具有独立性功能的计算机系统&#xff0c;通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统。即计算机网络是互连(通过通信链路互连…...

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度&#xff0c;及页面响应时间&#xff0c;还有响应代码&#xff1b; web Scenario&#xff1a; web场景&#xff08;站点&#xff09;web page &#xff1a;web页面&#xff0c;一个场景有多…...

VMware虚拟机网络配置

VMware虚拟机网络配置 桥接模式NAT网络 桥接模式 桥接模式其实就是借助你宿主机上的网卡进行联网和通信&#xff0c;所以相当于虚拟机和宿主机平级&#xff0c;处于同一个网段中。 配置要点&#xff1a; 注意选择正确的宿主机网卡 查看宿主机的网络信息&#xff0c;这些信息指…...

代码随想录算法训练营DAY18 | 二叉树 (5)

一、LeetCode 513 找树左下角的值 题目链接&#xff1a;513.找树左下角的值https://leetcode.cn/problems/find-bottom-left-tree-value/ 思路一&#xff1a;递归回溯全局变量比深度。 class Solution {int Max_depth 0;int result 0;public int findBottomLeftValue(TreeNo…...

企业微信自动推送机器人的应用与价值

随着科技的快速发展&#xff0c;企业微信自动推送机器人已经成为了企业数字化转型的重要工具。这种机器人可以自动推送消息、执行任务、提供服务&#xff0c;为企业带来了许多便利。本文将探讨企业微信自动推送机器人的应用和价值。 一、企业微信自动推送机器人的应用 企业微信…...

Matplotlib plt.plot:从入门到精通,只需一篇文章!

Matplotlib plt.plot&#xff1a;从入门到精通&#xff0c;只需一篇文章&#xff01; 利用Matplotlib进行数据可视化示例 &#x1f335;文章目录&#x1f335; &#x1f4ca; 1. 引言&#xff1a;为什么Matplotlib在数据可视化中如此重要&#xff1f;&#x1f4ca;✨ 2. plt.pl…...

Linux中sigaction函数和SIGCHLD信号的使用

sigaction函数&#xff1a; 函数说明&#xff1a;注册一个信号处理函数 函数原型&#xff1a;int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 函数参数&#xff1a; signum:捕捉的信号act:传入参数&#xff0c;…...

【MySQL】操作库 —— 表的操作 -- 详解

一、增加表 1、创建表 mysql> create database [if not exists] table_name ( -> field1 datatype, -> field2 datatype, -> field3 datatype -> ) character set 字符集 collate 校验规则 engine 存储引擎; 注意 &#xff1a;最后一行也可以写成&#x…...

ZigBee学习——在官方例程实现组网

✨Z-Stack版本&#xff1a;3.0.2 ✨IAR版本&#xff1a;10.10.1 ✨这篇博客是在善学坊BDB组网实验的基础上进行完善&#xff0c;并指出实现的过程中会出现的各种各样的问题&#xff01; 善学坊教程地址&#xff1a; ZigBee3.0 BDB组网实验 文章目录 一、基础工程选择二、可能遇…...

OpenClaw轻量化方案实测:nanobot镜像性能与成本分析

OpenClaw轻量化方案实测&#xff1a;nanobot镜像性能与成本分析 1. 为什么需要轻量化OpenClaw方案 第一次听说OpenClaw时&#xff0c;我就被它的自动化能力吸引了——能让AI像人类一样操作我的电脑&#xff0c;完成各种重复性工作。但当我真正尝试在本地部署标准版OpenClaw时…...

【部署】windows下虚拟机OpenClaw Ubuntu 24.04.4 安装指南

未来已来,只需一句指令,养龙虾专栏导航,持续更新ing… 概述 前置环境:win10/11、vmware等虚拟机(安装时注意勾选VMware Tools、cpu可以分配2C,内存建议4G,硬盘空间建议给40G) 系统要求 Node.js 22+:安装脚本可自动检测并安装(下文补充手动安装方案); Ubuntu 24.0…...

基于springboot服装生产管理的设计与实现.7z(源码+论文+任务书+开题报告)

[点击下载链接》》》] 本协力服装厂服装生产管理系统设计目标是实现协力服装厂服装生产的信息化管理&#xff0c;提高管理效率&#xff0c;使得协力服装厂服装生产管理作规范化、科学化、高效化。 本文重点阐述了协力服装厂服装生产管理系统的开发过程&#xff0c;以实际运用为…...

IT运维监控/可观测性

?? 前言&#xff1a;为什么选择 OpenClaw 对接企业微信&#xff1f; 在2026年的企业数字化办公浪潮中&#xff0c;OpenClaw&#xff08;曾用名 Clawdbot、Moltbot&#xff09;已成长为国内领先的开源AI自动化代理工具。凭借其“自然语言驱动、插件化拓展、多平台无缝集成”的…...

终极指南:用Java打造你的专属微信机器人 - 深入解析wechat-api框架

终极指南&#xff1a;用Java打造你的专属微信机器人 - 深入解析wechat-api框架 【免费下载链接】wechat-api &#x1f5ef; wechat-api by java7. 项目地址: https://gitcode.com/gh_mirrors/we/wechat-api 想象一下这样的场景&#xff1a;每天早上7点&#xff0c;你的微…...

电子小白之二极管

很多年前我第一次看到电路图上各种二极管符号时&#xff0c;心里只有一个想法&#xff1a;这玩意儿到底干嘛用的&#xff1f;硬件部门同事告诉我一句话&#xff0c;瞬间就通了&#xff1a; 正向导通&#xff0c;反向截止&#xff1b;整流防反&#xff0c;稳压发光。 今天就用最…...

扩散模型实现:从环境搭建到图像生成的全流程指南

扩散模型实现&#xff1a;从环境搭建到图像生成的全流程指南 【免费下载链接】Diffusion-Models-pytorch Pytorch implementation of Diffusion Models (https://arxiv.org/pdf/2006.11239.pdf) 项目地址: https://gitcode.com/gh_mirrors/di/Diffusion-Models-pytorch …...

从“高危论文”到“安心提交”:百考通双降技术,为真实思考护航

在一个人工智能可以生成万字论文的时代&#xff0c;最讽刺的现实不是机器冒充人类&#xff0c; 而是人类因写得太像“人写的论文”&#xff0c;被当作机器。 2026年&#xff0c;无数高校学子正陷入一场无声的困境&#xff1a; 你没用AI&#xff0c;却因逻辑清晰被标记&#xf…...

【AI+教育】告别“硬啃”长文,它把文档直接变成你的专属视频课

在这个信息大爆炸的时代,我们最不缺的就是资料:网盘里屯满的行业报告、收藏了却从未打开的学术论文、买来盖泡面的大部头教材……知识就在那里,但“学进去”实在太难了。 秘塔推出的“今天学点啥”,就是为了解决这个痛点而生的。它的核心逻辑非常简单粗暴:你把看不进去的文…...

3大核心步骤打造专属翻译引擎:Zotero PDF Translate高级扩展指南

3大核心步骤打造专属翻译引擎&#xff1a;Zotero PDF Translate高级扩展指南 【免费下载链接】zotero-pdf-translate 支持将PDF、EPub、网页内容、元数据、注释和笔记翻译为目标语言&#xff0c;并且兼容20多种翻译服务。 项目地址: https://gitcode.com/gh_mirrors/zo/zoter…...