精选推荐

最新动态

CSS网格单位fr详解_理解弹性比例片段在布局中的分配

fr 不是像素、百分比或 em,它不表示绝对长度,也不依赖父容器尺寸的百分比计算;它是 CSS Grid 中专用于**分配剩余可用空间**的弹性单位。当所有 grid-template-columns 或 grid-template-rows 用 fr 定义时,浏览器先扣除固定尺寸(如 100px、auto、minmax(200px, 1fr) 中的最小值部分),再把剩下的空间按 fr 数值比例切分。

CSS溢出内容处理_overflow属性的scroll、hidden与auto

很多人用 overflow: scroll 是想“确保能滚动”,结果发现滚动条永远存在,占空间、影响布局,尤其在 macOS 上还带惯性滚动干扰点击。这不是 bug,是规范行为:scroll 的语义就是「始终启用滚动机制」,浏览器必须渲染滚动条(哪怕没内容可滚)。

css浮动图片和文字间距不一致怎么办_使用margin和padding调整

浮动图片后,紧随其后的文字出现上下间距不一致,常见于段落首行被图片“顶起”或末行“塌陷”。这不是文字本身的问题,而是 float 脱离文档流后,行框(line box)高度计算异常所致——尤其当图片高度与行高不匹配、或字体渲染存在 subpixel 差异时更明显。

CSS平滑旋转动画_利用transform:rotate打造加载进度条

直接写 transform: rotate(360deg) 做无限旋转,浏览器很可能在 0° 和 360° 交界处闪一下或顿一下——这不是 bug,是 CSS 动画对角度值做插值时的自然行为。浏览器会按最短路径补间,比如从 350° 到 10°,它可能走 -340° 而不是 +20°,导致逆向转动。