外贸箱包网站模板什么是百度竞价排名服务
1. aspect-ratio
描述: 用于定义元素的宽高比，简化了以往使用“填充黑客”的方法。只需指定一个比率，浏览器会自动调整元素的尺寸
案例:
.aspect-ratio-hd {aspect-ratio: 16/9;
}
.aspect-ratio-square {aspect-ratio: 1; /* 正方形 */
}
2. object-fit
描述: 控制替换元素（如图像）的内容如何适应其容器，常用值包括 cover 和 scale-down
案例:
.image {object-fit: cover; /* 图像覆盖容器 */aspect-ratio: 1; /* 可选：约束图像大小 */max-block-size: 250px; /* 最大高度 */
}
3. margin-inline
描述: 用于设置元素的左右边距，简化了以往的 margin-left 和 margin-right 设置
案例:
.container {margin-inline: auto; /* 水平居中 */
}
4. text-underline-offset
描述: 控制文本基线与下划线之间的距离，改善可读性
案例:
a:not([class]) {text-underline-offset: 0.25em; /* 下划线偏移量 */
}
5. outline-offset
描述: 设置轮廓与元素之间的距离，提升焦点可见性
案例:
.outline-offset {outline: 2px dashed blue; /* 蓝色虚线轮廓 */outline-offset: .5em; /* 偏移量 */
}
6. scroll-margin-top/bottom
描述: 在滚动到锚点时增加偏移量，避免导航条覆盖内容
案例:
[id] {scroll-margin-top: 2rem; /* 向上增加空间 */
}
7. color-scheme
描述: 定义浏览器 UI 元素（如表单控件和滚动条）的颜色方案，以适应深色或浅色主题
案例:
:root {color-scheme: dark light; /* 优先使用深色主题 */
}
8. accent-color
描述: 修改复选框和单选按钮等表单控件的颜色，提高主题管理能力
案例:
:root {accent-color: mediumvioletred; /* 自定义控件颜色 */
}
9. width: fit-content
描述: 自动调整元素宽度以适应内容，类似于 inline-block
案例:
.fit-content {width: fit-content; /* 根据内容调整宽度 */
}
10. overscroll-behavior
描述: 控制滚动区域的行为，防止滚动超出边界影响父页面
案例:
.sidebar, .article {overscroll-behavior: contain; /* 限制滚动行为 */
}
11. text-wrap
描述: 改善文本排版，防止孤立词和不平衡行
案例（平衡文本）:
:is(h1, h2, h3, h4, .text-balance) {text-wrap: balance; /* 平衡文本行 */max-inline-size: 25ch;
}
12. scrollbar-gutter
描述: 为滚动条预留空间，避免因滚动条出现或消失而导致布局偏移
案例:
.container {scrollbar-gutter: stable; /* 保持滚动条空间 */
}