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 分钟，眼皮打架时我突然意识到：这种回归测试早该自动化了。

CSS Container Queries 在组态大屏中的实战先说一个去年让我头疼了整整两天的场景。我们给某个工厂做了一个能耗监控大屏。大屏上有 5 个同类型的「能耗趋势卡片」——左侧侧边栏放了 2 个，中间主区域 3 个。设计稿上，侧边栏的卡片是「图表在上、数据在下」的竖排紧凑布局，而主区域的卡片是「数据在左、图表在右」的横排舒展布局。

雪碧聊技术

Vue + Element Plus 实现文本溢出显示省略号及悬浮提示前言在后台管理系统的开发中，我们经常会遇到表单数据过长导致页面布局被撑坏的问题。特别是在详情弹窗中，如果某个字段的值特别长，很容易将容器撑开，影响页面美观和用户体验。

设置了 box-sizing: border-box；不管用，下边框还是被挤压没了div（height: 100vh; width: 100vw;）包裹一个 input （height: 100vh; width: 100vw;）

CSS 定位布局：让元素各就各位写网页很像安排一场舞台演出：有人按照队伍依次登场，有人需要从原位挪开一点，有人要直接站到舞台中央，还有人无论页面怎样滚动，都要守在屏幕边缘。

用户05954017446

Qdrant 召回不一致踩坑实录：跑了 300 次测试才发现是索引没刷新凌晨两点，用户反馈 AI Agent 突然忘了昨天聊过的项目细节，我睡眼惺忪地打开 Grafana，看到记忆召回率从 98% 掉到 60%。第一反应是 embedding 模型又抽风了，结果查了半天日志，发现是 Qdrant 的写入和查询之间有个“时间差”——数据明明 upsert 了，查询却时有时无。这不是第一次了，我决定用 pytest + Qdrant 把召回一致性测试自动化，结果发现坑比想象中深。

用户05954017446

AI Agent 上下文污染踩坑实录：用 pytest + Redis 揪出 3 类记忆串号 bug，排查 6 小时凌晨两点，用户群里发来一张截图：AI 客服回复工单时，把另一个用户的手机号和收货地址带了出来。我第一反应是模型幻觉，结果查 Redis 发现，两个不同 user_id 的会话共用了同一个 session_id 作为 key，上下文直接串号。这不是模型的问题，是记忆层在裸奔。后来我用 pytest + Redis 搭了一套一致性验证，才把这类 bug 摁死。

html 可视化海报模板编辑器

我命由我12345

CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度CesiumJS 官网：https://www.cesium.com/CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/

简单的画板小工具，下载即用

绝世唐门三哥

CSS 虚线下划线用法指南：text-decoration 完整解析在网页设计中，一条恰到好处的下划线往往能让文本的层次感和精致度大幅提升。很多开发者在实现自定义虚线下划线时，经常会遇到“线不显示”“样式不统一”等问题，本文就围绕 text-decoration: underline dashed 这一核心写法，做一次完整的用法梳理。

用一个登录卡片讲清 CSS 盒模型：padding、border 与 box-sizing 到底如何影响布局登录卡片是理解 CSS 盒模型的好例子：它既有固定宽度的外框，也有需要撑满可用空间的输入框和按钮。很多布局问题都长得像这样：

用户05954017446

把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟，pytest + Docker 这套组合太顶了上周给 Agent 加了个“记住用户饮食偏好”的功能，测试环境好好的，上线后用户第 3 次对话就发现它“失忆”。一查日志，写入返回成功，召回就是空。最后发现 Redis 的 key 过期时间被一个不起眼的续命逻辑覆盖了。手动验证一次要 40 多分钟，我决定用 pytest + Docker 把这件事彻底自动化。