.pt{padding-top:100px;}.rl{writing-mode:vertical-rl;}可以看到无论writing-mode是什么，padding-top都是指物理方向上方。基于这种不同的排版规则，物理方向可能会造成一些麻烦。CSS在CSSLogicalPropertiesandValuesLevel1[6]规范中引入了CSSLogicalProperties。CSSLogicalPropertiesandValues是CSS的一个新模块，它引入了从逻辑角度而不是物理、方向或维度控制来控制布局的属性和值。还是上面的DEMO，我们可以用padding-block-start代替padding-top。关键点：使用padding-block-start代替padding-top：.pt{-padding-top:100px;+padding-block-start:100px;}.rl{writing-mode:vertical-rl;}看看这次又是效果：padding的位置从物理上变到逻辑上。完整的Demo可以点这里：CodePenDemo--物理方向和逻辑方向的显示[7]Margin,padding,border,relative物理属性到逻辑属性的映射类似这个属性，在规范中有很多定义，简单列出具体的映射规则：物理属性到逻辑属性的margin映射：物理属性到逻辑属性的padding映射：物理属性到逻辑属性的border映射：物理属性到逻辑属性的relative映射：etc...（完成为列表，可以戳这里：MDN-CSSLogicalPropertiesandValues[8]）逻辑属性中没有方向性的概念，只有开始（start）和结束（end），块（block）和内联（inline）的概念。例如，在从左到右(LTR)中，起点在左，但在从右到左(RTL)中，起点在右。logical属性下的盒模型考虑到了不同布局带来的逻辑问题，整个盒模型也可以相应改变。下图中，左边是物理盒子模型，右边是逻辑属性下的盒子模型。左：物理框|右图：逻辑框的物理方向与逻辑方向重叠当然还有一种情况是设置的逻辑方向与物理方向重叠。比如我们给一个正常从左到右，从上到下的元素，同时设置padding-top和padding-block-start，看看会发生什么：div{padding-top:120px;padding-block-start:100px;}这里如果物理方向设置的padding与逻辑方向重叠，则取两者定义的值中较晚的一个。这里，由于padding-block-start是在padding-top之后定义的，所以padding的值为100px。margin和border是一样的。我这里的理解是同一个方向margin\padding\border只能有一个，不管是逻辑方向还是物理方向，以后面定义的值为准。CodePenDemo--物理方向和逻辑方向重叠DEMO展示[9]综上所述，当项目开始国际化，当越来越多的国内业务开始出海，国际兼容和适配会越来越重要。幸运的是，CSS一直在与时俱进，推陈出新。当您的排版布局需要考虑不同的书写模式时，您需要开始考虑使用逻辑属性而不是物理属性！最后，本文到此结束，希望对大家有所帮助:)有什么问题或者建议可以多多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考文章【bidi（双向文本）和RTL布局总结】（https://www.cnblogs.com/dojo-lzz/p/4289423.html》bidi（双向文本）bidi（双向文本）andRTLlayoutsummary")SummaryoflayoutwithRTL")Changethewriting-modepropertyoftheverticalandhorizo??ntalrulesoftheCSSworld[10]CSSLogicalPropertiesandValuesLevel1[11]GraphicalCSS:CSSLogicalProperties[12]CSSLogicalPropertiesAretheFutureoftheWeb&I18N[13]References[1]UNICODEBIDIRECTIONALALGORITHM:https://unicode.org/reports/tr9/[2]CodePenDemo--按writing-mode显示诗歌:https://codepen.io/Chokcoco/pen/ExmmbeY[3]CodePenDemo--writing-modeLayoutDemo:https://codepen.io/Chokcoco/pen/OJmmJmj[4]CodePenDemo--CSSEllipsisBeginningofString:https://codepen.io/Chokcoco/pen/BaWBELx[5]改变CSS世界纵横规则的writing-mode属性:https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/[6]CSSLogicalPropertiesandValuesLevel1:https://drafts.c??sswg.org/css-logical/[7]CodePenDemo——物理方向和逻辑方向展示：https://codepen.io/Chokcoco/pen/BaRRmgx[8]MDN——CSS逻辑属性和值：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties[9]CodePenDemo--物理方向和逻辑方向重叠DEMO展示：https://codepen.io/Chokcoco/pen/dyWReQV[10]改变CSS垂直和水平规则的writing-mode属性world：https://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/[11]CSSLogicalPropertiesandValuesLevel1：https://drafts.c??sswg.org/css-logical/[12]IllustratedCSS:CSSLogicProperties:https://www.w3cplus.com/css/css-logical-properties.html[13]CSSLogicalPropertiesAretheFutureoftheWeb&I18N:https://dev.to/yuschick/css-logical-properties-are-the-future-of-the-web-i18n-11i1