在此页

• Mapped properties and values
• Float and clear example
• Example: Inset properties for positioned layout
• New two- and four-value shorthands
• Example: Logical values for text-align
• 相关话题

Logical Properties and Values specification contains logical mappings for the physical values of float and clear , and also for the positioning properties used with positioned layout . This guide takes a look at how to use these.

Mapped properties and values

The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal writing-mode , with a left-to-right direction.

Logical property or value	Physical property or value
float : inline-start	float : left
float : inline-end	float : right
clear : inline-start	clear : left
clear : inline-end	clear : right
inset-inline-start	left
inset-inline-end	right
inset-block-start	top
inset-block-end	bottom
text-align : start	text-align : left
text-align : end	text-align : right

In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the inset 特性。

Logical property	目的
inset-inline	Sets both of the above inset values for the inline dimension simultaneously.
inset-block	Sets both of the above inset values for the block dimension simultaneously.
inset	Sets all four inset values simultaneously with physical mapping of multi-value.

Float and clear example

The physical values used with the float and clear properties are left , right and both . The Logical Properties specification defines the values inline-start and inline-end as mappings for left and right .

In the example below I have two boxes — the first has the box floated with float: left , the second with float: inline-start . If you change the writing-mode to vertical-rl 或 direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start -floated item follows the direction and writing-mode .

Example: Inset properties for positioned layout

Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties top , right , bottom and left .

These properties take a length or a percentage as a value, and relate to the user's screen dimensions.

New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: inset-block-start , inset-block-end , inset-inline-start and inset-inline-end .

In the below example I have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position: relative . Change the writing-mode property to vertical-rl , or add direction: rtl , and see how the flow relative box stays with the text direction.

New two- and four-value shorthands

As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once.

• inset — sets all four sides together with physical mapping.
• inset-inline — sets both logical inline insets.
• inset-block — sets both logical block insets.

注意 : The browsers that have implemented the Logical Properties specification have so far implemented the direct mappings and not the new shorthands. Look to the browser compatibility data section on each property page reference for more details.

Example: Logical values for text-align

text-align property has logical values that relate to text direction — rather than using left and right we can use start and end . In the below example I have set text-align: right in the first block and text-align: end in the second.

If you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.

This works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment.

元数据

• 最后修改： Jul 25, 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