OveUI博客
老前端的戎码生涯

HTML/CSS

CSS 实现 10 种现代布局

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

赞(0)OveUIOveUI阅读(90)

18个很有用的 CSS 技巧

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

赞(0)OveUIOveUI阅读(141)

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

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

赞(1)OveUIOveUI阅读(343)

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

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

赞(0)OveUIOveUI阅读(374)

css中好用的clamp()函数

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

赞(0)OveUIOveUI阅读(504)

CSS3伪类大全汇总

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

赞(0)OveUIOveUI阅读(556)

深入研究 CSS 文本换行

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

赞(0)OveUIOveUI阅读(665)
助你成为 CSS 大师的18个 GitHub 仓库-UI树欲静

助你成为 CSS 大师的18个 GitHub 仓库

将所有资源进一步分类,从学习基础知识到样式指南、最佳实践、有用的技巧和技巧,以及您可以学习的其他资源,以进一步扩展您的 CSS 知识。 学习资源 1.Awesome-css-learning ⭐ GitHub 星数:1k+ 最...

赞(0)OveUIOveUI阅读(793)

浅谈逻辑选择器 is、where、not、has

在 CSS 选择器家族中,新增这样一类比较新的选择器 —逻辑选择器,目前共有 4 名成员: :is :where :not :has 本文将带领大家了解、深入它们。做到学以致用,写出更现代化的选择器。 :is 伪类选择器 :is...

赞(0)OveUIOveUI阅读(726)