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="mm1.jpg"> <img src="mm2.jpg"></p>
结果,张妹子跑到了最右边,而不是左边,同时,貌似右对齐容器了,如下截图:
改变的只是内联元素块的左右顺序
需要注意的是,当direction属性的值是rtl的时候,我们的文字的前后顺序是不变了,例如:
<p class="rtl"><span>span1</span> <span>span2</span></p>
结果,还是span1在左边,span2在右边:
因为改变的只是内联元素块的左右顺序,所有的文字,即使使用内联标签分隔,实际上,还是一个同质内联盒子,是当作一个整体处理的,因此,只有近似右对齐效果,而具体每个文字都没有左右顺序的变化。
以上就是css direction属性的使用与定义的详解的详细内容,更多请关注其它相关文章!
上一篇: mysql里join多个表的疑问。
下一篇: php str_split函数怎么用?