CSS 工程化

BFC 即块级格式化上下文，是一块独立渲染区域，内部布局不影响外部。创建方式包括根元素、浮动元素、绝对定位、overflow 非 visible、flex 与 grid 的直接子项、以及 display 为 flow-root（现代推荐，无副作用）。典型用途：阻止 margin 折叠（相邻块垂直外边距合并不是 bug 而是规范）；包含内部浮动解决高度塌陷，父级建 BFC 即可包裹浮动子元素；阻止元素被浮动覆盖，实现两栏自适应布局。答题要点是讲清「独立渲染」的三条表现（内部浮动不外溢、外部浮动不侵入、margin 不跨界折叠），并给 flow-root 与 overflow hidden 两种方案的取舍。延伸可提 IFC 行内上下文与层叠上下文是另一套概念，别混为一谈。

Flex 是一维布局，容器内一条主轴排布，靠 justify-content 与 align-items 控制对齐，flex-grow、shrink、basis 控制伸缩，适合工具栏、导航、卡片行等单行单列自适应场景，内容驱动尺寸。Grid 是二维布局，先定义行列轨道（repeat、minmax、fr 单位、auto-fill）再放置项，可命名区域与跨线，页面骨架、仪表盘、表单对齐等结构驱动场景更顺手，子项可两维精确定位。经验法则：宏观骨架用 Grid，组件内部用 Flex，两者可嵌套。加分点：gap 属性统一间距取代 margin hack；minmax 加 auto-fill 实现无媒体查询响应式；Grid 的隐式轨道与 dense 填补；flex-wrap 换行后丧失行对齐能力，正是二维需求的信号。能给出嵌套实例与响应式技巧即优秀。

标准盒模型（content-box）中 width 只指内容区，实际占宽等于 width 加左右 padding 加左右 border 加 margin；IE 盒模型（border-box）中 width 包含内容加 padding 加 border，计算直觉、布局稳定。工程标配是通配符把所有元素设为 border-box，再对第三方组件按需覆盖。行内元素设置垂直 padding 与 border 会渲染但不占行高，这也是 display 差异带来的盒模型表现之一。延伸点：margin 百分比相对父级宽度计算（连垂直方向也是）；相邻块级 margin 折叠取大值，flex 与 grid 子项不折叠；outline 与 box-shadow 不占布局空间。答出两种模型的宽度公式、通配 border-box 的工程实践与 margin 折叠规则即完整。

优先级按 (行内样式, ID 数量, 类/属性/伪类数量, 元素/伪元素数量) 四元组逐位比较，行内样式最高，重要声明 ！important 压过一切普通声明（来源相同时）。伪类算类级，但 not、is、where 不计本身而计参数内最高优先级，where 恒为零可做无侵入基础样式；伪元素算元素级。比较是逐位从高到低，不跨位累加，一个 ID 胜过任意多个类。链式选择器越长越具体但维护变差，工程上提倡低优先级风格（单一类、BEM 命名），用选择器策略而非 important 堆叠解决冲突。层叠上下文之外还有层叠规则三要素：来源与重要性、优先级、书写顺序，同优先级后者胜。能写四元组并解释 where 与 not 的计入规则即优秀。

布局层用流式栅格与弹性单位（百分比、vw、vh、rem、clamp），配合 Grid 的 minmax 加 auto-fill 实现免媒体查询自适应；媒体查询按断点改列数与显隐，容器查询让组件按自身宽度响应而非视口，组件化时代更合理。图片用 srcset 与 sizes 按屏幕分发不同分辨率，picture 元素做艺术指导与格式降级（webp 与 avif 优先）。字号用 clamp 最小理想最大三值平滑缩放。策略上移动优先：基础样式小屏，min-width 向上增强，符合渐进增强理念。单位选型：交互与组件尺寸用 rem 尊重用户根字号，容器与流用百分比或 fr，需要视口时才用 vw。答出单位体系、断点策略、图片适配与容器查询四个层次即是体系化答案。