css

图片裁剪总是跑偏？用 object-fit、object-position 和真实像素把坐标对齐图片裁剪在页面上看起来只是一个矩形框，但真正实现时至少有三套坐标：原图像素坐标、容器显示坐标、用户拖拽产生的视口坐标。只在 CSS 层调整 object-position，再把同一组数直接提交给后端，最容易出现“预览正常、导出偏移”。

前端学习css层叠样式表（Cascading Style Sheets) CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离 css控制页面的展示效果 html 决定页面结构

个人主页左侧菜单支持分组，以及菜单显示和隐藏个人主页index.html代码修改如下：测试：ok. 菜单加了箭头支持展开和隐藏。上面也有个箭头支持隐藏和展开菜单。

HTML + CSS + JavaScript实现可视化JSON工具：格式化、折叠、搜索与错误定位调试接口时，最让人难受的往往不是 JSON 太复杂，而是它挤在一行、没有缩进、错误位置又说不清楚。这篇文章用一个单文件网页解决这个问题：把 JSON 粘贴进去，点击格式化后就能看到可折叠的树形结构；输入关键词可以筛选节点；JSON 不合法时，页面会给出解析错误，并在浏览器提供字符位置时展示原文附近的片段。整个项目不依赖 Node.js、npm 或第三方库，保存一个 index.html 就能运行。

面试被问了三回三栏布局，这次我终于把 BFC 那层窗户纸捅破了说实话三栏布局我面试被问过不下三次，每次我都能背出来 "左右固定，中间自适应"，再把 flex、grid、float 三种方案列一下，基本就过了。但前阵子我翻自己的笔记，发现写着 "BFC 很重要"，可我盯着这三个字愣了半分钟——到底它重要在哪？跟三栏布局又是怎么勾上的？

CSS选择器与样式关联老师强调：行内样式优先级最高，适合覆盖第三方样式；外部样式是实际开发中最常用的方式。直接在HTML元素的 style 属性中写入CSS代码。

里欧跑得慢

CSS 模块化架构的演进：BEM、CSS Modules 到 CSS-in-JS 的反思翻到五年前写的代码，一个按钮的 class 是 header__nav--primary-btn__label--is-active。它在 2019 年是正确的——BEM 方法论是当时应对"CSS 全局作用域"问题的最佳实践。但站在 2026 年回头看，这条演进路径上有太多"当时看起来正确，后来发现代价很大"的决策。

人间凡尔赛

2026 前端必修：4 个让 CSS 脱胎换骨的现代新特性（附实战代码）当 React 编译器替你自动优化性能、当 AI 帮你生成组件代码，2026 年前端最值得投入的"确定性红利"，反而是原生 CSS 的这波进化——sibling-index()、@container scroll-state()、text-box、typed attr() 四个特性，正在把过去需要 JS 黑科技才能实现的交互，变成几行纯 CSS。

2 道大厂面试题：TS 工具类型我懂了，CSS 3 列布局把我问住了一道 TS，一道 CSS。TS 那道我顺手写完了。CSS 那道我卡在 BFC——笔记里只记了个名词，真让我写代码我下不去手。这篇文章把两道题都摆出来，先讲我懂的那道，再讲我怎么把 CSS 这道啃下来的。

用户05954017446

把 AI 长期记忆去重测试从 20 分钟压到 40 秒，重复率从 18% 干到 1.5%凌晨一点，我被报警电话叫醒：生产环境 AI 助手的 prompt token 又爆了。打开日志一看，好家伙，同一个用户的三条长期记忆被同时塞进了上下文——「用户喜欢喝美式咖啡」「用户每天喝美式不加糖」「用户偏好美式咖啡，不加糖」。

横向滚动组件纯用 CSS，丝滑鼠标滚动不许js在移动端和桌面端项目中，横向滚动展示图片或卡片是一种常见的交互模式。最直接的方式是使用 overflow-x: auto，但这种方式滚动条在底部，视觉体验不够优雅，用户需要用鼠标横向拖动，操作不够自然。

软考网络工程师｜案例分析：Eth‑Trunk 链路聚合、iStack 堆叠、CSS 集群核心考点总结网络可靠性从单板、设备、链路三个层面实现。解决手段：Eth‑Trunk 链路聚合提升带宽 + 链路冗余；iStack/CSS 虚拟化解决设备单点故障。

CSS 三栏布局怎么写：Flex、Grid 完整方案与 BFC 区别左右固定宽度、中间自适应，是前端面试常见的三栏布局题。初学者通常知道 display: flex，却容易漏掉左右栏尺寸、中间栏伸缩和长内容溢出；还可能把 Flex、Grid 与 BFC 混为一谈。本文给出 Flex、Grid 两套完整模板，并说明三种格式化上下文的边界。

CSS 三栏布局与 BFC 深度解析：Float、Flex、Grid 三种方案一网打尽本文是一篇 CSS 学习日志。三栏布局是 PC 端最经典的布局需求，也是前端面试的高频题。本文先把「BFC」这个绕不开的概念讲透，再用 Float、Flex、Grid 三种方案逐一实现「左右固定、中间自适应」的三栏布局，并讲清一个关键细节——为什么 main 内容区要在 DOM 里最先渲染。

CSS 三栏布局：`margin-left: -100%` 凭什么把侧栏「拽」回上一行？彻底搞懂负 margin面试官说：「手写一个三栏布局，左右各 200px，中间自适应。」你用 flex 三行就写完了。面试官不罢休：「不用 flex，用 float 呢？」

写了 display:flex，为什么三栏布局还没完成？一个三栏页面已经有左栏、主内容和右栏，也设置了 display: flex，但这只能让三个子元素进入 Flex 布局，并不能自动实现“左右固定、中间自适应”。更容易混淆的是，有些笔记还会把 Flex、Grid 都称作 BFC。本文从这个未完成示例出发，补齐两种三栏方案，并理清三类格式化上下文。

用户93851563507

TypeScript 高级类型 + CSS 三列布局：从类型体操到样式工程的进阶之路读完这篇，你会彻底搞懂 Pick、Omit、Partial、Exclude、ReturnType、Record 等工具类型的实现原理，以及 Flex/Grid 布局背后的 BFC/GFC 底层机制。

fangzhanpeng168

（前端）5.盒子模型的宽高和边距

HTML、CSS、JavaScript 前端三件套前端开发，绕不开三个核心技术：HTML、CSS、JavaScript。它们共同构成了浏览器中几乎所有网页的基础。

用户05954017446

把大模型记忆召回测试从 30 分钟手工核对压到 3 秒自动化，pytest + FAISS 这套组合救了我凌晨一点半，用户群炸了：“AI 怎么又把我忌口忘了？”我爬起来一查，记忆库里那条“不吃香菜”明明还在，可 top_k 召回就是没把它排进去。手动比对了 20 条记忆花了 30 分钟，眼皮打架时我突然意识到：这种回归测试早该自动化了。