最近这两天准备鼓捣一下markdown文本编辑器，现在写公众号一般用的都是 网页 的编辑器。 说实话，很方便，但是痛点也很明显。 研究过程中发现一个以前从未在意过的标签: <q> 标签。

面对图片适配，你在 <img>和 <picture>之间纠结过吗？其实它们是互补工具，而非替代关系。本文为你提供一份清晰指南，助你根据场景快速做出正确选择，实现图片的完美适配与高效性能。

20个实用CSS技巧，涵盖布局、动画、响应式等核心场景。从变量管理到毛玻璃效果，从Flex布局到自定义滚动条，每个技巧都配有详细代码和适用场景。适合前端新手快速上手，也能帮老司机提升开发效率。

在 Flex 布局中，文字省略常常因为父层默认的 min-width: auto 而失效。只需在包裹文字的 Flex 容器上添加 min-width: 0，即可让内部内容根据空间压缩，是文本缩略生效。

40岁老前端学习记录第5波，每半年一次。对前四次学习内容感兴趣的可以去我的掘金专栏“每周学习记录”进行了解。以前端前沿新特性为主。

在前端开发的日常中，我们常常围绕着常见的 CSS 属性打转，却忽略了那些藏在规范角落里的小众特性。它们看似不起眼，却能在关键时刻简化代码、提升交互质感，成为提升开发效率的秘密武器。今天，就为大家盘点

你是不是有过这样的经历：辛辛苦苦做好的网页，在电脑上看起来整整齐齐，但一放到手机或平板上，布局就变得乱七八糟，要么挤成一团，要么空白一大片。 然后你上网一搜解决办法，全都是让你写一堆看起来超复杂的 @

前言 作为前端最烦恼的莫过于css了，它“看似简单、结果复杂”，还牵扯到 浏览器机制、全局作用域、兼容性、可维护性 等等。而且UI库和框架实在太多了。你会选择Tailwind CSS、MUI、Boot

全面梳理优化：固定尺寸稳住CLS；首屏LCP图提优先级、禁用懒加载；用AVIF/WebP与w+sizes做响应式；首屏外懒加载与异步解码；配合content-visibility与预加载。