direction

基本上，大家只要关心下面这两个属性值就好了：

direction: ltr;   // 默认值
direction: rtl;

其中，ltr是初始值，表示left-to-right，就是从左往右的意思，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认情况下，DOM在前的就显示在左边。

rtl则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。

改变的只是内联元素块的左右顺序

如果是文字，即使有内联元素隔开，实质上他们还是一个同质内联盒子，所以文字的顺序不会改变，只有近似右对齐，左对齐效果，而具体每个文字都没有左右顺序的变化。

内联元素块：

包括替换元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的元素。

direction会影响text/align:start/end的参考值，如果浏览器不支持css3属性text-align：end/start属性，就不会影响

demo

css

 

.demo4 {
            direction: rtl;
            text-align: start;
        }

 

html

<div class="demo4">
    <span>span1</span>
    <span>span2</span>
</div>

添加样式

 .demo4 span{ display: inline-block;}

css direction 实际应用：

例如修改按钮的先后顺序，就可以设置button：display：inline-block; 设置button的父元素：direction：rtl