在此页

• 参考
• 指南
• 规范
• 浏览器兼容性
• 相关话题

CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.

The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.

Block vs. inline

Logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode .

Block dimension

The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.

Inline dimension

The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.

参考

Properties for sizing

• block-size
• inline-size
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size

Properties for margins, borders and padding

• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-color ( logical keyword)
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• border-style ( logical keyword)
• border-width ( logical keyword)
• margin ( logical keyword)
• margin-block
• margin-block-end
• margin-block-start
• margin-inline
• margin-inline-end
• margin-inline-start
• padding ( logical keyword)
• padding-block
• padding-block-end
• padding-block-start
• padding-inline
• padding-inline-end
• padding-inline-start

Properties for floating and positioning

• clear ( inline-end and inline-start keywords)
• float ( inline-end and inline-start keywords)
• inset
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start

其它特性

• caption-side ( inline-end and inline-start keywords)
• overflow-block
• overflow-inline
• overscroll-behavior-block
• overscroll-behavior-inline
• resize ( block and inline keywords)
• text-align ( end and start keywords)

弃用特性

• offset-block-end (now inset-block-end )
• offset-block-start (now inset-block-start )
• offset-inline-end (now inset-inline-end )
• offset-inline-start (now inset-inline-start )

指南

• Basic concepts of logical properties and values
• Logical Properties for sizing
• Logical Properties for margins, borders and padding
• Logical Properties for floating and positioning

规范

规范	状态	注释
CSS Logical Properties and Values Level 1	编者草案	初始定义。

浏览器兼容性

In general:

• Firefox has support for the mapped properties — where there is a direct mapping from the physical to the logical version.
• Chrome, from version 69, has support for the mapped properties.
• Edge, from version 79, has the same support as Chrome.
• Firefox 66 introduces support for two value shorthands, also behind a flag in Chrome.
• Internet Explorer has no support.

See the individual property pages for full compatibility information.

元数据

• 最后修改： Aug 5, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Logical Properties
4. 指南

   1. Basic concepts of Logical Properties and Values
   2. Logical properties for floating and positioning
   3. Logical properties for margins, borders and padding
   4. Logical properties for sizing
5. 特性

   1. block-size
   2. border-block
   3. border-block-color
   4. border-block-end
   5. border-block-end-color
   6. border-block-end-style
   7. border-block-end-width
   8. border-block-start
   9. border-block-start-color
   10. border-block-start-style
   11. border-block-start-width
   12. border-block-style
   13. border-block-width
   14. border-end-end-radius
   15. border-end-start-radius
   16. border-inline
   17. border-inline-color
   18. border-inline-end
   19. border-inline-end-color
   20. border-inline-end-style
   21. border-inline-end-width
   22. border-inline-start
   23. border-inline-start-color
   24. border-inline-start-style
   25. border-inline-start-width
   26. border-inline-style
   27. border-inline-width
   28. border-start-end-radius
   29. border-start-start-radius
   30. inline-size
   31. inset
   32. inset-block
   33. inset-block-end
   34. inset-block-start
   35. inset-inline
   36. inset-inline-end
   37. inset-inline-start
   38. margin-block
   39. margin-block-end
   40. margin-block-start
   41. margin-inline
   42. margin-inline-end
   43. margin-inline-start
   44. max-block-size
   45. max-inline-size
   46. min-block-size
   47. min-inline-size
   48. padding-block
   49. padding-block-end
   50. padding-block-start
   51. padding-inline
   52. padding-inline-end
   53. padding-inline-start