CSS系列（30）-- 逻辑属性详解

前端技术探索系列：CSS 逻辑属性详解 🌐

致读者：探索国际化布局的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 逻辑属性，这个强大的国际化布局特性。

基础概念 🚀

逻辑属性映射

/* 物理属性 vs 逻辑属性 */
.traditional {margin-left: 1rem;padding-right: 1rem;border-top: 1px solid;width: 200px;height: 100px;
}.logical {margin-inline-start: 1rem;padding-inline-end: 1rem;border-block-start: 1px solid;inline-size: 200px;block-size: 100px;
}

书写模式

/* 文档级设置 */
:root {writing-mode: horizontal-tb;    /* 默认 *//* 或 */writing-mode: vertical-rl;      /* 垂直从右到左 *//* 或 */writing-mode: vertical-lr;      /* 垂直从左到右 */
}/* 组件级设置 */
.component {writing-mode: vertical-rl;text-orientation: mixed;
}

尺寸与边距 🎯

逻辑尺寸

.container {/* 内联方向尺寸 */inline-size: 100%;min-inline-size: 200px;max-inline-size: 800px;/* 块方向尺寸 */block-size: auto;min-block-size: 100px;max-block-size: 500px;
}/* 响应式设计 */
@media (min-width: 768px) {.container {inline-size: 80%;margin-inline: auto;}
}

逻辑边距

.element {/* 单向边距 */margin-block-start: 1rem;margin-block-end: 2rem;margin-inline-start: 1.5rem;margin-inline-end: 1.5rem;/* 简写形式 */margin-block: 1rem 2rem;margin-inline: 1.5rem;/* 内边距 */padding-block: 1rem;padding-inline: 2rem;
}

边框与定位 💫

逻辑边框

.box {/* 单边边框 */border-block-start: 2px solid #333;border-inline-end: 1px dashed #666;/* 边框宽度 */border-block-width: 2px;border-inline-width: 1px;/* 边框样式 */border-block-style: solid none;border-inline-style: dashed;/* 边框颜色 */border-block-color: #333 #666;border-inline-color: #999;
}

逻辑定位

.positioned {position: absolute;inset-block-start: 0;      /* 替代 top */inset-block-end: 0;        /* 替代 bottom */inset-inline-start: 1rem;  /* 替代 left/right */inset-inline-end: 1rem;    /* 替代 right/left *//* 简写形式 */inset-block: 0;inset-inline: 1rem;
}

文本对齐 ⚡

逻辑文本属性

.text {/* 文本对齐 */text-align: start;      /* 替代 left */text-align: end;        /* 替代 right *//* 浮动 */float: inline-start;    /* 替代 left */float: inline-end;      /* 替代 right *//* 清除浮动 */clear: inline-start;    /* 替代 left */clear: inline-end;      /* 替代 right */
}

多语言支持

/* 阿拉伯语支持 */
[dir="rtl"] {font-family: "Arabic UI", sans-serif;
}/* 日语支持 */
:lang(ja) {writing-mode: vertical-rl;text-orientation: mixed;
}/* 希伯来语支持 */
:lang(he) {font-family: "Hebrew UI", sans-serif;
}

实际应用 🎨

响应式导航

.nav {display: flex;flex-direction: row;padding-inline: 1rem;gap: 1rem;
}.nav-item {margin-inline-end: 1rem;padding-block: 0.5rem;border-block-end: 2px solid transparent;
}.nav-item:hover {border-block-end-color: currentColor;
}/* RTL支持 */
[dir="rtl"] .nav {/* 无需额外修改 */
}

卡片组件

.card {padding-block: 1rem;padding-inline: 1.5rem;border-radius: 0.5rem;margin-block-end: 1rem;
}.card-header {border-block-end: 1px solid #eee;margin-block-end: 1rem;padding-block-end: 0.5rem;
}.card-content {margin-block: 1rem;
}