当前位置：首页 > article >正文

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

article 2024/12/23 11:15:20

前端技术探索系列：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;
}