css

面试被问了三回三栏布局，这次我终于把 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 分钟，眼皮打架时我突然意识到：这种回归测试早该自动化了。

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

雪碧聊技术

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

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

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