注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS direction属性简介【转】  

2016-05-17 14:48:03|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、用的少并不代表没有用

至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的。

为什么呢?是因为direction长得丑吗?

虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界。

那是因为兼容性吗?

那更不是了,在那个“美女”确实是美女的年代,包括IE6在内的浏览器,CSS direction就已经被支持。

ChromeSafariFirefoxOperaIEAndroidiOS
2.0+1.3+Any9.2+5.5+Any3.1+

那究竟是什么原因呢?

原因就在于我这篇文章写得太晚了!

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

二、CSS direction简介

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

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>

结果,张妹子跑到了最右边,而不是左边,同时,貌似右对齐容器了,如下截图:
DOM顺序和展示的左右先后

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

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

结果,还是span1在左边,span2在右边:
内联文字左右顺序不变

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

那什么是“内联元素块”呢?包括替换元素(replaced element),如<img><button><input><video><object>等,或者inline-block水平的元素。因此,上面span1, span2的例子,只有任意一个span设置display:inline-block,都会看到左右顺序的变化。

  评论这张
 
阅读(17)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017