[CSS]文字旁边的竖线以及布局知识

场景:文字前面常见加竖线。

  .center-title {    常见内容color: #FFF;font-family: "Source Han Sans CN";font-size: 50px;font-style: normal;font-weight: 700;line-height: normal;position: relative;  要定位left: 16px;  这里是想拉开间距margin-bottom: 8px;}.center-title::before {content: "";width: 7px;height: 34px;background: #498FFF;position: absolute;/*绝对定位*/top: 50%;/*Y轴方向偏移自身高度的50%*/transform: translatey(-50%);/*Y轴方向偏移微调*/left: -16px;}

 应该有更好的设置空隙的方法,但是我不是很清楚,知道的大神麻烦指点一下~~

场景:如图

黑色边框为整个屏幕,我平常会习惯性的给3即(绿色盒子)按宽度的百分比取值然后设置为弹性盒子,但是当屏幕较小的时候,有可能会出现2(红色盒子)将1(紫色盒子)遮盖的情况。

 方法:

这是这里的绿色盒子应该写为固定的值,如果绿色盒子过长就会出现,绿色盒子超过黄色盒子的情况。因此这里还需要将黄色盒子设置一个min-width:即ui图上绿色盒子的宽度已经外边距。有其他方法,也请多指教~

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

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

相关文章

Redisson限流算法

引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.12.3</version> </dependency>建议版本使用3.15.5以上 使用 这边写了一个demo示例&#xff0c;定…

Vue+Flask电商后台管理系统

在这个项目中&#xff0c;我们将结合Vue.js前端框架和python后端框架Flask&#xff0c;打造一个功能强大、易于使用的电商后台管理系统 项目演示视频&#xff1a; VueFlask项目 目录 前端环境&#xff08;Vue.js&#xff09;&#xff1a; 后端环境&#xff08;python-Flask&…

Mysql REGEXP正则运算符

# 邮箱h开头 mysql> select email form xxx where email REGEXP ^h;

改进的yolo交通标志tt100k数据集目标检测(代码+原理+毕设可用)

YOLO TT100K: 基于YOLO训练的交通标志检测模型 在原始代码基础上&#xff1a; 修改数据加载类&#xff0c;支持CoCo格式&#xff08;使用cocoapi&#xff09;&#xff1b;修改数据增强&#xff1b;validation增加mAP计算&#xff1b;修改anchor&#xff1b; 注: 实验开启weig…

STM32F4XX - GPIO设置

一个简单的初始化代码如下&#xff1a; GPIO_InitTypeDef GPIO_InitStructure;RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOA, ENABLE);//使能GPIOB时钟GPIO_InitStructure.GPIO_Pin Buzzer_PIN;//LED对应IO口GPIO_InitStructure.GPIO_Mode GPIO_Mode_OUT;//普通输出模式GP…

YOLOv9 最简训练教学!

一、代码及论文链接&#xff1a; 代码链接&#xff1a;GitHub - WongKinYiu/yolov9: Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 论文链接&#xff1a;https://arxiv.org/abs/2402.13616 二、使用步骤 1…

Ruoyi框架使用过程碰到的问题——请求地址‘/***/***‘,认证失败‘未能读取到有效Token‘,无法访问系统资源

问题&#xff1a;本人使用Ruoyi框架表单构建器自动生成的Vue表单文件&#xff0c;使用el-upload的自动上传或者this.$refs[upload].submit()函数都报错认证失败未能读取到有效Token,无法访问系统资源 了解本框架的或多或少了解其axios请求统一抽取到utils/require.js中&#x…

淘宝商品数据爬取商品信息采集数据分析API接口详细步骤展示(含测试链接)

01 数据采集 数据采集是数据可视化分析的第一步&#xff0c;也是最基础的一步&#xff0c;数据采集的数量和质量越高&#xff0c;后面分析的准确的也就越高&#xff0c;我们来看一下淘宝网的数据该如何爬取。点此获取淘宝API测试key&密钥 淘宝网站是一个动态加载的网站&a…

前端css、js、bootstrap、vue2.x、ajax查漏补缺(1)

学到的总是忘&#xff0c;遇到了就随手过来补一下 1.【JS】innerHTML innerHTML属性允许更改HTML元素的内容可以解析HTML标签 2.【CSS】display: none 设置元素不可见&#xff0c;不占空间&#xff0c;约等于将元素删除一样&#xff0c;只是源代码还存在 3.【CSS】行内样式 4.【…

工作微信统一管理(还带监管功能)

1.会话页面(可统一管理多个微信号、聚合聊天、手动搜索添加好友、通过验证请求、查看好友的朋友圈等) 2.聊天历史(可查看 所有聊天记录&#xff0c;包括手机.上撤回、删除的消息) 3.群发助手(可以一 -次群发多个好友和群&#xff0c;还可以选择定时发送&#xff0c;目前还在内测…

PlantUML简介

PlantUML简介 plantUML是一款开源的UML图绘制工具&#xff0c;支持通过文本来生成图形&#xff0c;使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。你可以在IDEA中安装插件来使用PlantUML, 或者在Visual Studio Code中安装插件。 也可以在dra…

使用npm i命令时一直idealTree:npm: sill idealTree buildDeps卡住不动

1.清除缓存 npm cache verify2.设置镜像源 npm config set registry https://registry.npmmirror.com3.查看是否设置成功 npm config get registry4.运行 npm i⚠️⚠️⚠️注意如果执行以上操作还是不行的话再执行以下命令⚠️⚠️⚠️ 关掉strict-ssl即可 npm config s…

数据库|三地五中心,TiDB POC最佳实践探索!

目录 一、POC测试背景 //测试环境信息 二、流量单元化控制 //需求 //解决方案 三、跨城获取TSO的影响与探索 //问题描述与初步分析 //优化方案 四、灾难恢复与流量切流 //需求 //pd leader 切换 //region leader t切换 五、写在最后 一、POC测试背景 在某地震多发省…

sylar高性能服务器-日志(P43-P48)内容记录

文章目录 P43&#xff1a;Hook01一、HOOK定义接口函数指针获取接口原始地址 二、测试 P44-P48&#xff1a;Hook02-06一、hook实现基础二、class FdCtx成员变量构造函数initsetTimeoutgetTimeout 三、class FdManager成员变量构造函数get&#xff08;获取/创建文件句柄类&#x…

mongoDB 优化(1)索引

1、创建复合索引&#xff08;多字段&#xff09; db.collection_test1.createIndex({deletedVersion: 1,param: 1,qrYearMonth: 1},{name: "deletedVersion_1_param_1_qrYearMonth_1",background: true} ); 2、新增索引前&#xff1a; 执行查询&#xff1a; mb.r…

火灾安全护航:火灾监测报警摄像机助力建筑安全

火灾是建筑安全中最常见也最具破坏力的灾难之一&#xff0c;为了及时发现火灾、减少火灾造成的损失&#xff0c;火灾监测报警摄像机应运而生&#xff0c;成为建筑防火安全的重要技术装备。 火灾监测报警摄像机采用高清晰度摄像头和智能识别系统&#xff0c;能够全天候监测建筑内…

TDengine 研发分享:利用 Windbg 解决内存泄漏问题的实践和经验

内存泄漏是一种常见的问题&#xff0c;它会导致程序的内存占用逐渐增加&#xff0c;最终导致系统资源耗尽或程序崩溃。AddressSanitizer (ASan) 和 Valgrind 是很好的内存检测工具&#xff0c;TDengine 的 CI 过程就使用了 ASan 。不过这次内存泄漏问题发生在 Windows 下&#…

JVM的深入理解

1、JVM&#xff08;Java虚拟机&#xff09;&#xff1a;我们java编译时候&#xff0c;下通过把avac把.java文件转换成.class文件&#xff08;字节码文件&#xff09;&#xff0c;之后我们通过jvm把字节码文件转换成对应的cpu能识别的机器指令&#xff08;翻译官角色&#xff09…

【国产MCU】-CH32V307-I2C控制器

I2C控制器 文章目录 I2C控制器1、I2C模块介绍2、I2C驱动API介绍3、I2C使用实例3.1 主模式3.1.1 主设备发送模式和主设备接收模式3.1.2 DMA方式发送3.2 从模式内部集成电路总线(I2C)广泛用在微控制器和传感器及其他片外模块的通讯上,它本身支持多主多从模式,仅仅使用两根线(…

【小沐学QT】QT学习之信号槽使用

文章目录 1、简介2、代码实现2.1 界面菜单“转到槽”方法2.2 界面信号槽编辑器方法2.3 QT4.0的绑定方法2.4 QT5.0之后的绑定方法2.5 C11的方法2.6 lamda表达式方法 结语 1、简介 在GUI编程中&#xff0c;当我们更改一个小部件时&#xff0c;我们通常希望通知另一个小程序。更普…