外贸网站推广工具,平台推广计划,电商的网站有几个,界面设计报价1. aspect-ratio
描述: 用于定义元素的宽高比#xff0c;简化了以往使用“填充黑客”的方法。只需指定一个比率#xff0c;浏览器会自动调整元素的尺寸
案例:
.aspect-ratio-hd {aspect-ratio: 16/9;
}
.aspect-ratio-square {aspect-ratio: 1; /* 正方形 */
}2. object-…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; /* 保持滚动条空间 */
}
