width: 100% 相对包含块计算且受盒模型影响，width: inherit 直接继承父元素width值；vw/vh 基于视口不随父容器变化；Container Queries 需显式设 container-type 才生效；ResizeObserver 是监听父容器尺寸的轻量JS方案。
width: 100% 和 width: inherit 的区别在哪
两者都让元素宽度随父容器变化，但行为逻辑完全不同：width: 100% 是相对于包含块（containing block）计算的，而 width: inherit 是直接复制父元素的 width 值（无论该值是像素、百分比还是 auto）。
常见错误是以为 width: 100% 总能“填满父容器”，其实它会叠加 padding、border 和 margin；而 width: inherit 在父元素用 width: auto 时，子元素也会变成 auto —— 此时根本不会撑开，反而可能塌陷。
- 父容器设了
padding: 20px？width: 100%的子元素会溢出，需加box-sizing: border-box - 父元素宽度是
max-width: 600px且未显式设width？inherit拿不到有效值，子元素宽度退化为auto - 想响应式缩放又保留内边距空间？优先用
width: 100%+box-sizing: border-box，别依赖inherit
vw/vh 单位在嵌套容器里为什么失效
vw 和 vh 永远基于视口（viewport），和父容器完全无关。所以“根据父容器改变自身样式”这个目标，它们天然不满足——哪怕你把一个 div 嵌套十层深，width: 50vw 还是占屏幕一半宽。
容易踩的坑是误以为 50vw 在小卡片里就自动变小，结果在移动端卡片只占屏宽 20%，它却强行占 50%，直接撑破布局。
立即学习“前端免费学习笔记（深入）”；
- 需要相对父容器缩放？改用
%、ch、em或 CSS 自定义属性 +calc() - 真要用视口单位做自适应，务必搭配媒体查询限制范围，比如
@media (max-width: 768px) { .card { width: 90vw; } } -
vmin/vmax看似聪明，但在 iframe 或弹窗等非主视口场景下行为不可控，慎用
使用 CSS Container Queries 前必须确认的三件事
这是目前唯一原生支持“根据父容器尺寸改变自身样式”的机制，但它不是开箱即用：浏览器支持、容器声明、查询语法三者缺一不可。
最常被忽略的是容器必须显式启用“容器格式上下文”（container formatting context），否则所有 @container 规则会被浏览器静默忽略，连报错都没有。
- 父元素必须设
container-type: inline-size（或size），仅container-name不生效 - Chrome 105+、Firefox 110+、Safari 16.4+ 才支持，旧版 Safari 需用
@supports (container-type: inline-size)降级 - 不能在
<body>或<html>上设容器，它们不触发 container formatting context
示例：父容器 <section class="card"> 要响应式，就得先加 .card { container-type: inline-size; }，再写 @container (min-width: 400px) { .card h2 { font-size: 1.5rem; } }。
JavaScript 动态监听父容器尺寸变化的轻量方案
CSS 方案覆盖不到时（比如要读取父容器实际像素值、触发复杂逻辑），ResizeObserver 是当前最可靠的选择。它比轮询 offsetWidth 省资源，也比监听 window.resize 更精准。
注意点在于：它默认只观察直接父元素，如果中间有 transform、overflow: hidden 或 display: contents，可能无法正确捕获尺寸变化。
- 观察前先确认父元素是常规流内元素，避免被
display: contents“消解”结构 - 回调中不要直接修改被观察元素的尺寸，否则可能触发循环调用
- 需要兼容 IE？只能回退到
element-resize-detector库，但它依赖iframe注入，有跨域和性能隐患
简单用法：
const ro = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('父容器宽：', entry.contentRect.width);
});
});
ro.observe(document.querySelector('.target-parent'));
CSS 的自适应本质是层级关系的传递与约束。父容器没形成独立格式上下文，再花哨的单位或查询都只是空转。真正卡住的地方，往往在第一步——那个该设 container-type 却忘了设的父元素。 
