OveUI博客
老前端的戎码生涯

HTML/CSS

前端飞速发展,新时代 HTML 新特性大盘点-UI树欲静

前端飞速发展,新时代 HTML 新特性大盘点

随在JavaScript日益成为Web开发的基石,CSS不断扩展其功能边界的同时,HTML,虽然表面上似乎保持着稳定的步伐,实际上却蕴含着巨大的潜力和待发掘的宝藏。为了深入探索HTML的当前状态与未来趋势,近期国外博主进行 了 State ...

赞(0)OveUIOveUI阅读(15)
CSS 也能实现 if 判断?实现动态高度下的不同样式展现-UI树欲静

CSS 也能实现 if 判断?实现动态高度下的不同样式展现

今天在群里,有个小伙伴问了这么一道很有趣的问题: 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。 这个效果在很多场景都会出现,可以算是一个高频场景,那么在今天,我们能...

赞(1)OveUIOveUI阅读(38)
CSS 实现 10 种现代布局-UI树欲静

CSS 实现 10 种现代布局

01. 超级居中:place-items: center 对于第一个“单行”布局,让我们解决所有 CSS 领域中最大的谜团:居中。我想让您知道,使用 place-items: center 会让此操作比您想象的容易。 首先指定 grid 作...

赞(0)OveUIOveUI阅读(111)

18个很有用的 CSS 技巧

今天来分享 18 个鲜为人知但很有用的 CSS 技巧! 图片文字环绕 shape-outside 是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域: shape-outside 属性定义了一个可以是非矩形的形状,相邻的内联内...

赞(0)OveUIOveUI阅读(162)

新的 CSS 视口单位:svh、lvh、dvh!

CSS 的 Viewport单位听起来很棒。 如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!!! vw、vh 的问题 要调整视口大小,可以使用 vw 和 vh 单...

赞(2)OveUIOveUI阅读(414)

一次搞懂数据大屏适配方案 (vw vh、rem、scale)

前言 当接到可视化大屏需求时,你是否会有以下疑问👇 如何做一款定制化的数据大屏? 开发可视化数据大屏如何做自适应? vm vh、rem、scale 到底哪种比较好? 时间不够,有没有偷懒的方法? 而解决了适配问题后,后面就只...

赞(0)OveUIOveUI阅读(497)

css中好用的clamp()函数

clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。 语法 clamp() 函数接收三个用逗号分隔的表达式作为参数,按最小值、首选值、最大值的顺序排列。 wi...

赞(0)OveUIOveUI阅读(564)

CSS3伪类大全汇总

所有 CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 <p> 元素之后插入内容。 ::before p::before 在每个 <p> 元素之前插入内容。 ::first-lette...

赞(0)OveUIOveUI阅读(566)

深入研究 CSS 文本换行

今天来研究一下 CSS 中的文本换行。正常情况下,在固定宽度的盒子中的中文会自动换行。但是,当遇到非常长的英文单词或者很长的URL时,文本可能就不会自动换行,而会溢出所在容器。幸运的是,CSS 为我们提供了一些和文本换行相关的属性; ove...

赞(0)OveUIOveUI阅读(673)