资讯专栏INFORMATION COLUMN

direction和writing-mode的介绍

Kosmos / 1758人阅读

摘要:基本上,大家只要关心下面这两个属性值就好了默认值标点符号也是反的,适用于阿拉伯文字和古汉语等其中,是初始值,表示,就是从左往右的意思,则是另外一个值,缩写,就是从右往左的意思。

direction介绍 属性值和兼容都很好

CSSdirection属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Any 9.2+ 5.5+ Any 3.1+

从表中可以看出android和ios的很早版本就在支持direction属性了。基本上,大家只要关心下面这两个属性值就好了:

direction: ltr;   // 默认值
direction: rtl;//标点符号也是反的,适用于阿拉伯文字和古汉语等

其中,ltr是初始值,表示left-to-right,就是从左往右的意思,
rtl则是另外一个值,right-to-left缩写,就是从右往左的意思。
默认时的图片是从左往右依次排布的;就是direction: ltr; // 默认值


那通过direction: rtl; 就可以改变内联块元素的顺序:从右向左依次排布:


看吧,很神奇对不对,代码里并没有改变书写顺序;只需要加上{text-align:left;direction:rtl;}就让文档流的渲染改变了方向;

direction只能改变内联块元素的顺序,对于内联元素和text-align是一样的

那什么是“内联块元素”呢?包括替换元素(replaced element),如,