转载自作者：独元殇 aspect-ratio 宽高比 如果，你 aspect-ratio 的值写成 1 ，那么就可以得到一个完美的正方形了！ object-fit 它有两个值，一个是 cover （图

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情。我身边一些非互联网技术从业的朋友，偶尔对我的工作表示兴趣。所以我开了一个趣学前端系列。

为什么 grid-template-columns: 1fr; 会把容器撑大？ 在用 CSS Grid 布局时，很多人都会这样写： 看起来应该是“单列占满父容器”，但实际效果却可能出现 —— 容器比父

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

tooltip是一个非常常见的交互，一般用于补充文案说明。比如下面这种（蓝色边框表示屏幕边缘） 通常tooltip都会有一个固定的方向，比如top表示垂直居中向上。 但是，如果提示文案比较多，提示区域

CSS实现文字横向无限滚动效果 一、效果 二、核心：文字滚动效果样式 这部分是实现文字循环滚动的关键，分为容器和内容两部分： 1. 滚动容器样式 overflow: hidden：隐藏容器外的内容（核

纯 CSS 实现带连接线的树形组件(div版)，如需兼容更低版本的浏览器，js可以选用jQuery实现版。

这套 CSS 规则的核心是一种非常巧妙的“视觉欺骗”技巧，它通过 主体 和 两个伪元素 的拼接，来创造出带有“反向圆角”的 Tab 凸起效果。 其实现思路可以拆解为以下三个步骤： 1. 主体形状 (.

想象一下，你精心布置了一排座位，却突然临时需要调整几个人的位置 —— 在 CSS 布局里，order参数就是这个 "无需重构座位的插队许可"。