HTML/CSS

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

赞(1)OveUI2024-03-28阅读(17)

8 月 26 日，2023 年度 State of CSS 调查（CSS 现状调查）结果正式公布！2023 年 CSS 状况调查于 2023 年 6 月 15 日至 7 月 15 日进行，共收到了 9108 份回复。下面就来通过这份调查结果...

赞(0)OveUI2023-08-31阅读(128)

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

赞(0)OveUI2023-06-09阅读(106)

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

赞(0)OveUI2023-04-02阅读(159)

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

赞(2)OveUI2023-04-02阅读(393)

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

赞(0)OveUI2023-02-13阅读(460)

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

赞(0)OveUI2022-08-29阅读(549)

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

赞(0)OveUI2022-08-19阅读(563)

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

赞(0)OveUI2022-06-20阅读(667)

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

赞(0)OveUI2022-05-21阅读(811)