HTML/CSS

先上一段让你在媒体查询里写到手酸的“断点地狱”： 三个断点，只调一个字号。宽屏要大、手机要小，中间要平滑过渡——用媒体查询硬写也行，但断点一多就失控。 CSS 的流式数学函数一次性解决： 一行代码，不用断点，不用媒体查询，字号在 16px ...

赞(0)lee12142026-08-08阅读(167)

先上一段让你用 PS 做模糊效果的“复杂代码”： 能实现毛玻璃效果，但你得额外维护一层背景，并同步尺寸、层级和模糊参数。每个毛玻璃卡片都要写一套伪元素，代码量也不小。 backdrop-filter 一行搞定： 它直接对元素后面的内容做模糊...

赞(0)lee12142026-08-07阅读(285)

先上一段让你滚动时卡成 PPT 的长列表代码： 10000 个 DOM 节点一次性渲染，页面加载时卡死 3 秒，滚动时掉帧。你试过虚拟列表，但实现复杂度上来了；你试过分页加载，但产品要的是无限滚动。 content-visibility: ...

赞(0)lee12142026-08-06阅读(184)

先上一段让你 UI 被吐槽的“图片变形”代码： 设计师给的是 16:9 的图，你要显示在 1:1 的框里。直接设置宽高，图片被拉扁了。用 background-image 做背景图，但又没法用 <img> 的语义（SEO 吃不到...

赞(0)lee12142026-08-06阅读(184)

先上一段让你组件被全局断点拖垮的代码： 组件是响应式了，但它是根据视口宽度的——不管这个组件被放到页面的哪个位置，只要屏幕宽度小于 768px，它就会变成纵向，即使它所在容器非常宽。 媒体查询的局限性：它只能看整个浏览器的窗口。你在布局里把...

赞(0)lee12142026-08-06阅读(160)

用了十几年 CSS，我们一直在抱怨同一件事：只能从父选 子，不能从子反选父。直到 :has() 出现，这条祖训被彻底打破。 一、那个困扰前端十年的难题 先来感受一下痛点。假设你要实现：当一个卡片里有图片时，给卡片加上边框。 过去你只能这样写...

赞(0)lee12142026-07-01阅读(270)

绝了！纯原生、即复即用，新手也能直接抄作业👇 布局操作 · 文本操作 · 视觉效果 · 交互动效 还在手写媒体查询？还在用 JS 算元素宽高？还在靠 margin: 0 auto 做居中？ 醒醒，2026 年了。 这 14 个 CSS 现代...

赞(0)lee12142026-06-14阅读(310)

若要设置为与视口一样高，您可以使用 vw 和 vh 单位。 vw 和 vh 我们已经很熟悉了，不多讲 ，如下图： 我们用的比较少的有vmin和vmax： vmin是在vh和vw中获取最小值 vmax是在vh和vw中获取最大值 这些单位对各种...

赞(0)lee12142025-11-16阅读(988)

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

赞(0)lee12142025-11-15阅读(910)

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

赞(0)lee12142025-11-15阅读(907)