CSS direction属性简介与实际应用_html/css_WEB-ITnose

一、用的少并不代表没有用

至少，在我接触的这么多项目里，没有见到使用过CSS direction属性做实际开发的。

为什么呢？是因为 direction 长得丑吗？

虽然说 direction 确实其貌不扬，但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗？

那更不是了，在那个“美女”确实是美女的年代，包括IE6在内的浏览器，CSS direction 就已经被支持。

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

那究竟是什么原因呢？

原因就在于我这篇文章写得太晚了！

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

二、CSS direction简介

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

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

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

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

例如mm1是张含韵，DOM结构如下：

<p class="rtl"><img  src="/static/imghw/default1.png"  data-src="mm1.jpg"  class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" > <img  src="/static/imghw/default1.png"  data-src="mm2.jpg"  class="lazy" alt="CSS direction属性简介与实际应用_html/css_WEB-ITnose" ></p>

结果，张妹子跑到了最右边，而不是左边，同时，貌似右对齐容器了，如下截图：

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

需要注意的是，当 direction 属性的值是 rtl 的时候，我们的文字的前后顺序是不变了，例如：

<p class="rtl"><span>span1</span> <span>span2</span></p>

结果，还是span1在左边，span2在右边：

因为改变的只是 内联元素块 的左右顺序，所有的文字，即使使用内联标签分隔，实际上，还是一个同质内联盒子，是当作一个整体处理的，因此，只有近似右对齐效果，而具体每个文字都没有左右顺序的变化。

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