前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
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 热点
旧版
首页程序员面试题库第 23 页
面试知识索引 · 分类、标签与搜索

5000+ 道程序员面试题,每题都有完整答案

程序员面试题库第 23 页,收录第 1101–1150 题,共 5000 道完整解析,覆盖前端、JavaScript、React、Vue、Node.js、AI Agent、网络、数据库与系统设计。

5000+完整问题
52技术分类
178检索标签
100索引分页
按分类建立知识面,再用标签和搜索定位问题

每页只渲染 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 个
并发编程448缓存355性能优化340安全336异步编程292类型系统215构建工具211容器化184流处理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
当前页23 / 100

正在显示第 1101–1150 题

CSS42浏览器8
第 23 页

本页面试问题

按稳定语义路径排序

  1. 1101
    浏览器Worker 与线程协作

    在主线程与 Worker 之间用 postMessage 传递复杂对象时,数据是如何拷贝的?

    在主线程与 Worker 之间用 postMessage 传递复杂对象时,数据是如何拷贝的? 本文先给出可直接复述的结论,再用最小代码说明postMessage 结构化克隆 Worker的工作方式、判断依据、项目边界和常见误区。

    核心关键词postMessage 结构化克隆 Worker
    #Worker 与线程协作#并发编程
  2. 1102
    浏览器Worker 与线程协作

    Worker 能访问主页面所在的 cookie 吗?

    Worker 能访问主页面所在的 cookie 吗? 本文先给出可直接复述的结论,再用最小代码说明Worker 访问 cookie的工作方式、判断依据、项目边界和常见误区。

    核心关键词Worker 访问 cookie
    #Worker 与线程协作#并发编程
  3. 1103
    浏览器Worker 与线程协作

    加载 Worker 脚本文件时受哪些同源或 CORS 限制?

    加载 Worker 脚本文件时受哪些同源或 CORS 限制? 本文先给出可直接复述的结论,再用最小代码说明Worker 脚本同源与 CORS 限制的工作方式、判断依据、项目边界和常见误区。

    核心关键词Worker 脚本同源与 CORS 限制
    #Worker 与线程协作#HTTP#并发编程
  4. 1104
    浏览器Worker 与线程协作

    普通 Web Worker 和 Service(服务)Worker 在被用户关闭标签页后的生命周期有何不同?

    普通 Web Worker 和 Service(服务)Worker 在被用户关闭标签页后的生命周期有何不同? 本文先给出可直接复述的结论,再用最小代码说明Worker 与 Service Worker 标签页关闭生命周期的工作方式、判断依据、项目边界和常见误区。

    核心关键词Worker 与 Service Worker 标签页关闭生命周期
    #Worker 与线程协作#离线应用#并发编程
  5. 1105
    浏览器Worker 与线程协作

    能否继承 Worker 类来创建自定义 Worker?

    能否继承 Worker 类来创建自定义 Worker? 本文先给出可直接复述的结论,再用最小代码说明继承 Worker 类可行性的工作方式、判断依据、项目边界和常见误区。

    核心关键词继承 Worker 类可行性
    #Worker 与线程协作#并发编程
  6. 1106
    浏览器Worker 与线程协作

    调用 worker.terminate() 后,Worker 正在执行的任务和资源会被怎样处理?

    调用 worker.terminate() 后,Worker 正在执行的任务和资源会被怎样处理? 本文先给出可直接复述的结论,再用最小代码说明worker.terminate 资源清理的工作方式、判断依据、项目边界和常见误区。

    核心关键词worker.terminate 资源清理
    #Worker 与线程协作#事件循环#并发编程
  7. 1107
    浏览器Worker 与线程协作

    在 Worker 内部调用 self.close() 和主线程调用 worker.terminate() 有什么异同?

    在 Worker 内部调用 self.close() 和主线程调用 worker.terminate() 有什么异同? 本文先给出可直接复述的结论,再用最小代码说明self.close 与 worker.terminate 区别的工作方式、判断依据、项目边界和常见误区。

    核心关键词self.close 与 worker.terminate 区别
    #Worker 与线程协作#并发编程
  8. 1108
    浏览器Worker 与线程协作

    Worker 中支持 setTimeout 和 setInterval 吗?它们与主线程有何异同?

    Worker 中支持 setTimeout 和 setInterval 吗?它们与主线程有何异同? 本文先给出可直接复述的结论,再用最小代码说明Worker setTimeout setInterval 支持的工作方式、判断依据、项目边界和常见误区。

    核心关键词Worker setTimeout setInterval 支持
    #Worker 与线程协作#动画#并发编程
  9. 1109
    CSS盒模型与排版

    绝对定位加 margin auto 为什么能让元素水平垂直都居中?

    绝对定位元素同时给出四个边距偏移、明确宽高并设置 margin: auto 时,剩余空间可由两侧自动外边距平分,实现水平和垂直居中。普通流中自动垂直外边距不这样分配;尺寸不固定的元素更适合 Grid、Flex 或变换方案。

    核心关键词绝对定位 auto margin 水平垂直居中
    #盒模型与排版
  10. 1110
    CSS盒模型与排版

    绝对定位元素是相对谁定位的?中间隔着没定位的父元素会有影响吗?

    绝对定位元素通常以最近的定位祖先建立包含块,部分 transform、filter 等属性也可能改变参照物。找不到这样的祖先时会退回初始包含块;非定位祖先仍可能影响静态位置或裁剪,定位偏移不能只凭 DOM 层级判断。

    核心关键词绝对定位 包含块 定位祖先
    #盒模型与排版
  11. 1111
    CSS盒模型与排版

    CSS 中触发 BFC 的常见方式有哪些,BFC 对布局有什么实际作用?

    BFC 是与外部布局相对独立的块级格式化区域。display: flow-root、特定 overflow 值、浮动和绝对定位都可能建立它;它能包住内部浮动、避开外部浮动并阻止父子外边距合并,但不同触发方式还会带来裁剪或脱离文档流等副作用。

    核心关键词BFC 触发方式 作用 overflow
    #盒模型与排版
  12. 1112
    CSS盒模型与排版

    给 span 设置 height 和 margin-top,为什么页面上看不出变化?

    span 等非替换行内元素不能靠 width、height 改变行内盒尺寸,垂直 margin 也不会撑开行高。垂直 padding 可能画到相邻行上,却不改变行盒高度;需要稳定宽高或块级间距时,可改用 inline-block、Flex 子项等布局形式。

    核心关键词行内元素 margin-top height 无效
    #盒模型与排版
  13. 1113
    CSS盒模型与排版

    width 200px 再加 padding 20px 和 border 5px,元素实际有多宽?

    默认的 content-box 模型里,width 只指定内容宽,左右 padding 与 border 会让盒子外宽继续增加。给内容区设 200 像素并不代表元素只占 200 像素;border-box 把边框计入指定宽度,外边距和 JavaScript 的宽度测量仍需另外区分。

    核心关键词content-box 总宽度计算 padding border
    #盒模型与排版
  14. 1114
    CSS盒模型与排版

    clear both 到底做了什么,它是怎么避开左右两边浮动的?

    clear: both 不会移除浮动,只会让当前元素移动到前面左右浮动的下方。浏览器为它加入的 clearance 可能让 margin-top 看起来不起作用;clear 只考虑相应格式化上下文中的前置浮动,clearfix 正是利用这一行为撑起父容器。

    核心关键词clear both 清除浮动原理
    #盒模型与排版
  15. 1115
    CSS盒模型与排版

    子元素全部浮动后父元素高度变成 0,为什么?怎么修?

    父元素内部只有浮动子项时,自动高度可能塌成零,因为浮动不参与普通流高度计算。clearfix 伪元素或建立新的 BFC 可以包住浮动;overflow: hidden 还会裁剪内容,display: flow-root 更明确,而现代横向布局通常可改用 Flex。

    核心关键词浮动子元素 父高度塌陷 clearfix
    #盒模型与排版
  16. 1116
    CSS盒模型与排版

    contain layout 和 contain paint 怎么缩小重排和重绘的范围?

    contain: layout 限制内部布局对外部的影响,contain: paint 约束绘制范围;它们能缩小浏览器需要处理的区域,却也可能改变定位参照与溢出可见性。contain: size 与 content-visibility 的关系不同,页面若依赖内容自动撑高不能直接套用。

    核心关键词contain layout paint 渲染性能
    #盒模型与排版#性能优化
  17. 1117
    CSS盒模型与排版

    同样写 width 200px,content-box 和 border-box 算出来的宽度为什么不一样?

    content-box 下 width 指内容宽,padding 与 border 在外侧增加;border-box 下 width 包含它们,内容区随之缩小。全局使用 border-box 能减少宽度计算,但 min-width、flex-basis 与百分比尺寸仍各有自己的约束,不能仅靠盒模型设置消除溢出。

    核心关键词box-sizing content-box border-box
    #盒模型与排版
  18. 1118
    CSS盒模型与排版

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

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

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

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

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

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

    一个空 div 同时设了上下 margin,它在页面上占多高?

    没有内容、边框、内边距和最小高度的空块,自身上下外边距可能合并,再与相邻块的外边距继续合并。正负值的计算不是简单相加;条件渲染产生空占位元素时,预留间距可能因此与设计稿不符。

    核心关键词空块级元素 上下外边距合并
    #盒模型与排版
  21. 1121
    CSS盒模型与排版

    想让文字绕着图片排,用 float 和 inline-block 效果一样吗?

    float 让后续文字行在其旁边缩短,形成文字环绕;inline-block 仍属于行内排版,只占自己所在的行,不会让后续段落环绕。两者对父容器高度、对齐和源码空白的影响不同,普通横向排列通常交给 Flex 或 Grid。

    核心关键词float 与 inline-block 文字环绕区别
    #盒模型与排版
  22. 1122
    CSS盒模型与排版

    父元素高度是 auto,为什么撑不开绝对定位的子元素?

    height: auto 只根据参与普通流的内容决定父元素高度,绝对定位子元素不在其中,因此父盒可能包不住它。需要内容撑高时可改回普通流或用 Grid 叠放;确实必须测量浮层时,才考虑脚本同步父级尺寸。

    核心关键词height auto 包含绝对定位子元素
    #盒模型与排版#CSS Grid
  23. 1123
    CSS盒模型与排版

    inline-block 排成一行的元素之间,为什么总有一条几像素的缝?

    相邻 inline-block 元素之间的源码换行或空格会折叠成可见的文本空格,宽度又随字体大小变化。删除源码空白、父级设零字号或使用负外边距都能消除间隙,但各有维护代价;Flex 与 Grid 的 gap 更适合有意控制间距。

    核心关键词inline-block 间隙 空白符 去除
    #盒模型与排版
  24. 1124
    CSS盒模型与排版

    isolation: isolate 是干什么的?为什么不用 transform 来创建层叠上下文?

    isolation: isolate 会为元素创建新的层叠上下文,使组件内部的 z-index 不再与外部层级直接竞争,也能限定 mix-blend-mode 的混合背景。它不靠透明度或变换制造视觉副作用,但仍要确认弹窗是否被祖先层叠上下文整体压住。

    核心关键词isolation isolate 层叠上下文 用途
    #盒模型与排版
  25. 1125
    CSS盒模型与排版

    哪些 CSS 属性会创建层叠上下文?为什么 z-index 写到 9999 还是盖不住?

    弹窗的 z-index 写到 9999 仍被遮住,常见原因是它的祖先建立了层叠上下文,整个祖先先与旁边的上下文比较。定位加 z-index、透明度、变换等都可能建层;提高子元素数值并不能越过父层。

    核心关键词层叠上下文 创建条件 z-index
    #盒模型与排版
  26. 1126
    CSS盒模型与排版

    margin-top 写 50%,为什么算出来的是父元素宽度的一半?

    传统水平书写模式下,margin 和 padding 的百分比即使写在上下边,也相对包含块的宽度计算,避免尺寸计算形成循环依赖。竖排模式要按包含块的行内尺寸理解;做等比容器时旧式 padding 技巧可与 aspect-ratio 比较。

    核心关键词margin 百分比 相对包含块宽度
    #盒模型与排版
  27. 1127
    CSS盒模型与排版

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

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

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

    卡片标题最多显示两行、超出打省略号,CSS 怎么写?

    多行省略依赖纵向的旧版 WebKit 盒布局、行数限制和溢出裁剪共同作用,与单行的 text-overflow 不是同一套机制。内边距可能露出额外文字,构建工具也可能处理掉必要前缀;出现多一行或完全不截断时,要逐项检查这些声明。

    核心关键词-webkit-line-clamp 多行文本省略
    #盒模型与排版#CSS Grid#Flexbox
  29. 1129
    CSS盒模型与排版

    给元素设了 z-index 为负数,它会跑到父元素背景后面吗?

    负 z-index 的定位元素仍处于所属层叠上下文里,可能被祖先背景盖住,看起来像突然消失。给父级建立明确的层叠上下文可把装饰层限制在组件内部;伪元素背景要同时考虑点击命中和正文的层级。

    核心关键词负 z-index 层叠顺序 背景
    #盒模型与排版
  30. 1130
    CSS盒模型与排版

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

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

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

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

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

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

    两个元素都没写 z-index,重叠时谁盖住谁?

    不设置 z-index 时,块背景、浮动、行内内容和定位元素仍按绘制层级叠放,同一层里通常后面的元素盖住前面的元素。后一个块的背景盖不住前一个块的文字,是两者处于不同绘制阶段;建立新层叠上下文后还要整体比较。

    核心关键词无 z-index 元素 绘制顺序
    #盒模型与排版
  33. 1133
    CSS盒模型与排版

    给子元素加 margin-top,为什么整个父元素一起掉下来了?

    父容器的第一个子元素设置 margin-top 后,父元素自己也被推下去,通常是父子外边距合并。边框、内边距、新的格式化上下文或 Flex 布局都能隔断合并,但它们对尺寸、裁剪和子元素排列的影响并不相同。

    核心关键词父子外边距塌陷 防止 margin collapse
    #盒模型与排版
  34. 1134
    CSS盒模型与排版

    position: relative 配 z-index: auto,会创建层叠上下文吗?

    定位元素的 z-index: auto 通常不创建新的层叠上下文,子元素仍可能与外层内容比较层级;z-index: 0 则建立独立上下文。角标被遮挡时,除了看数值,还要检查祖先的透明度、变换等是否提前把它关进另一层。

    核心关键词position relative z-index auto 层叠上下文
    #盒模型与排版
  35. 1135
    CSS盒模型与排版

    相对定位的元素设置了 top、left,旁边的元素会跟着动吗?

    position: relative 的 top、left 只移动绘制位置,不会让兄弟元素重新占用它原来的空间,因此常留下空白或形成遮挡。margin 会参与正常布局,两者不能互换;相对定位还可为绝对定位后代提供参照。

    核心关键词position relative 偏移 文档流影响
    #盒模型与排版
  36. 1136
    CSS盒模型与排版

    子元素 z-index 设成 9999,为什么还是盖不住另一个区域的元素?

    父元素建立层叠上下文后,内部子元素无论写多大的 z-index,都只能作为父层的一部分与外部比较。弹窗被相邻卡片盖住时,应找出哪个祖先形成了新层,以及两个父层本身的顺序,而不是继续加大弹窗数值。

    核心关键词嵌套层叠上下文 z-index 覆盖
    #盒模型与排版
  37. 1137
    CSS盒模型与排版

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

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

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

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

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

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

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

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

    核心关键词单行文本省略号 text-overflow 属性
    #盒模型与排版#容器化
  40. 1140
    CSS盒模型与排版

    表格单元格里的长文本,为什么加了 text-overflow 还是不出省略号?

    表格采用自动列宽时,长内容会撑大列,单元格即使写了 text-overflow: ellipsis 也未必发生溢出。table-layout: fixed 可让列宽受表格约束,内层包裹元素或特定宽度技巧也能制造裁剪范围;选法取决于整表列宽是否可固定。

    核心关键词表格单元格 text-overflow 省略
    #盒模型与排版
  41. 1141
    CSS盒模型与排版

    父元素加了 transform,里面 fixed 定位的弹窗为什么不再相对视口了?

    祖先的 transform 不为 none 时,可成为 absolute 与 fixed 后代的包含块,固定弹窗于是跟随组件而非视口。filter 等属性也可能产生类似效果;需要视口级浮层时,Portal 可将元素移到不受该祖先约束的位置。

    核心关键词transform 改变包含块 绝对定位
    #盒模型与排版
  42. 1142
    CSS盒模型与排版

    图片放进 div 里,底下为什么总多出几像素空白?

    图片作为行内内容时默认靠文字基线对齐,基线下方仍需给字形下伸部分留空间,于是底部看起来有一条缝。让图片成为块级元素、调整 vertical-align 或改变行盒设置都能处理,但应按是否还需要文字同行来选择。

    核心关键词vertical-align line-height 基线对齐
    #盒模型与排版
  43. 1143
    CSS盒模型与排版

    上下两个 div 各设 20px 外边距,为什么间距只有 20px?

    普通块布局里,相邻块的上下外边距可能合并,两个 20px 间距最终仍是 20px。正负边距有不同计算方式;Flex 与 Grid 子项不发生这种合并,BFC 只隔开内外边距,不能阻止同一上下文的兄弟互相合并。

    核心关键词垂直外边距合并 相邻兄弟 margin collapsing
    #盒模型与排版
  44. 1144
    CSS盒模型与排版

    display: none 和 visibility: hidden 都能隐藏元素,区别到底在哪?

    display: none 让元素不生成布局盒子,周围内容会重新排列;visibility: hidden 保留盒子与占位,只隐藏绘制。两者对指针事件、后代覆盖、过渡与辅助技术的影响也不同,保留布局空位或做淡出时应先明确期望的交互状态。

    核心关键词display none 与 visibility hidden 区别
    #盒模型与排版
  45. 1145
    CSS盒模型与排版

    div 写 width: 100% 为什么会撑破父容器,width: auto 却不会?

    普通块级元素的 width: auto 会考虑自身外边距、边框与内边距后填满可用空间;width: 100% 先把内容宽设为包含块宽,额外空间可能使它溢出。border-box 只能把边框和内边距纳入指定宽度,外边距仍需另算。

    核心关键词width auto 与 100% 区别
    #盒模型与排版
  46. 1146
    CSS盒模型与排版

    文字改成竖排以后,外边距合并和百分比宽度还按原来的规则算吗?

    writing-mode 切换竖排后,块轴转为水平,沿块轴发生的外边距合并也可能表现为左右合并;direction 只改变行内方向,不改变块轴。width 是物理宽度,inline-size 则跟随书写轴,竖排布局中不能混用两种直觉。

    核心关键词writing-mode 块轴方向 margin 百分比
    #盒模型与排版
  47. 1147
    CSS层叠与选择器

    all: unset 和 all: revert 有什么不同,重置后元素会变成什么样?

    all 可一次重置大多数 CSS 属性,但不会重置 direction、unicode-bidi 与自定义属性。unset 对可继承属性取继承值,其余取初始值;revert 则退回更低来源的样式,按钮和 div 的浏览器默认表现因此可能保留。

    核心关键词CSS all property unset revert
    #层叠与选择器
  48. 1148
    CSS层叠与选择器

    在 @media 里面写 @layer,层的优先级会变吗?

    @media 内可以声明 @layer,但层的排列顺序属于整份样式表的级联,不会因媒体条件而变成局部规则。媒体查询只决定其中声明是否参与匹配;断点切换后若样式优先级不如预期,应先检查层的首次声明顺序。

    核心关键词CSS @layer inside @media rules
    #层叠与选择器
  49. 1149
    CSS层叠与选择器

    CSS 自定义属性默认会继承吗?和普通属性有什么不一样?

    CSS 自定义属性默认继承到后代,可用于组件主题传值;它的初始状态却是保证无效值,不是某个具体颜色或长度。把变量设为 initial 后,引用它的 var() 可能转为回退值或使声明无效;@property 可重新定义继承和初始值。

    核心关键词CSS custom property inheritance behavior
    #层叠与选择器
  50. 1150
    CSS层叠与选择器

    自定义属性能做过渡动画吗?需要什么条件?

    未注册的 CSS 自定义属性按普通 token 序列处理,浏览器通常无法在两个值之间连续插值。用 @property 声明语法类型、继承规则和初始值后,颜色或长度变量才可参与平滑过渡;渐变背景是否跟着变化还取决于引用位置。

    核心关键词CSS custom property transition animation
    #层叠与选择器#动画
上一页
1…2122232425…100
下一页
前端进阶之旅本地 Markdown 维护 · 服务端分页 · 完整内容对用户与搜索引擎一致