📝 输入CSS代码
📖 属性映射对照表
| 物理属性 | 逻辑属性 | 说明 |
|---|---|---|
| margin-top | margin-block-start | 块方向起始边距 |
| margin-bottom | margin-block-end | 块方向结束边距 |
| margin-left | margin-inline-start | 行内方向起始边距 |
| margin-right | margin-inline-end | 行内方向结束边距 |
| padding-top | padding-block-start | 块方向起始内边距 |
| padding-bottom | padding-block-end | 块方向结束内边距 |
| padding-left | padding-inline-start | 行内方向起始内边距 |
| padding-right | padding-inline-end | 行内方向结束内边距 |
| width | inline-size | 行内方向尺寸 |
| height | block-size | 块方向尺寸 |
| min-width | min-inline-size | 最小行内尺寸 |
| min-height | min-block-size | 最小块尺寸 |
| max-width | max-inline-size | 最大行内尺寸 |
| max-height | max-block-size | 最大块尺寸 |
| border-top | border-block-start | 块方向起始边框 |
| border-bottom | border-block-end | 块方向结束边框 |
| border-left | border-inline-start | 行内方向起始边框 |
| border-right | border-inline-end | 行内方向结束边框 |
| top | inset-block-start | 块方向起始偏移 |
| bottom | inset-block-end | 块方向结束偏移 |
| left | inset-inline-start | 行内方向起始偏移 |
| right | inset-inline-end | 行内方向结束偏移 |
| text-align: left | text-align: start | 文本起始对齐 |
| text-align: right | text-align: end | 文本结束对齐 |
💡 使用说明
1. 将包含传统物理属性的CSS代码粘贴到输入框中
2. 点击「转换为逻辑属性」按钮进行批量转换
3. 查看转换结果，支持一键复制
4. 逻辑属性会自动适应不同书写方向（如RTL阿拉伯语），无需为不同语言单独编写样式
5. 现代浏览器（Chrome 69+、Firefox 66+、Safari 12.1+）均已支持逻辑属性