CSS中關於direction使用的詳解

一、

在平常的應用中很少關注CSS direction的使用，今天偶爾看到相關內容，才發現CSS direction使用起來很多時候很方便。

二、首先我們需要關注兩個重要的內容:

direction:ltr;//這個是預設值direction:rtl

ltr是初始值，表示left-to-right，就是從左往右的意思.rtl則是另外一個值，right-to-left縮寫，就是從右往左的意思。

<p class="rtl"><img src="1.png"/><img src ="2.png"/></p>

如果給p設定direction為trl屬性，則1.png就會在右側，2.png在左側。

需要注意的是如果是設定rtl屬性的時候文字的前後順序是不變的：

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

因為改變的只是內嵌元素塊的左右順序，所有的文字，即使使用內聯標籤分隔，實際上，還是一個同質內聯盒子，是當作一個整體處理的，因此，只有近似靠右對齊效果，而具體每個文字都沒有左右順序的變化。

那什麼是“內嵌元素塊”呢？包括替換元素(replaced element)，如<img>, <button>, <input>, <video>, <object>等，或者inline-block水平的元素。因此，上面span1, span2的例子，只有任意一個span設定display:inline-block，都會看到左右順序的變化。