前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库容器化专题面试题
面试知识索引 · 分类、标签与搜索

容器化专题面试题,184 道完整答案

容器化专题面试题第 1 页,显示第 1–50 题,共找到 184 道完整解析,可继续按分类、标签与关键词缩小范围。

184筛选结果
52技术分类
178检索标签
4索引分页
按分类建立知识面,再用标签和搜索定位问题

每页只渲染 50 道题。分类与标签分页可抓取,自由搜索结果不会制造无限 SEO 页面。

快速定位

分类、标签与关键词搜索

清除全部筛选
题库检索
技术分类52 个
全部分类5000AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138React Native135
查看全部 52 个分类
操作系统135数据库134Docker95计算机网络94API 设计90Kubernetes90HTML89Redis89全栈开发88分布式系统88系统设计86HTTP85Next.js60Angular58Linux53Nuxt51PostgreSQL46可观测性46设计模式46小程序45身份与权限45无障碍44MongoDB43PWA43Web 安全43Git42前端测试42前端性能41WebAssembly40测试40AI 工程37SvelteKit37Go35前端数据管理30React Router29AI 全栈28Svelte27算法12Java10数据结构5前端手写题3
热门标签178 个
全部标签容器化184并发编程448缓存355性能优化340安全336异步编程292类型系统215构建工具211流处理177表单157SQL148HTTP141路由140离线应用121网络协议111
查看其余 163 个标签
测试109数据库事务95实时通信92Web 可访问性90动画79可观测性77Agent 记忆75向量检索66工具调用66LangGraph59Prompt56任务规划53排障与运维53数据库索引52浏览器自动化51Flexbox50值与类型50GraphQL49事务与并发49构建与镜像49DNS 与 TLS48工程协作与交付48AI 评测47CSS Grid47Express 服务47MCP47副作用与同步47向量与嵌入47文件与多媒体47流与二进制47传输与协议46列表与性能46可维护代码46响应式原理46容器运行46指标日志追踪46数据建模与运维46文件与 I/O46表单与输入46MCP 协议45RAG45Vite 与模块构建45Webpack45内存与虚拟化45原生集成45多 Agent45工作负载与发布45应用与性能45数据处理45模块与工具链45组件与模板45缓存与数据结构45网络与运维45评估与调试45身份认证与授权45运行时与开发45Web 系统方案44一致性与容错44侦听与生命周期44分布式使用44原生组件与交互44可访问交互44消息与异步处理44渲染与调度44索引与执行计划44组件设计44缓存与代理44进程与并发44层叠与选择器43攻击面与防御43文档数据库43权限与安全43离线与渐进增强43语义与文档43请求与通信 API43Worker 与线程协作42事件系统42存储与离线数据42服务架构42服务端与流式渲染42服务端工程42泛型设计42版本控制42类型收窄42类型运算42组件与端到端42编码与执行42进程与线程42DOM 与文档操作41Flex 布局41HTTP 语义41NestJS 架构41REST 与接口契约41SQL 查询41加载与交互性能41动画与视觉41类型工程41记忆与状态41运行时与调度41Agent 架构40WebAssembly 集成40单元与集成测试40多 Agent 协作40工作流编排40模块与语言机制40浏览器与 UI 自动化40生产运行40函数与作用域39响应式设计39性能与并发39类型系统基础39Grid 布局38数组与集合38盒模型与排版38Hooks 与复用37应用开发37推理与成本37状态共享37知识库数据37模型与应用评测36对象与原型35状态与渲染35语言与并发35异步与 Promise34Effect32RAG 检索31React 性能31响应式与性能31微调与数据31TanStack Query30全栈边界30数据与缓存30大模型基础29路由与数据流29事件循环28流式交互28提示与上下文设计27数据与服务端27组件与依赖注入27组件与响应式27多模态应用24应用与渲染24Hydration22沙箱安全22状态管理18算法18CI/CD13语言与运行时10React Server Components6搜索与排序4实用函数实现3链表栈队列3图算法2字符串算法2树与遍历2索引与高级结构2Kubernetes1作用域与函数1动态规划1异步与浏览器1手写与交互性能1数组与双指针1相等比较1
当前页01 / 4

正在显示第 1–50 题

CSS41AI Agent5浏览器3Angular1
第 1 页

本页面试问题

按稳定语义路径排序

  1. 0001
    AI Agent编码与执行

    如何用声明式的环境定义保证 Agent 的构建与测试在任何机器上可复现?

    如何用声明式的环境定义保证 Agent 的构建与测试在任何机器上可复现? 本文先给出可直接复述的结论,再用最小代码说明Dockerfile 保证 Agent 构建测试环境可复现的工作方式、判断依据、项目边界和常见误区。

    核心关键词Dockerfile 保证 Agent 构建测试环境可复现
    #编码与执行#测试#构建工具
  2. 0002
    AI Agent编码与执行

    在离线或受限网络环境中,Agent 应如何获取和安装依赖?

    在离线或受限网络环境中,Agent 应如何获取和安装依赖? 本文先给出可直接复述的结论,再用最小代码说明离线环境 Agent 私有镜像安装依赖的工作方式、判断依据、项目边界和常见误区。

    核心关键词离线环境 Agent 私有镜像安装依赖
    #编码与执行#缓存#离线应用
  3. 0003
    AI Agent编码与执行

    为什么 Agent 执行环境内必须以非 root 用户运行生成代码,仅靠容器隔离为什么不够?

    为什么 Agent 执行环境内必须以非 root 用户运行生成代码,仅靠容器隔离为什么不够? 本文先给出可直接复述的结论,再用最小代码说明Agent 沙箱非 root 运行生成代码的工作方式、判断依据、项目边界和常见误区。

    核心关键词Agent 沙箱非 root 运行生成代码
    #编码与执行#沙箱安全#容器化
  4. 0004
    AI Agent编码与执行

    执行 Agent 生成代码时,进程隔离、容器隔离与微虚拟机隔离各自防御什么风险?

    执行 Agent 生成代码时,进程隔离、容器隔离与微虚拟机隔离各自防御什么风险? 本文先给出可直接复述的结论,再用最小代码说明Agent 代码执行沙箱 容器与 microVM 隔离的工作方式、判断依据、项目边界和常见误区。

    核心关键词Agent 代码执行沙箱 容器与 microVM 隔离
    #编码与执行#沙箱安全#安全
  5. 0005
    AI Agent权限与安全

    容器、gVisor、微虚拟机(如 Firecracker)为 Agent 沙箱提供的隔离强度有何差异?

    容器、gVisor、微虚拟机(如 Firecracker)为 Agent 沙箱提供的隔离强度有何差异? 本文先给出可直接复述的结论,再用最小代码说明gVisor Firecracker 容器沙箱隔离强度对比的工作方式、判断依据、项目边界和常见误区。

    核心关键词gVisor Firecracker 容器沙箱隔离强度对比
    #权限与安全#沙箱安全#安全
  6. 0006
    Angular组件与依赖注入

    在 Angular 中,使用 lazy loading 模块时,其依赖的服务是否会被独立实例化?如何确认?

    在 Angular 中,使用 lazy loading 模块时,其依赖的服务是否会被独立实例化?如何确认? 本文先给出可直接复述的结论,再用最小代码说明懒加载模块 服务实例独立性的工作方式、判断依据、项目边界和常见误区。

    核心关键词懒加载模块 服务实例独立性
    #组件与依赖注入#安全#容器化
  7. 0007
    浏览器文件与多媒体

    视频全屏应该请求 video 元素还是容器元素,iOS 行为差异为什么要单列?

    视频全屏应该请求 video 元素还是容器元素,iOS 行为差异为什么要单列? 本文先给出可直接复述的结论,再用最小代码说明requestFullscreen video iOS webkitEnterFullscreen的工作方式、判断依据、项目边界和常见误区。

    核心关键词requestFullscreen video iOS webkitEnterFullscreen
    #文件与多媒体#容器化
  8. 0008
    浏览器文件与多媒体

    MediaRecorder 选型时如何校验 MIME 支持,start(timeslice) 对 ondataavailable 有什么影响?

    MediaRecorder 选型时如何校验 MIME 支持,start(timeslice) 对 ondataavailable 有什么影响? 本文先给出可直接复述的结论,再用最小代码说明MediaRecorder isTypeSupported timeslice ondataavailable的工作方式、判断依据、项目边界和常见误区。

    核心关键词MediaRecorder isTypeSupported timeslice ondataavailable
    #文件与多媒体#容器化
  9. 0009
    浏览器渲染与调度

    如何用 PerformanceLongTaskTiming 监测页面长任务,50ms 阈值是怎么来的、attribution 能定位到什么粒度?

    如何用 PerformanceLongTaskTiming 监测页面长任务,50ms 阈值是怎么来的、attribution 能定位到什么粒度? 本文先给出可直接复述的结论,再用最小代码说明Long Tasks API 长任务监测 50ms attribution的工作方式、判断依据、项目边界和常见误区。

    核心关键词Long Tasks API 长任务监测 50ms attribution
    #渲染与调度#性能优化#容器化
  10. 0010
    CSS盒模型与排版

    Flex 子项里的长文本写了省略号样式,为什么还是把容器撑破了?

    Flex 子项默认的自动最小宽度可能保留内容的最小尺寸,长单词或 nowrap 文本于是撑开容器,省略号始终没有溢出空间。给正确层级的子项设置 min-width: 0 或适当 overflow 才能允许收缩;多层嵌套和 Grid 轨道也有类似约束。

    核心关键词flex 子项 text-overflow min-width 省略
    #盒模型与排版#容器化#Flexbox
  11. 0011
    CSS盒模型与排版

    给 inline-block 元素加了 text-overflow ellipsis,为什么省略号不出来?

    inline-block 未限制宽度时会随内容变宽,文字不会在元素内部溢出,text-overflow: ellipsis 因而看不到效果。限定 width 或 max-width 后还要设置不换行与溢出裁剪;纯 inline 元素无法按同样方式指定宽度,表格单元格又受列布局影响。

    核心关键词inline-block text-overflow 无效 解决
    #盒模型与排版#容器化
  12. 0012
    CSS盒模型与排版

    页面主体想在大屏上限宽居中、小屏上铺满,容器该怎么写?

    限宽容器常用 max-width 限制大屏宽度、margin-inline: auto 居中,再留出小屏内边距。width: 100% 与 padding 叠加可能溢出,min-width 又可能压过最大宽度;Flex 子项中的自动最小尺寸也会影响容器能否真正缩窄。

    核心关键词max-width 响应式 最大宽容器
    #盒模型与排版#容器化
  13. 0013
    CSS盒模型与排版

    给一个块加上 overflow: auto,除了出滚动条还会带来哪些副作用?

    overflow: auto 不只是按需显示滚动条,它还会建立滚动容器和 BFC,裁剪溢出,并改变 sticky 的滚动参照。Flex 子项使用时还可能改变自动最小尺寸;弹层被裁掉或吸顶失效时,应先检查祖先是否设置了它。

    核心关键词overflow auto 副作用 BFC 滚动容器
    #盒模型与排版#容器化
  14. 0014
    CSS盒模型与排版

    overflow: clip 和 overflow: hidden 看起来一样,到底差在哪?

    overflow: hidden 和 clip 都能裁剪内容,但 hidden 仍可通过脚本或焦点滚动,并会建立滚动容器;clip 不提供这类滚动行为。sticky 参照、BFC 与单轴裁剪因此会不同,overflow-clip-margin 还可调整 clip 的裁剪边界。

    核心关键词overflow clip 与 hidden 区别
    #盒模型与排版#容器化
  15. 0015
    CSS盒模型与排版

    父元素加了 overflow hidden,sticky 为什么就不吸顶了?

    sticky 元素会以最近的滚动容器为参照;祖先的 overflow: hidden 可能让它盯着一个并不滚动的容器,页面滚动时自然不吸顶。单轴 overflow 也可能触发类似效果;可按需求调整容器、改用 clip 或移动吸顶元素。

    核心关键词sticky 失效 overflow hidden 修复
    #盒模型与排版#容器化
  16. 0016
    CSS盒模型与排版

    sticky 元素什么时候粘住,什么时候又被带走?吸顶导航怎么写?

    吸顶导航何时开始停住,取决于 top 等偏移阈值与最近的滚动容器;到达包含块边界后又会被带走。通讯录分组标题会依次接替吸附位置,若 sticky 完全不生效,应检查滚动容器、可滚动距离及父元素尺寸。

    核心关键词position sticky 粘性定位 触发条件
    #盒模型与排版#容器化
  17. 0017
    CSS盒模型与排版

    单行文本超出显示省略号要写哪几行 CSS,少一行为什么就不行?

    单行省略需要元素确实发生水平方向溢出,再配合 white-space: nowrap、裁剪和 text-overflow: ellipsis 才能显示省略号。Flex 子项的最小宽度、纯行内元素没有可用宽度或声明写在错误层级,都会让文本继续撑开容器。

    核心关键词单行文本省略号 text-overflow 属性
    #盒模型与排版#容器化
  18. 0018
    CSS层叠与选择器

    first-line 伪元素能用在哪些元素上?

    ::first-line 选择块容器实际排版后的第一行文字,容器宽度变化、字体加载或内容改动都可能改变被选中的字符。它只支持部分文本相关属性,不适用于普通行内盒或 Flex、Grid 容器;不能把它当作固定的首句选择器。

    核心关键词CSS ::first-line pseudo-element applicability
    #层叠与选择器#容器化#CSS Grid
  19. 0019
    CSSFlex 布局

    flex 容器里放一个绝对定位的子元素,布局会怎样?

    flex 容器里的绝对定位子项不参与弹性布局,不占空间也不被 flex-grow 分配。但容器加了 position: relative 后仍然是它的包含块,定位坐标从容器 padding 边开始算。

    核心关键词flex 绝对定位子项 static position
    #Flex 布局#容器化#Flexbox
  20. 0020
    CSSFlex 布局

    单行 flex 容器里 align-content 为什么不生效?

    默认不换行的 Flex 容器只有一条 flex 行,align-content 没有可分配的行间空间,设置它通常看不到效果。单行子项的交叉轴位置由 align-items 控制;多行容器还需有多余的交叉轴空间才能体现行组对齐。

    核心关键词align-content single line
    #Flex 布局#容器化#CSS Grid
  21. 0021
    CSSFlex 布局

    align-content 设成 space-between 后行间距是怎么分的?

    多行 Flex 容器只有交叉轴留有空白时,线与线之间的剩余空间才会被分散;只有一行或容器高度随内容增长时,改这个值可能看不到效果。通过固定高度的两行卡片对照项目对齐和线组对齐。

    核心关键词align-content space-between rows
    #Flex 布局#容器化#Flexbox
  22. 0022
    CSSFlex 布局

    align-content 和 align-items 到底怎么分工?

    align-content 管的是多条 flex line 之间的交叉轴空间分配,align-items 管的是每条 line 内部子项的对齐。两者作用层级不同,必须配合 flex-wrap: wrap 才能看到 align-content 的效果。

    核心关键词align-content multi-line flex
    #Flex 布局#容器化#Flexbox
  23. 0023
    CSSFlex 布局

    align-self 怎么覆盖 align-items 的效果?

    align-self 让单个 flex 子项覆盖容器的 align-items 设定,独立控制自己在交叉轴上的对齐方式。它和 justify-content 互不干扰,一个管交叉轴,一个管主轴。

    核心关键词align-self override
    #Flex 布局#容器化#Flexbox
  24. 0024
    CSSFlex 布局

    flex 子项在交叉轴上用 margin auto 会怎样?

    flex 子项在交叉轴方向设 margin auto 会吸收行内所有剩余空间,效果相当于覆盖了 align-items。比如 margin-top: auto 把子项推到底部,比 align-self: flex-end 优先级更高。

    核心关键词flex margin auto cross-axis
    #Flex 布局#容器化#Flexbox
  25. 0025
    CSSFlex 布局

    column 方向下 align-content stretch 能让各列等宽吗?

    flex-direction: column 加 flex-wrap: wrap 时,align-content: stretch 会让各列在交叉轴(水平方向)上等分容器宽度。每列分到相同的宽度,子项在各自列里占满这个宽度。

    核心关键词align-content stretch column wrap
    #Flex 布局#容器化#Flexbox
  26. 0026
    CSSFlex 布局

    column wrap 布局各列为什么等高?能做瀑布流吗?

    纵向排列的 Flex 项要换列,容器必须提供可用的主轴高度;每列的项目按这个高度分组,而列宽取决于项目与剩余横向空间。对比固定高度分栏和真正瀑布流,说明为何列底会留白、默认拉伸也不保证各列等宽。

    核心关键词flex column wrap 等高列 瀑布流
    #Flex 布局#容器化#Flexbox
  27. 0027
    CSSFlex 布局

    多行 flex 容器没设高度时,行高是怎么算的?

    多行 flex 容器没有显式高度时,容器高度由内容撑开。每行的高度等于行内最高子项的高度,行与行紧挨着排列,没有多余空间给 align-content 分配。 同时说明未限定高度时为何通常只随内容增长。

    核心关键词flex 多行容器 无显式高度 行高
    #Flex 布局#容器化#Flexbox
  28. 0028
    CSSFlex 布局

    flex-basis 的百分比是相对谁算的?

    flex-basis 百分比相对容器的主轴内部尺寸计算。容器没有明确尺寸时百分比回退为 content。还要注意 flex-basis: 0 和 flex-basis: 0% 的区别:0 不会触发百分比解析,0% 会。

    核心关键词flex-basis percentage
    #Flex 布局#容器化#Flexbox
  29. 0029
    CSSFlex 布局

    flex-shrink: 0 一定会让 Flex 容器溢出吗?

    工具栏按钮设置不收缩后,是否溢出仍取决于容器余量、其他项目的收缩能力和最小尺寸。用由宽到窄的过程观察负空间怎样转移,区分按钮保宽、搜索框收缩和最终横向滚动三个阶段。

    核心关键词flex-shrink 0 overflow
    #Flex 布局#容器化#Flexbox
  30. 0030
    CSSFlex 布局

    flex-wrap: wrap 什么时候换行?每一行又怎么排?

    响应式卡片使用 Flex 换行时,项目先分到不同的线,每条线再独立计算伸缩与剩余空间。解释为什么最后一排只有一张卡片时可能突然拉宽,并说明需要严格跨行列对齐时应该怎样选择布局方式。

    核心关键词flex-wrap wrap flex line
    #Flex 布局#容器化#Flexbox
  31. 0031
    CSSFlex 布局

    纵向 Flex 布局里,子项为何设了滚动仍撑高容器?

    固定页头下的长列表设为弹性增长,仍可能把页面整体撑长而不出现内部滚动。沿纵向 Flex 的祖先链检查高度约束和自动最小高度,找出应允许收缩的那一层,并把滚动交给真正的内容区域。

    核心关键词min-height auto flex column
    #Flex 布局#容器化#Flexbox
  32. 0032
    CSSFlex 布局

    Flex 里的文本为什么设置了省略号还会撑开容器?

    评论长链接不出现省略号,可能是直接参与 Flex 的外层项目没有真正变窄,而非文本溢出规则失效。沿父子层级定位尺寸瓶颈,先让项目盒可收缩,再检查文本节点是否满足单行、省略和裁剪条件。

    核心关键词flex text-overflow min-width
    #Flex 布局#容器化#Flexbox
  33. 0033
    CSSFlex 布局

    flex-wrap: nowrap 下,项目总宽度超了会怎样?

    手机页头限定单行时,搜索框可能先收缩,按钮碰到最小尺寸后整行才出现溢出。按基础尺寸、收缩权重和项目下限分析这个过程,并与允许换行时先分线后逐线伸缩的计算顺序对比。

    核心关键词flex-wrap nowrap 溢出
    #Flex 布局#容器化#Flexbox
  34. 0034
    CSSGrid 布局

    Grid 容器没设高度,行轨道会怎么长?

    文章卡片网格里,某张摘要变长会抬高所在行的轨道,但其他行未必同步等高。区分内容决定的容器高度与显式固定高度,并说明项目拉伸、跨行贡献和内容对齐分别在什么条件下影响视觉结果。

    核心关键词CSS Grid 行轨道高度自适应内容
    #Grid 布局#容器化#CSS Grid
  35. 0035
    CSSGrid 布局

    Grid 的 fr 单位是怎样分配剩余宽度的?

    用固定列加弹性列解释 Grid 怎样计算 fr:先扣掉固定轨道和间距,再按系数分配可用空间。还会说明内容的自动最小尺寸为什么可能撑开 1fr,以及如何用 minmax(0, 1fr) 处理长内容。

    核心关键词CSS Grid fr单位分配剩余空间
    #Grid 布局#容器化#CSS Grid
  36. 0036
    CSSGrid 布局

    Grid 的 gap 是加在轨道之间,还是项目之间?

    解释 Grid 中 gap 的真正位置:它位于相邻行轨或列轨之间,跨格项目内部不会再插入间距。通过显式与隐式轨道的例子,说明新增轨道为什么会多出一道 gap,以及 gap 与项目 margin 的区别。

    核心关键词CSS Grid gap属性与隐式轨道空间
    #Grid 布局#容器化#CSS Grid
  37. 0037
    CSSGrid 布局

    Grid 固定列和 fr 列怎样计算可用宽度?

    从容器内容盒、固定长度轨道与列间距出发,推导弹性列能拿到的空间。说明 px、百分比和 minmax 对计算的不同影响,并解释容器宽度不确定时百分比为何不能简单按视口宽度套算。

    核心关键词CSS Grid 固定长度轨道与自由空间计算
    #Grid 布局#容器化#CSS Grid
  38. 0038
    CSSGrid 布局

    grid-auto-flow: column 时,隐式列怎样生成?

    解释自动放置沿列推进时,超出已有显式轨道的项目如何促使 Grid 新建隐式列。结合固定行数的卡片排布,说明 grid-auto-columns 控制新增列宽,而容器缩放不会自行把既有项目改成新的响应式列数。

    核心关键词CSS Grid 容器尺寸变化隐式轨道自适应
    #Grid 布局#容器化#CSS Grid
  39. 0039
    CSSGrid 布局

    Grid 的 min-content 尺寸为什么会影响整列?

    从不可断开的内容入手解释 Grid 的 min-content 尺寸参与轨道下限计算。澄清“Grid Level 2 改进算法”不能被概括为所有内容都会自动收缩,具体布局还要看跨度、自动最小尺寸与溢出设置。

    核心关键词CSS Grid 2 min-content尺寸算法改进
    #Grid 布局#容器化#CSS Grid
  40. 0040
    CSSGrid 布局

    网格轨道比容器小时,多余空间怎么分配?

    说明当显式轨道总尺寸小于容器时,可用 justify-content 与 align-content 移动或分散整组轨道。对比 start、center、space-between 和 stretch,并解释 fr 轨道已吃掉自由空间时为什么看不出这些属性的效果。

    核心关键词CSS Grid 网格小于容器时的空间对齐
    #Grid 布局#容器化#CSS Grid
  41. 0041
    CSSGrid 布局

    为什么只写 subgrid,却没设置 display: grid 时不会生效?

    解释 subgrid 是网格项目在某个轴上继承父轨道的取值,前提是元素本身也是网格容器。结合卡片内部标题与按钮对齐的例子,说明 display: grid、跨轨道范围以及 align-self 的不同职责。并辨析拉伸对齐只是改变项目在单个网格区域内的位置,不等于让多张卡片共用一组行轨道。

    核心关键词CSS Grid subgrid需设置display grid原因
    #Grid 布局#容器化#CSS Grid
  42. 0042
    CSS响应式设计

    container-name 怎么避免组件查错容器?

    说明未命名容器查询如何选择最近的合格祖先,以及 container-name 如何把查询限定到指定祖先。通过卡片嵌套在侧栏中的例子解释名称匹配、容器类型与局部组件复用。同时解释容器名称只筛选目标元素的祖先,不会跨页面查找同名元素,也不能单独开启尺寸查询。

    核心关键词CSS container-name 命名容器 作用
    #响应式设计#容器化
  43. 0043
    CSS响应式设计

    容器查询和媒体查询要同时满足,该怎么写?

    通过外层 @media、内层 @container 的写法,解释视口条件与组件容器条件如何共同限制样式。说明查询作用对象、嵌套时的逻辑与、层叠顺序,以及为什么不能用一个条件代替另一个。示例展示宽视口里的窄侧栏卡片为什么仍应保持单栏,并说明两种条件命中后还会继续参与正常的 CSS 层叠。

    核心关键词CSS container queries media queries combination
    #响应式设计#容器化
  44. 0044
    CSS响应式设计

    要让元素成为尺寸查询容器,container-type 该怎么设?

    说明 container-type 的 normal、inline-size 与 size 有何区别,为什么尺寸查询需要限制被查询尺寸受后代影响,并用可复用卡片例子展示容器创建、后代查询和常见失效原因。同时说明查询规则作用于容器后代,以及为什么只给容器命名或把类型写在目标元素自身,都不能得到预期的宽度判断。

    核心关键词CSS container-type 容器查询 设置方法
    #响应式设计#容器化
  45. 0045
    CSS响应式设计

    容器查询和媒体查询分别解决什么问题?

    通过同一张卡片在主栏与侧栏中宽度不同的例子解释容器查询的基准,比较媒体查询针对视口与容器查询针对祖先容器的职责,并说明尺寸查询的创建方式及适用场景。进一步说明如何创建尺寸容器、无名查询怎样寻找最近祖先,以及页面骨架和局部卡片分别适合交给哪种规则控制。

    核心关键词CSS 容器查询 container queries 与媒体查询区别
    #响应式设计#容器化
  46. 0046
    CSS响应式设计

    容器查询可以嵌套吗,cqw 到底参考哪一层?

    解释 @container 嵌套时外层与内层条件都要成立,可能分别匹配不同祖先;再区分容器查询单位 cqw、cqi 的最近合格尺寸容器基准,提醒不要把规则命中的命名容器与单位换算基准混为一谈。通过区块与卡片两层容器展示嵌套条件的实际命中方式,并解释找不到尺寸容器时容器单位的回退结果。

    核心关键词CSS container queries nesting resolution
    #响应式设计#容器化
  47. 0047
    CSS响应式设计

    容器查询不受支持时,组件该怎样回退?

    给出容器查询的渐进增强写法:先提供可读的默认单栏,再在支持 @container 的环境中根据容器宽度升级布局。说明为什么无需硬记浏览器版本号,以及如何用真实目标浏览器测试功能与回退。还会区分尺寸查询和其他容器查询能力的兼容性,说明为什么桌面浏览器能用仍需要检查项目实际运行的内嵌浏览器。

    核心关键词CSS 容器查询 浏览器支持 回退方案
    #响应式设计#容器化
  48. 0048
    CSS响应式设计

    容器样式查询怎样根据自定义属性切换样式?

    解释 @container style(--theme: dark) 读取祖先容器计算后的自定义属性,再给后代应用规则。说明继承、精确值匹配、无需尺寸容器以及普通 CSS 属性样式查询的实现限制。通过卡片主题状态展示样式查询的写法,并区分查询祖先当前样式与检测浏览器是否支持某条声明这两种问题。

    核心关键词CSS style queries container queries
    #响应式设计#容器化
  49. 0049
    CSS响应式设计

    cqw 和 vw 各按谁的尺寸计算,组件该用哪个?

    比较容器查询单位 cqw、cqh、cqi 与视口单位 vw、vh 的尺寸基准,说明嵌套组件为何更适合容器单位、找不到合格容器时怎样回退,以及容器过窄时如何防止字体和间距缩得过小。还会解释行内轴单位与物理宽度单位在竖排时的差别,以及如何限制字体和内边距在极端容器宽度下的变化。

    核心关键词CSS container query units vs viewport units
    #响应式设计#容器化
  50. 0050
    CSS响应式设计

    响应式字号和间距该怎么搭配 rem、em 与视口单位?

    rem 以根元素字号为基准,适合全站字号和间距尺度;em 以当前元素相关的字体尺寸为基准,适合组件内部跟随文字缩放;vw 等视口单位直接随视口变化。需要流体字号时可用 clamp() 给视口部分设上下限,避免小屏过小、大屏过大。

    核心关键词响应式设计 rem 与 vw 单位配合使用
    #响应式设计#容器化
上一页
1234
下一页
前端进阶之旅本地 Markdown 维护 · 服务端分页 · 完整内容对用户与搜索引擎一致