HTML5 标签没有 inset 属性,该属性属于 CSS 逻辑属性,需配合 position: absolute/fixed 及父容器 position: relative 使用,且存在浏览器兼容性限制。
HTML5 标签本身没有 inset 属性——这是个常见误解,源于把 CSS 的 inset 逻辑或某些框架/库的自定义属性误认为是原生 HTML 属性。
为什么搜“video inset”会得到错误结果
浏览器控制台报错如 Unknown property 'inset' 或视频不渲染,往往是因为:
- 在
标签上直接写了inset="0"这类无效 HTML 属性(HTML 规范不支持) - 把 CSS
inset(用于position: absolute/fixed元素的简写)误用在未定位的上 - 看到某篇博客或 UI 库文档里用了
inset,但实际是其封装组件的 prop,非原生行为
CSS inset 与 video 的正确配合方式
若目标是让 占满父容器并留出内边距(比如实现“安全区 inset”),必须通过 CSS 实现,且需满足定位前提:
-
必须有position: absolute或position: fixed - 父容器需设
position: relative(或其它非static值) - 再用
inset: 10px等值替代传统的top/right/bottom/left
示例:
立即学习“前端免费学习笔记(深入)”;