CSS逻辑属性转换器
将物理CSS属性(margin-left、width、top、text-align: left)转换为其逻辑属性等效物(margin-inline-start、inline-size、inset-block-start、text-align: start),或反向转换。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-logical-properties-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"inputCss": ".box {\n margin-left: 10px;\n margin-right: 20px…",
"direction": "physical-to-logical"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-logical-properties-converter` tool (CSS Logical Properties Converter) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-logical-properties-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS逻辑属性转换器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS逻辑属性是什么?
普通的CSS盒模型属性 — margin-left、padding-right、width、top — 用固定的物理方向描述布局。只要每个页面都是从左到右、从上到下阅读,这就能正常工作。但当您的网站支持从右到左的语言(阿拉伯语、希伯来语、波斯语、乌尔都语)或竖排书写模式时,就会出现问题:一个原本应该在标题之前的margin-left: 16px在布局翻转时会出现在之后,因为"左"从未移动过,虽然"之前"已经改变了。
逻辑属性相对于内容流而不是屏幕边缘来描述布局:inline-start/inline-end替换left/right,block-start/block-end替换top/bottom。在默认的水平LTR书写模式 — 网络的大部分 — 中,inline-start呈现为左侧,所以在视觉上没有改变。但切换到RTL或竖排书写模式时,逻辑属性会自动随着内容重新定向,而物理属性仍然卡在错误的一侧。
即使今天没有RTL计划,这也很重要:逻辑属性描述的是意图("在阅读顺序中此元素之前的空间"),而浏览器、设计系统和框架(包括Tailwind的ms-/me-工具)都在向它们汇聚。
如何使用此工具
- 将CSS代码块粘贴到输入框 — 任何选择器、注释和格式都没有问题。
- 选择方向:物理到逻辑将
margin-left、width、top、text-align: left和类似的属性转换为其逻辑等效物;逻辑到物理进行反向转换,在需要旧工具的物理备选方案时很有用。 - 转换后的CSS会立即显示。复制它或下载为
.css文件。
下表中的属性会被改动 — 选择器、括号、注释、无法识别的声明和缩进完全保持原样。
映射表(LTR — 标准假设)
| 物理 | 逻辑 |
|---|---|
margin-left / -right / -top / -bottom |
margin-inline-start / -inline-end / -block-start / -block-end |
padding-left / -right / -top / -bottom |
padding-inline-start / -inline-end / -block-start / -block-end |
border-left / -right / -top / -bottom (及 -width/-color/-style) |
border-inline-start / -inline-end / -block-start / -block-end (及其变体) |
width / height |
inline-size / block-size |
min-/max-width/height |
min-/max-inline-size / block-size |
top / bottom / left / right |
inset-block-start / -block-end / -inline-start / -inline-end |
text-align: left / right |
text-align: start / end |
该工具采用标准水平LTR书写模式,因此inline-start = 左、inline-end = 右 — 这是几乎所有逻辑属性文档中使用的简化,因为只有当元素实际设置direction: rtl或竖排writing-mode时,反转才会产生影响。
常见问题
这能捕获我样式表中的所有物理属性吗?
它涵盖上面的标准盒模型、大小、插图和text-align对。该集合之外的属性(background-position、transform、border-radius角)保持不变,不会被猜测。
它能处理一行上的多个声明吗?
不能 — 它每行读取一个property: value;声明。先格式化压缩的CSS,使每个声明有自己的行。
为什么text-align保持其名称但改变其值?
text-align始终接受逻辑关键字(start/end)以及物理关键字 — 没有单独的逻辑属性名称。只有值会改变。
隐私
此工具完全在您的浏览器中运行。您的CSS永远不会上传到服务器。