全屏元素应设display: block或flex、position: fixed并绑定top/left/width/height，:fullscreen中显式声明box-sizing: border-box，移动端优先用webkit-playsinline模拟全屏。
全屏元素的display和position怎么设才不“飘”
全屏显示的元素（比如弹层、视频播放器、模态框）一旦用display: none或visibility: hidden临时隐藏，再切回全屏时经常错位、尺寸异常，甚至脱离视口。根本原因不是CSS没写对，而是浏览器在全屏切换过程中会重置部分样式计算上下文——尤其当元素原本是display: inline或position: static时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全屏前确保目标元素是
display: block或display: flex（避免inline类行为干扰尺寸计算） - 显式设置
position: fixed并绑定top: 0; left: 0; width: 100vw; height: 100vh，别依赖100%——后者在嵌套相对定位容器里会失效 - 如果用
requestFullscreen()触发，记得在fullscreenchange事件里重新校准transform或z-index，否则旋转设备后可能偏移
fullscreen伪类里哪些CSS属性会被强制覆盖
浏览器对:fullscreen（或::-webkit-full-screen等前缀版本）有硬性限制：部分属性即使写了也无效，比如margin、float、vertical-align，还有某些transform组合（如带perspective的3D变换）。更麻烦的是，不同内核处理box-sizing的方式不一致——WebKit默认强制border-box，而Gecko可能沿用元素原有值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:fullscreen规则里显式声明box-sizing: border-box，避免padding/border撑出滚动条 - 慎用
transform: scale()做缩放，全屏下DPR变化可能导致像素模糊；优先用width/height配合object-fit控制内容 - 所有
z-index必须大于2147483647（即MAX_SAFE_INTEGER），否则某些浏览器（如旧版Safari）会降级为auto
移动端video全屏时样式失控怎么办
iOS Safari和Android Chrome对<video></video>全屏有独立渲染层，此时你写的CSS几乎全部失效——:fullscreen伪类不触发，width: 100%变成屏幕宽度而非父容器，甚至background-color都可能被系统UI覆盖。这不是bug，是平台强制隔离策略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要试图用CSS控制原生全屏
<video></video>的内部布局；改用webkit-playsinline+ 自定义控件 +position: fixed模拟全屏 - 检测是否进入原生全屏用
document.fullscreenElement === videoEl，而不是监听video事件，因为webkitbeginfullscreen等事件已废弃 - 若必须用原生全屏，在
:fullscreen里只写最简样式：width: 100% !important; height: 100% !important; margin: 0 !important;，其他交由JS动态注入
全屏退出后元素尺寸/位置“闪一下”的修复逻辑
退出全屏瞬间，浏览器先恢复原始DOM结构，再重排样式，中间存在几十毫秒空白期。如果原始元素有transition或父容器用flex/grid布局，就容易出现回弹、抖动或短暂消失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 退出前用
getComputedStyle(el)缓存关键尺寸（width、height、top、left），退出后立即el.style写回，撑住布局 - 给全屏容器加
will-change: transform，提前通知浏览器该元素将频繁变更，减少重排开销 - 避免在
fullscreenchange里直接操作DOM；用requestAnimationFrame包裹尺寸重置逻辑，确保在下一帧执行
全屏样式最不可靠的其实是“你以为它还在原来的位置”。每次切换都要当成一次全新渲染来对待，而不是延续之前的布局上下文。
