首頁 > web前端 > css教學 > CSS中關於direction所使用的詳解

CSS中關於direction所使用的詳解

黄舟
發布: 2017-07-27 14:30:20
原創
2791 人瀏覽過

一、

在平常的應用程式中很少關注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),如,