css中会影响DOM读取文档流的顺序的属性

CSS属性种可以影响DOM读取文档流的顺序主要有3个属性：

其中direction，unicode-bidi属于近亲，经常在一起使用，也是唯一不受CSSc all属性影响的CSS属性，基本上就是和内联元素一起使用的。

writing-mode似乎包含了direction，unicode-bidi某些功能和行为，例如vertical-rl的rl和direction的rtl值有相似之处，都是从右往左。然而，实际上，两者是没有jiao'ji　

css的奇妙就在于：某些特性当初可能就是为了某些图文排版设计，但是，我们可以利用其带来的特性，发挥自己的创造力，实现其他很多意想不到的效果。所以，以上的三个属性都是非常好的资源

1.writing-mode

css3中ie goole firefox都支持，所以在使用的时候需要记住两套不同的语法：ie的私有属性和css3的规范属性，**如果只需要兼容到ie8+**，可以只使用css3的规范属性。因为vertical-rl此时的文档流为垂直方向，rl表示水平方向，此时再设direction-rtl，实际上值rtl改变的是垂直方向的内联元素的文本方向，一纵一横，没有交集，而且writing-mode可以对块状元素产生影响，直接改变了CSS世界的纵横规则，要比direction强大和鬼畜的多。

writing-mode的css3规范属性：

　　writing-mode：horizontal-tb；//默认值  ：水平方向，从上倒下

　　writing-mode：vertical-rl ； //垂直方向，从右向左

　　writing-mode ： vertical-lr； //垂直方向，从左向右

　　writing-mode的ie私有属性：

　　writing-mode：lr-tb； // 默认值 ： 从左到右，从上到下。

　　writing-mode：tb-rl； //从上到下，从右向左。

　　writing-mode：tb-lr（IE8+）； //水平方向，从上到下，从左到右。

**如果需要兼容IE7，关注初始值：lr-tb和tb-rl，对css3规范中的horizontal-tbhebertical-rl。**

2.unicode-bidi 设置文本的方向, 属性值如下：

normal: 元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。

embed: 如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。这个嵌套层的方向由 direction 属性指定。会在元素内部隐式地完成顺序重排。这对应于在元素开始处增加一个 LRE（对于 direction:ltr ：U+202A）或 RLE（对于 direction:rtl ：U+202B），并在元素的最后增加一个 PDF（U+202C）。

bidi-override： 这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。这说明，顺序重排在元素内部严格按照 direction 属性进行；忽略了双向算法的隐式部分。这对应于在元素开始处增加一个 LRO（对于 direction:ltr ：U+202D）或 RLO（对于 direction:rtl ：U+202E），并在元素最后增加一个 PDF（U+202C）。

3.direction 指定文本方向/书写方向以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。

ltr： 默认方向，从左到右

rtl： 从右到左

inherit： 继承自父级的direction