CSS 逻辑属性与值
CSS 逻辑属性与值是 CSS 的一个模块,其引入的属性与值能做从逻辑角度控制布局,而不是从物理、方向或维度来控制。
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 与 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.
参考
大小属性
外边距、边框与内边距属性
border-block
border-block-color
(en-US)border-block-end
border-block-end-color
(en-US)border-block-end-style
(en-US)border-block-end-width
(en-US)border-block-start
(en-US)border-block-start-color
(en-US)border-block-start-style
(en-US)border-block-start-width
(en-US)border-block-style
(en-US)border-block-width
(en-US)border-color
(logical
实验性 keyword)border-inline
(en-US)border-inline-color
border-inline-end
(en-US)border-inline-end-color
(en-US)border-inline-end-style
(en-US)border-inline-end-width
(en-US)border-inline-start
(en-US)border-inline-start-color
(en-US)border-inline-start-style
(en-US)border-inline-start-width
(en-US)border-inline-style
(en-US)border-inline-width
(en-US)border-start-start-radius
(en-US)border-start-end-radius
(en-US)border-end-start-radius
(en-US)border-end-end-radius
(en-US)border-style
(logical
实验性 keyword)border-width
(logical
实验性 keyword)margin
(logical
实验性 keyword)margin-block
margin-block-end
(en-US)margin-block-start
margin-inline
(en-US)margin-inline-end
(en-US)margin-inline-start
(en-US)padding
(logical
实验性 keyword)padding-block
(en-US)padding-block-end
(en-US)padding-block-start
(en-US)padding-inline
(en-US)padding-inline-end
(en-US)padding-inline-start
浮动与定位属性
clear
(inline-end
andinline-start
keywords)float
(inline-end
andinline-start
keywords)inset
(en-US)inset-block
(en-US)inset-block-end
(en-US)inset-block-start
(en-US)inset-inline
(en-US)inset-inline-end
(en-US)inset-inline-start
(en-US)
其他属性
caption-side
(inline-end
andinline-start
keywords)overflow-block
overflow-inline
(en-US)overscroll-behavior-block
(en-US)overscroll-behavior-inline
(en-US)resize
(block
andinline
keywords)text-align
(end
andstart
keywords)
已弃用属性
offset-block-end
(en-US) 非标准 已弃用 (nowinset-block-end
(en-US) 实验性 )offset-block-start
(en-US) 非标准 已弃用 (nowinset-block-start
(en-US) 实验性 )offset-inline-end
(en-US) 非标准 已弃用 (nowinset-inline-end
(en-US) 实验性 )offset-inline-start
(en-US) 非标准 已弃用 (nowinset-inline-start
(en-US) 实验性 )
指南
规范
Specification |
---|
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.