掌握现代 CSS 单位和函数，实现更灵活的布局
| 单位 | 描述 | 示例 |
|---|---|---|
| vw | 视口宽度的 1% | width: 50vw; |
| vh | 视口高度的 1% | height: 100vh; |
| vmin | 视口宽度和高度中较小值的 1% | font-size: 5vmin; |
| vmax | 视口宽度和高度中较大值的 1% | font-size: 5vmax; |
解决移动端地址栏遮挡问题的新视口单位：
| 单位 | 描述 | 适用场景 |
|---|---|---|
| svh | 小视口高度（地址栏显示时） | 始终使用最小高度 |
| lvh | 大视口高度（地址栏隐藏时） | 始终使用最大高度 |
| dvh | 动态视口高度（根据地址栏状态调整） | 大多数场景的最佳选择 |
.hero {
height: 100dvh; /* 动态视口高度 */
display: flex;
align-items: center;
justify-content: center;
}| 传统属性 | 逻辑属性 | 描述 |
|---|---|---|
| margin-left | margin-inline-start | 起始边距 |
| margin-right | margin-inline-end | 结束边距 |
| margin-top | margin-block-start | 上边距 |
| margin-bottom | margin-block-end | 下边距 |
| padding-left | padding-inline-start | 起始内边距 |
| padding-right | padding-inline-end | 结束内边距 |
| text-align: left | text-align: start | 文本起始对齐 |
| text-align: right | text-align: end | 文本结束对齐 |
.card {
margin-inline: auto; /* 水平居中 */
padding-block: 20px; /* 垂直内边距 */
padding-inline: 15px; /* 水平内边距 */
text-align: start; /* 文本起始对齐 */
}执行数学计算，支持加减乘除运算。
.container {
width: calc(100% - 40px); /* 100% 宽度减去 40px */
}
.sidebar {
width: calc(30% - 20px);
}
.content {
width: calc(70% - 20px);
}返回多个值中的最小值。
.image {
max-width: min(100%, 500px); /* 最大宽度为 100% 或 500px，取较小值 */
}返回多个值中的最大值。
.font-size {
font-size: max(16px, 4vw); /* 字体大小为 16px 或 4vw，取较大值 */
}限制值在一个范围内，接受三个参数：最小值、首选值、最大值。
.fluid-type {
font-size: clamp(1rem, 2vw + 1rem, 2.5rem);
}:root {
--base-font-size: 16px;
}
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
}
h2 {
font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}
p {
font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}.container {
padding: clamp(1rem, 3vw, 2rem);
}
.card {
margin-bottom: clamp(1rem, 2vw, 1.5rem);
}.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.flex-centered {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
}