[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.hqwc.cn/news/497178.html

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

相关文章

【React架构 - Scheduler中的MessageChannel】

前序 我们都知道JS代码是在浏览器5个进程(下面有介绍)中渲染进程中的Js引擎线程执行的,其他还有GUI渲染线程、定时器线程等,而页面的布局和绘制是在GUI线程中完成的,这些线程之间是互斥的,所以在执行Js的同时会阻塞页面的渲染绘制…

网络爬虫的危害,如何有效的防止非法利用

近年来,不法分子利用“爬虫”软件收集公民隐私数据案件屡见不鲜。2023年8月23日,北京市高级人民法院召开北京法院侵犯公民个人信息犯罪案件审判情况新闻通报会,通报侵犯公民个人隐私信息案件审判情况,并发布典型案例。在这些典型案…

从零开始手写RPC框架(1)

学习java后端也有一段时间了,在网上寻一些教程和github上的开源库,学习从零开始手写一个RPC,学习各位大牛的代码适当修改,并贴上自己的一些见解和注释。 目录 RPC简介RPC和HttpClient的区别和共同点常见RPC框架 RPC框架设计常见序…

知识付费APP软件开发流程

现在在网上学习知识大部分免费的很多,付费也站一部分。也有些人会利用稀少的资源进行付费推广,在以后的发展中付费的趋势将会越来越严重,毕竟别人辛苦制作的知识很轻松的就被别人拿去卖了就会出现付出和收入不成正比。知识付费的APP软件也将会…

Git自动忽略dll文件的问题

检查了半天发现是sourcetreee的全局忽略文件导致, 从里面删除dll即可。 我是干脆直接删了全局忽略,太恶心了,如下: #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…

C#,动态规划(DP)金矿问题(Gold Mine Problem)的算法与源代码

1 金矿问题(Gold Mine Problem) 给定一个N*M尺寸的金矿,每个点都有一个非负数表示当前点所含的黄金数目,最开始矿工位于第一列,但是可以位于任意行。矿工只能向右,右上,右下三个方向移动。问该…

Java项目:29 基于SpringBoot+thymeleaf实现的图书管理系统

作者主页:舒克日记 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 基于SpringBootthymeleaf实现的图书管理系统分为管理员、读者两个登录角色,一共是8个功能模块 管理员权限 图书管理: 添加图…

论文设计任务书学习文档|基于智能搜索引擎的图书管理系统的设计与实现

文章目录 论文(设计)题目:基于智能搜索引擎的图书管理系统的设计与实现1、论文(设计)的主要任务及目标2、论文(设计)的主要内容3、论文(设计)的基本要求4、进度安排论文(设计)题目:基于智能搜索引擎的图书管理系统的设计与实现 1、论文(设计)的主要任务及目标 …

STM32 Cubemx配置SPI编程(使用Flash模块)

文章目录 前言一、W25Q64模块介绍二、STM32Cubemx配置SPI三、SPI HAL库操作函数分析3.1查询方式3.2中断方式 四、Flash时序分析1.读器件ID指令2.写使能3.擦除扇区4.页编程5.读数据6.读状态寄存器 五、Flash驱动程序编写1.代码编写测试 总结 前言 本篇文章来为大家讲解一下Flas…

安全评估与安全评价:区分核心概念

在当今信息化社会中,保护数据和网络安全变得尤为重要。为了确保系统和组织的安全,我们需要了解并正确运用安全评估和安全评价这两个核心概念。虽然它们听起来相似,但其实它们有着不同的定义和目的。 首先,安全评估是一种系统性的…

如何选择合适的汽车芯片ERP系统?

随着汽车产业的飞速发展,汽车芯片作为关键组件,其管理变得愈发重要。为了高效管理汽车芯片的生产、销售、库存等各个环节,许多企业开始引入汽车芯片ERP(企业资源规划)系统。那么,如何选择合适的汽车芯片ERP系统呢? 明确需求是关键…

unity学习(42)——创建(create)角色脚本(panel)——UserHandler(收)+CreateClick(发)——服务器收包2

1.解决上一次留下的问题: log和reg的时候也有session,输出看一下这两个session是同一个不: 实测结果reg log accOnline中的session都是同一个对象,但是getAccid时候的session就是另一个了。 测试结果,说明在LogicHan…