第13章：数学函数和逻辑属性
13.1 CSS数学函数
13.1.1 calc() 函数
calc() 函数是CSS中最常用的数学函数，允许在CSS属性值中进行数学计算。
/* 基础用法 */
.container {
width: calc(100% - 200px);
height: calc(100vh - 80px);
}
/* 复杂计算 */
.card {
width: calc((100% - 60px) / 3);
margin: calc(20px + 2%);
}
/* 响应式字体大小 */
.fluid-text {
font-size: calc(16px + 1vw);
}
/* 动态间距 */
.spacing {
gap: calc(var(--base-spacing) * 2);
}
13.1.2 min() 和 max() 函数
min() 和 max() 函数用于设置值的范围限制。
/* 最小宽度限制 */
.sidebar {
width: min(300px, 25%);
}
/* 最大宽度限制 */
.content {
width: max(50%, 400px);
}
/* 响应式容器 */
.container {
width: min(1200px, 90vw);
height: max(400px, 50vh);
}
/* 字体大小范围 */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
}
13.1.3 clamp() 函数
clamp() 函数是 min() 和 max() 的组合，设置最小、首选和最大值。
/* 响应式字体大小 */
.responsive-text {
font-size: clamp(1rem, 2.5vw, 2rem);
}
/* 动态间距 */
.adaptive-spacing {
padding: clamp(1rem, 5%, 3rem);
}
/* 图片尺寸控制 */
.responsive-image {
width: clamp(200px, 50%, 600px);
height: clamp(150px, 30vh, 400px);
}
13.2 高级数学函数
13.2.1 三角函数
CSS支持基本的三角函数运算。
/* 旋转角度计算 */
.rotated-element {
transform: rotate(calc(45deg + var(--angle-adjustment)));
}
/* 正弦函数应用 */
.wave-effect {
transform: translateY(calc(sin(var(--time)) * 10px));
}
/* 复杂动画路径 */
.animated-element {
transform:
translateX(calc(100px * cos(var(--angle))))
translateY(calc(100px * sin(var(--angle))));
}
13.2.2 数学函数组合使用
多个数学函数可以组合使用，实现复杂布局。
/* 网格布局计算 */
.grid-container {
--columns: 4;
--gap: 20px;
grid-template-columns: repeat(
auto-fit,
minmax(
calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns)),
1fr
)
);
gap: var(--gap);
}
/* 响应式卡片布局 */
.card-grid {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(
clamp(250px, calc(33.333% - 20px), 400px),
1fr
)
);
gap: clamp(10px, 3%, 30px);
}
13.3 逻辑属性
13.3.1 逻辑属性基础
逻辑属性根据书写模式（writing-mode）和文本方向（direction）自动调整。
/* 传统物理属性 */
.physical {
margin-left: 20px;
padding-right: 10px;
border-top: 1px solid #ccc;
}
/* 对应的逻辑属性 */
.logical {
margin-inline-start: 20px;
padding-inline-end: 10px;
border-block-start: 1px solid #ccc;
}
13.3.2 块级和行内逻辑属性
块级逻辑属性
/* 块级尺寸 */
.block-sizing {
block-size: 200px; /* 相当于 height */
min-block-size: 100px; /* 相当于 min-height */
max-block-size: 300px; /* 相当于 max-height */
}
/* 块级边距和填充 */
.block-spacing {
margin-block: 20px; /* 相当于 margin-top 和 margin-bottom */
padding-block: 10px 30px; /* 相当于 padding-top 和 padding-bottom */
border-block: 2px solid #333; /* 相当于 border-top 和 border-bottom */
}
行内逻辑属性
/* 行内尺寸 */
.inline-sizing {
inline-size: 300px; /* 相当于 width */
min-inline-size: 200px; /* 相当于 min-width */
max-inline-size: 500px; /* 相当于 max-width */
}
/* 行内边距和填充 */
.inline-spacing {
margin-inline: 15px; /* 相当于 margin-left 和 margin-right */
padding-inline: 20px 40px; /* 相当于 padding-left 和 padding-right */
border-inline: 1px solid #666; /* 相当于 border-left 和 border-right */
}
13.4 逻辑属性实战应用
13.4.1 多语言支持
逻辑属性特别适合多语言网站的布局。
/* 支持从左到右和从右到左语言 */
.multilingual-layout {
/* 物理属性（不推荐） */
&.physical {
text-align: left;
margin-left: auto;
padding-right: 20px;
}
/* 逻辑属性（推荐） */
&.logical {
text-align: start;
margin-inline-start: auto;
padding-inline-end: 20px;
}
}
/* 垂直书写模式支持 */
.vertical-writing {
writing-mode: vertical-rl;
.logical-element {
margin-block-start: 20px; /* 在垂直模式下相当于 margin-top */
padding-inline-end: 10px; /* 在垂直模式下相当于 padding-right */
}
}
13.4.2 响应式逻辑布局
结合媒体查询和逻辑属性创建自适应布局。
.responsive-logical-layout {
/* 基础逻辑属性 */
padding-inline: clamp(1rem, 5%, 3rem);
margin-block: var(--spacing-md);
/* 水平布局 */
@media (min-width: 768px) {
display: flex;
gap: var(--spacing-lg);
.sidebar {
flex: 0 0 clamp(200px, 25%, 300px);
}
.main-content {
flex: 1;
min-inline-size: 0; /* 防止flex项目溢出 */
}
}
/* 垂直布局 */
@media (max-width: 767px) {
.sidebar {
margin-block-end: var(--spacing-md);
}
}
}
13.5 现代CSS布局模式
13.5.1 内在网页设计
内在网页设计强调内容驱动布局，而非固定尺寸。
.intrinsic-layout {
/* 内容优先的容器 */
.container {
width: min(100% - 2rem, 70ch);
margin-inline: auto;
}
/* 内在网格布局 */
.intrinsic-grid {
--min: 250px;
--max: 1fr;
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(var(--min), 100%), var(--max)));
gap: clamp(1rem, 2vw, 2rem);
}
/* 流体排版 */
.fluid-typography {
font-size: clamp(1rem, 2.5vw, 1.5rem);
line-height: clamp(1.4, 1.6, 1.8);
max-inline-size: 65ch;
}
}
13.5.2 容器查询与逻辑属性
结合容器查询和逻辑属性创建组件级响应式设计。
.card-component {
container-type: inline-size;
/* 基础样式 */
padding: var(--spacing-md);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
/* 容器查询 - 窄容器 */
@container (max-width: 400px) {
.card-content {
flex-direction: column;
gap: var(--spacing-sm);
.card-image {
inline-size: 100%;
block-size: 200px;
}
.card-text {
padding-inline: 0;
}
}
}
/* 容器查询 - 宽容器 */
@container (min-width: 401px) {
.card-content {
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
.card-image {
flex: 0 0 clamp(150px, 30%, 250px);
block-size: auto;
}
.card-text {
flex: 1;
min-inline-size: 0;
}
}
}
}
13.6 实战案例：现代卡片组件
13.6.1 完整的卡片组件实现
.modern-card {
/* 逻辑属性定义 */
--card-padding: clamp(1rem, 3vw, 2rem);
--card-gap: clamp(0.5rem, 2vw, 1.5rem);
--card-radius: clamp(8px, 2vw, 16px);
/* 容器样式 */
container-type: inline-size;
background: var(--surface-color);
border-radius: var(--card-radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
/* 内容布局 */
.card-content {
padding: var(--card-padding);
display: flex;
flex-direction: column;
gap: var(--card-gap);
}
/* 图片容器 */
.card-image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
&:hover img {
transform: scale(1.05);
}
}
/* 文本内容 */
.card-text {
.card-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
line-height: 1.3;
margin-block-end: 0.5em;
}
.card-description {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: 1.5;
color: var(--text-secondary);
}
}
/* 操作区域 */
.card-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
margin-block-start: auto;
.btn {
padding-inline: clamp(0.75rem, 2vw, 1.25rem);
padding-block: clamp(0.5rem, 1.5vw, 0.75rem);
font-size: clamp(0.875rem, 2vw, 1rem);
}
}
/* 容器查询适配 */
@container (max-width: 300px) {
.card-content {
padding: calc(var(--card-padding) * 0.75);
}
.card-actions {
justify-content: stretch;
.btn {
flex: 1;
min-inline-size: 0;
}
}
}
@container (min-width: 500px) {
.card-content {
flex-direction: row;
align-items: flex-start;
.card-image {
flex: 0 0 40%;
}
.card-text {
flex: 1;
}
}
}
}
13.6.2 数学函数在动画中的应用
.animated-element {
/* 使用calc()创建动态动画 */
--animation-duration: 2s;
--animation-delay: calc(var(--index) * 0.1s);
animation:
slideIn calc(var(--animation-duration) * 1.5)
calc(var(--animation-delay) + 0.5s) ease-out backwards;
/* 关键帧中使用数学函数 */
@keyframes slideIn {
0% {
transform:
translateX(calc(-100% - 20px))
scale(0.8);
opacity: 0;
}
50% {
transform:
translateX(calc(-50% - 10px))
scale(1.1);
}
100% {
transform:
translateX(0)
scale(1);
opacity: 1;
}
}
/* 悬停效果使用数学计算 */
&:hover {
transform:
translateY(calc(-1 * var(--hover-lift)))
scale(calc(1 + var(--hover-scale)));
box-shadow:
0 calc(var(--hover-lift) * 2)
calc(var(--hover-lift) * 4)
rgba(0, 0, 0, 0.15);
}
}
13.7 最佳实践和注意事项
13.7.1 性能优化
/* 好的实践：使用CSS变量缓存计算结果 */
:root {
--container-width: min(1200px, 90vw);
--sidebar-width: clamp(200px, 25%, 300px);
--content-width: calc(var(--container-width) - var(--sidebar-width));
}
.layout {
width: var(--container-width);
.sidebar {
width: var(--sidebar-width);
}
.content {
width: var(--content-width);
}
}
/* 避免过度复杂的计算 */
.bad-practice {
/* 过于复杂的计算可能影响性能 */
width: calc(((100% - (20px * 3)) / 4) + (10px * var(--multiplier)) - 5%);
}
.good-practice {
/* 分解复杂计算 */
--base-width: calc((100% - 60px) / 4);
--adjustment: calc(10px * var(--multiplier));
width: calc(var(--base-width) + var(--adjustment) - 5%);
}
13.7.2 浏览器兼容性处理
/* 渐进增强策略 */
.responsive-element {
/* 基础回退样式 */
width: 90%;
max-width: 400px;
/* 现代浏览器支持 */
@supports (width: min(200px, 50%)) {
width: min(400px, 50%);
}
@supports (width: clamp(200px, 50%, 600px)) {
width: clamp(200px, 50%, 600px);
}
}
/* 逻辑属性的回退方案 */
.multidirectional-layout {
/* 物理属性作为回退 */
margin-left: 20px;
margin-right: 20px;
text-align: left;
/* 逻辑属性覆盖 */
margin-inline: 20px;
text-align: start;
/* 针对不支持逻辑属性的浏览器 */
@supports not (margin-inline: 20px) {
/* 使用物理属性适配不同文本方向 */
html[dir="rtl"] & {
margin-left: 0;
margin-right: 20px;
text-align: right;
}
}
}
13.8 总结
数学函数和逻辑属性是现代CSS3的核心特性，它们为开发者提供了：
- 更精确的布局控制 - 通过数学计算实现精确的尺寸和间距
- 更好的响应式设计 - 使用
clamp()等函数创建真正的响应式布局 - 多语言支持 - 逻辑属性自动适配不同的书写方向和文本流向
- 性能优化 - 减少媒体查询的使用，提高代码可维护性
- 未来兼容性 - 为新的布局模式和容器查询做好准备
掌握这些特性将显著提升你的CSS技能，让你能够创建更加灵活、健壮和可维护的现代网页布局。
