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)，如a1f02c36ba31691bcfe87b2722de723b, bb9345e55eb71822850ff156dfde57c8, d5fd7aea971a85678ba271703566ebfd, 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95等，或inline-block水平的元素。因此，上面span1, span2的例子，只有任一span設定display:inline-block，都會看到左右順序的變化。

以上是CSS中關於direction所使用的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！