CSS的文本方向导致的宽高问题


css垂直布局的时候,宽高分别替换成了 inline-size 和 block-size.

inline-size 意味着 一行的长度(一排或一列的字的长度),in--line  size, 无论你是横排还是竖排,inline 就没有歧义了。

The margin-top property is mapped to margin-block-start — this will always refer to the margin at the start of the block dimension.

The padding-left property maps to padding-inline-start, the padding that is applied to the start of the inline direction.
This will be where sentences start in that writing mode. The border-bottom property maps to border-block-end, which is the border at the end of the block dimension.

一句话 原来是从左往右的, start=left,  end=right      inline-start  inline-end
一个区块 原来是从上往下的, start=top   end=bottom      block-start  block-end

例子:
width = inline-size
height = block-size

border-top   = border-block-start
border-right  = border-inline-end
border-bottom  = border-block-end
border-left   = border-inline-start


There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.
阅读量: 463
发布于:
修改于: