css direction屬性的使用與定義的詳解

CSS direction屬性簡單好記，屬性值少，相容性好，關鍵時候省心省力，是時候給大家宣傳宣傳，不要埋沒了人家的特殊技能。

語法： 

direction : ltr | rtl | inherit

參數： 
ltr : 　文字流從左到右
rtl : 　文字流從右到左
inherit : 　文字流的數值無法繼承 
 
說明： 
用於設定文字流的方向。
假如您想套用direction屬性於內聯文本，您必須設定unicode-bidi屬性為embed或bidi-override。 
對應的腳本特性為direction。請參閱我所寫的其他書目。

範例： 

div { direction: rtl; unicode-bidi: bidi-override; }

基本上，大家只要關心下面這兩個屬性值就好了：

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屬性的使用與定義的詳解" > <img  src="/static/imghw/default1.png"  data-src="mm2.jpg"  class="lazy"   alt="css direction屬性的使用與定義的詳解" ></p>

結果，張妹子跑到了最右邊，而不是左邊，同時，貌似右對齊容器了，如下截圖：

改變的只是內聯元素塊的左右順序
需要注意的是，當direction屬性的值是rtl的時候，我們的文字的前後順序是不變了，例如：

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

結果，還是span1在左邊，span2在右邊：

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

以上是css direction屬性的使用與定義的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！