&nbs p;
一、用的少并不代表没有用
至少，在我接触的这么多项目里，没有见到使用过 CSS direction属性做实际开发的。
为什么呢？是因为 direction 长得丑吗？
虽然说 direction 确实其貌不扬，但是CSS并不是一个看脸卖萌的世界。
那是因为兼容性吗？
那更不是了，在那个“美女”确实是美女的年代，包括IE6在内的浏览器，CSS direction 就已经被支持。
| 2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
那究竟 是什么 原因 呢？
原因就在于我这篇 文章 写得太晚了！
CSS direction 属性 简单 好记，属性值少，兼容性好，关键时候省心省力，是时候给大家 宣传 宣传，不要埋没了人家的特殊技能。
二、CSS direction简介
基本上，大家只要关心下面这两个属性值就好了：
direction: ltr ; // 默认值 direction: rtl ;
其中， ltr 是初始值，表示left -t o-right，就是从左往右的 意思 ，再具体描述下，就是内联内容是从左往右依次排布的，我们平时网页的处理都是这样的，比方说前后两个图片，默认情况下， DOM 在前的就显示在左边。
rtl 则是另外一个值，right-to-left缩写，就是从右往左的意思，再具体描述下，就是内联内容是从右往左依次排布的，加入应用了这个CSS声明，则前后两个图片，默认情况下，DOM在前的就显示在右侧；而且是在容器的右端。
例如mm1是吴板泉，DOM结构如下：
<p class="rtl">< img src="mm1. jpg "> <img src="mm2.jpg"></p>
结果，吴妹子跑到了最 右边 ，而不是左边，同时，貌似右对齐容器了，如下截图：
改变 的只是内联元素块的左右顺序
需要注意的是，当 direction 属性的值是 rtl 的时候，我们的文字的前后顺序是不变了，例如：
<p class="rtl"><span>spa n1 </span> <span>span2</span></p>
结果，还是 span1 在左边， span2 在右边：
因为改变的只是 内联元素块 的左右顺序，所有的文字，即使使用内联标签分隔，实际上，还是一个同质内联 盒子 ，是当作一个整体处理的，因此，只有近似右对齐效果，而具体每个文字都没有左右顺序的变化。
那什么是“内联元素块”呢？包括替换元素(replaced element)，如 <img> , <button> , <input> , <video> , <object> 等， 或者 inline-block 水平的元素。因此，上面span1, span2的例子，只有任意一个 span 设置 dis play :inline-block ，都会看到左右顺序的变化。
您可以狠狠地点击这里：CSS direction属性与左右顺序测试demo
在IE浏览器下(至少IE11)，设置 direction:rtl 会改变容器默认的 text-align 值，因为IE11在内的浏览器（IE11以上版本我尚未测试）都不支持 text-align:start/end 等CSS3属性值，而C hr ome和FireFox浏览器均不会修改 text-align 值，因为这些浏览器的 text-align 初始值是 start ，这里大家也 应该 或多或少感受到了 text-align:start/end 这个新声明的作用和意义了——当 direction 值为 ltr 的时候， start 就表示 left ，当 direction 值为 rtl 的时候， start 就表示 right 。
如果希望改变纯内联内容的顺序，需要配合 unicode-bidi 属性。
三、CSS direction实际应用
CSS direction 可以让我们不改变DOM前后顺序的情况下，调换元素的前后顺序，在有些场景下非常有用。
下面是我真实遇到的例子：
基本上，做PC页面项目里都有一个Panel或者Dia LOG 组件，就是弹框什么的。其中，下面会有“确定”，“取消”按钮，如下截图：
然后，具体很奇怪的，有几个Dialog，设计希望这两个按钮顺序是相反的。
如果只是上图的需求，想要改变按钮前后顺序变换其实只要使用浮动就可以了，所有按钮都 float:right ：
.button { float: right; } 这个不难。但是，假如说我们的弹框按钮是居中显示的，例如，科科：
别说浮动了，飞动都满足不了需求，是不是又要求助万能的JS了，去改变DOM顺序？
别傻了，一行CSS direction:rtl 十几个字母，包你省心到家。我敢打包票，这一定是性价比最高的方法！
您可以狠狠地点击这里：CSS direction控制居中按钮顺序改变demo
当然，我们还有其他解决思路， 不过 兼容性嘛，咳咳~
.cont ai ner, .button { transform: scaleX(-1); } 就是父级容器和按钮同时水平翻转，IE7,IE8倒是可以使用IE的翻转滤镜试试，好像是 flipX ，我以前有写过文章：“CSS垂直翻转/水平翻转 提高 web页面资 源 重用性”，还好看了下， 原来 是 flipH ，完整写法：
filter: FlipH;
不过，滤镜内再滤镜 是否 支持，我就不确定了，而且我也没兴趣对这些占着茅坑不拉屎的浏览器做测试，大家有兴趣可以自己试试看。
补充于2018-10-25
direction 可以让单行文本溢出点点点表示时候的 三个点 在前面显示，具体实现在我的书《CSS世界》中有详细介绍。
四、结束语
实际上 direction 属性关心的少，是因为……我想了想，还是因为大家没今早看到想本文这样分析介绍 direction 的文章，会让很多小伙伴，即使 眼睛 瞟到了，也认为是那个嘎吱角落的上世纪淘汰的CSS属性，实际上，人才被埋没了。
CSS direction 还有一个近亲 wr IT ing-mode ，可比 direction 复杂的多，也有意思的多，争取月底前也给大家介绍下。
以上，欢迎交流！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS direction属性简介与实际应用 全部内容，希望文章能够帮你解决 html5教程-CSS direction属性简介与实际应用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS direction属性简介与实际应用的详细内容...