当前标签:CSS, 共7篇文章
CSS变量的简单应用
CSS变量可以用来优化代码,比如相同的颜色值散落在代码各处,使用CSS变量可以将颜色值收敛起来,将来发生调整可以很简单地一键替换。除此之外,还有一些场景也特别适合使用CSS变量,比如前端主题化(深色模式等)、响应式布局等。 本文简单介绍一下CSS变量的一些使用。
实现关键词高亮:在HTML字符串中匹配“跨标签关键词”
很久之前(好像刚好是一年前)写过一个Vue组件,可以匹配文本内容中的关键字然后高亮,类似浏览器搜索结果。实现原理是,将文本字符串中的关键字搜索出来,然后使用特殊的标签(本文示例使用font标签)包裹关键词替换匹配内容,最后得到一个HTML字符串,渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。当时的实现过于简单,没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到,就又思考了这个问题,发现并不是那么麻烦,写了几行代码解决了一下。
ElementUI表格el-table表头固定自适应高度解决方案
el-table的height属性可以方便地实现表格固定,但是这个值该设置为多少以适配屏幕大小呢?设置过小,则可能出现可视区域内有空白位置,但是表格内却出现滚动条;设置过大,则在一些小屏幕设备上浏览时,页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的,为了解决这个问题,我们需要动态地计算页面空白区域的高度,然后设置到height属性,即根据页面大小,动态计算height属性。
svg实现环形进度条
环形进度条虽然很常用,但基本都是直接用各种组件库来搞,所以在此之前也没有自己真正实现过。偶然思考了以下这个问题,直接用CSS的话,好像还不太好实现,所以看了下svg实现的方案,也趁机熟悉一下svg——svg实现环形进度环出乎意料的简单。
CSS布局:三栏布局
其实三栏布局比较简单,而且方法也有很多。今天了解了一下传统的三栏布局方法:圣杯布局、双飞翼布局,本文简单记录一下。 所谓三栏布局,通常是指左右两栏定宽,中间一栏自适应页面宽度填满剩余空间的布局。
CSS布局:三栏布局
CSS垂直居中,你会多少种写法?
谈及HTML元素居中展示,涉及到水平居中和垂直居中,以及水平垂直居中。由于HTML文档流是水平方向的,所以水平方向上的布局控制比垂直方向要简单很多,居中也是如此。CSS控制居中是前端开发中非常常用的布局技能,本文列出几种CSS控制元素居中的几种方法。
CSS垂直居中,你会多少种写法?