图片放容器里被压扁了？怎么说呢，z-index 调到 还是被盖？不过，Modal 一打开，滚到底背景页跟着跑？标题断行逼死强迫症，最终一个词孤零零挂在下一行？

这些问题不是你不会写 CSS，而是你不知道这几个隐藏属性。

. object-fit: cover — 图片变形终结者

你肯定写过这种代码：使用者头像放在一个 40x40 的圆形容器里结果使用者传了张长方形的图，头像被压成椭圆形。更惨的是列表里的商品图，尺寸五花八门。统一塞进 200x200 的卡片里有的图胖了、有的图瘦了。说起来，

常见的 做法是用 background-image + background-size: cover 代替 标签。但语义差、SEO 不友好，还不能右键保存。

其实 标签配 object-fit 就能解决问题：

.avatar-img {
width的观点是，40px;老实说，height: 40px;border-radius: %;object-fit: cover;}

object-fit:

• fill: 完全填充容器，可能变形。
• contain: 保持比例。完整显示图片，留白，
• cover: 保持比例，裁掉溢出。
• none: 保持比例取原始尺寸，也可能溢出。

还有个搭档 object-position,控制从图片哪个位置开始裁剪：

.animal-photo {
object-fit: cover;object-position: top;}

浏览器支持：所有现代浏览器；IE 不支持，再看一句话，给 加个 {}。别再为图片变形写 background-image。

. overscroll-behavior: contain — 锁死滚动，不让背景页跟着跑

M开全屏 Modal 时滚动到底部会把背景页面一起滚；移动端下拉时触发“下拉刷新”，页面重新加载。这个叫“滚动穿透”，以前方案麻烦：给 加 overflow:hidden 等等，却在 iOS Safari 上失效。

一行 CSS 就够了：

.modal-body {
overscroll-behavior: contain;overflow-y: auto;max-height: 70vh;}

详情


长内容...

• {{: 默认，将滚动传给祖先元素。其实，
• {|: 锁住只停在当前元素边界内。不传递，
• }}: 完全阻止回弹效果与祖先交互。

要阻止移动端“下拉刷新”，在 body 上加一行：

body {
overscroll-behavior-y: contain;}

浏览器支持：所有现代浏览器，包括移动端 Safari；IE 不支持，配合 Modal、抽屉、侧边栏后体验提高一级。

. text-wrap: balance — 标题断行不再逼死强迫症

"建立高性能、可 的微服务架构" —— 微服务架构四字孤零零占一行，上面一行太长。视觉失衡，让设计师想掀桌子。说起来，以前手动插入 br 标签，却随屏幕宽度变化而失衡。

`text-wrap: balance` 是标准答案：

.page-title {
text-wrap: balance;max-width:600px;}
'/>

html

• 浏览器会自动计算每行字数。让文本量均衡，不出现孤儿词。
• 说到性能限制。最多计算几百行，用于标题、副标题等少量文字。话说回来，

另一个兄弟属性 text-wrap: pretty 用来避免段落末尾只有单词：

css .article-content p { text-wrap: pretty;}

• balance——追求视觉平衡； pretty——追求段落美观。

浏览器支持Chrome+。Edge+,Safari+,Firefox+。怎么说呢，

---

. isolation : isolate — z-index 再也不用加数字堆叠战斗了

`z-index` 常被误解。当元素创建新的层叠上下文后其内部子元素只相互比较，而与外部无关。这就叫隔离，比如 Modal 内部 Dropdown 的 z-index 再大也受限于 Modal 父容器。如果父容器也设 z-index，则 Dropdown 被外部 Fixed 按钮盖住。

`isolation : isolate` 用来明确创建层叠上下文，把组件自己的 z-index 锁在内部：

css .modal-backdrop{ position:flexible?inset，;/* placeholder */ z-index:?，isolation:isolate;} /* 内部子元素自己玩 */ .modal-dropdown{ position:absolute;说起来，z-index:?，/* 相对于 modal 内部即可 */ }

下拉菜单…

• 使用 isolation 能让代码语义更清晰：“这个组件有自己的层叠世界”。

浏览器支持所有现代浏览器，无例外。

---

. :has — CSS 拥有父选择器

至于Pains，

• - 当 card 包含大尺寸图片时 padding 要增大。
• - 当 card 包含错误信息时边框应变红。老实说，
• - 表单中若有无效 input。则整个 fieldset 高亮提醒使用者修正。
--- css /* 如果 card 内包含 img。padding 加大 */ 再看.card，not) { padding-top?，} /* placeholder example */ /* 如果 card 内包含错误信息，则边框红色 */ .card的观点是，hover{ border-color:red} /* If form contains invalid input -> fieldset highlight */ fieldset{ background:white } /* placeholder only */ This is not correct formatting but gist is to show how :has can be used. But I'll fix it later properly. --- ### 实际示例 #### 场景1：父子联动 css .card{ padding:auto } .card这方面。hover{ color:red } #### 场景2：不用 JS 就能做交互 css .panel input:checked~ .config{ display:block } .search-group input:not ~ .clear-btn{ display:inline-block } 至于.item，hover + .item:hover{ background:#f0f0f0 } #### 场景3：布局自适配 css .grid{ container-type:inline-size } @container{ grid-template-columns:auto auto auto;} @container{ grid-template-columns:auto auto;} .how-to-use has?etc... **Browser support:** Chrome+,Edge+,Safari+。Firefox+. All platforms now support `has`. ---

@container — 对组件级响应式处理

***User Pain Points Embedded***: - “同一组件在不同区域渲染时需要写三套 CSS 或 JS 动态测宽。” - “@media 看不到组件自身宽度，只能按 viewport 定制。” Solution: ① 给容器定义查询类型： css .sidebar{ container-type:inline-size;container-name:siderbar;} ② 写基于容器宽度的规则： css @container siderbar { .card{ display:block;padding:.8rem;font-size:.8rem } .card-title{ font-size:.9rem } .card-image{ display:none;} } @container siderbar { .card{ display:grid;grid-template-columns:auto;gap:.6rem，} } ③ 匿名容器用法： css .card-wrapper{ container-type:inline-size;} /* 对直接子元素生效，无需名字 */ @container{ .card{ flex-direction=row;} } 再看实际场景示例，

---