Rumah > hujung hadapan web > tutorial css > css direction属性的使用与定义的详解

css direction属性的使用与定义的详解

黄舟
Lepaskan: 2017-06-20 09:56:32
asal
2451 orang telah melayarinya

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

语法: 

direction : ltr | rtl | inherit
Salin selepas log masuk

参数:
ltr :  文本流从左到右
rtl :  文本流从右到左
inherit :  文本流的值不可继承

说明:
用于设置文本流的方向。
假如您想应用direction属性于内联文本,您必须设定unicode-bidi属性为embed或bidi-override。
对应的脚本特性为direction。请参阅我编写的其他书目。

示例:

div { direction: rtl; unicode-bidi: bidi-override; }
Salin selepas log masuk

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

direction: ltr;   // 默认值direction: rtl;
Salin selepas log masuk

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

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

例如mm1是张含韵,DOM结构如下:

<p class="rtl"><img src="mm1.jpg"> <img src="mm2.jpg"></p>
Salin selepas log masuk

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

1517.jpg

改变的只是内联元素块的左右顺序
需要注意的是,当direction属性的值是rtl的时候,我们的文字的前后顺序是不变了,例如:

<p class="rtl"><span>span1</span> <span>span2</span></p>
Salin selepas log masuk

结果,还是span1在左边,span2在右边:

1518.png

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


Atas ialah kandungan terperinci css direction属性的使用与定义的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan