CSS进阶(二十四)流向的改变

direction

direction: ltr; // 默认值
direction: rtl; //right to left

direction可以改变替换元素或者 inline-block/ inline-table 元素的水平呈现顺序

应用

(1)相同元素不同设备下的展示顺序

(2)...隐藏字符变成隐藏开头

在不支持 text-align:start/end 的浏览器中(如 IE),direction会改变text-align的默认值,默认是left.采用direction: rtl;变成right

unicode-bidi

unicode-bidi: normal; // 默认值,正常排列
unicode-bidi: embed;//只能作用在内联元素上,字符排序独立内嵌,不受外部影响
unicode-bidi: bidi-override; //“重写双向排序规则”

writing-mode

CSS3 规范属性

IE 私有属性语法

 writing-mode: lr-tb | tb-rl | tb-lr (IE8+);

CSS3 规范

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

应用

(1)使用margin:auto或text-algin实现垂直居中效果

(2)实现点击按钮单个文字下沉效果

原文地址:https://www.cnblogs.com/goOtter/p/9825871.html