[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…

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…

淘宝商品数据爬取商品信息采集数据分析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…

数据库|三地五中心,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…

【小沐学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;我们通常希望通知另一个小程序。更普…

JavaScript的书写方式

JavaScript的书写方式 目前较为流行的是第二种和第三种&#xff0c;第一种很少见。在第二种和第三种推荐使用第三种&#xff0c;因为在日常开发/工作中&#xff0c;第三种是最为常见的 1.行内式 把JS代码嵌入到html元素内部 示例代码 运行效果 由于JS中字符串常量可以使用单引…

搜维尔科技:CATIA为建筑、基础设施和城市规划提供虚拟孪生力量

超越传统项目交付方法限制的协作 复杂建筑和基础设施项目开发的设计和工程流程需要多个利益相关者和所有项目阶段的密切合作。此外&#xff0c;日益复杂的施工项目要求所有团队都依赖 CATIA 和3D EXPERIENCE 虚拟孪生技术作为“通用语言”&#xff0c;以促进协作并减少阶段之间…

K8S(kubernetes) 部署运用方式汇总

k8s 部署运用这边汇总两类&#xff0c;第一种是命令版本。第二种是文本版本&#xff0c;通过创建yaml文件方式。 此次目标&#xff1a;通过k8s创建nginx,端口80并且可以被外网访问。 kubectl get namespaces 一、创建命名空间 首先创建一个命名空间&#xff0c;有了命名空间后…

paimon表读优化-Read-optimized Table

目录 概述实践文档测试 结束 概述 paimon 版本 : 0.7 测试目标: 类似 hudi ro 表 实践 文档 Read-optimized Table 测试 0: jdbc:hive2://10.32.36.142:10009/> select * from trace_log_refdes_hive_ro$ro limit 10;24/02/28 14:24:33 INFO ExecuteStatement: Execu…