摘要:基本上,大家只要关心下面这两个属性值就好了默认值标点符号也是反的,适用于阿拉伯文字和古汉语等其中,是初始值,表示,就是从左往右的意思,则是另外一个值,缩写,就是从右往左的意思。
direction介绍 属性值和兼容都很好
CSSdirection属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|
2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
---|
从表中可以看出android和ios的很早版本就在支持direction属性了。基本上,大家只要关心下面这两个属性值就好了:
direction: ltr; // 默认值 direction: rtl;//标点符号也是反的,适用于阿拉伯文字和古汉语等
其中,ltr是初始值,表示left-to-right,就是从左往右的意思,
rtl则是另外一个值,right-to-left缩写,就是从右往左的意思。
默认时的图片是从左往右依次排布的;就是direction: ltr; // 默认值
那通过direction: rtl; 就可以改变内联块元素的顺序:从右向左依次排布:
看吧,很神奇对不对,代码里并没有改变书写顺序;只需要加上{text-align:left;direction:rtl;}就让文档流的渲染改变了方向;
那什么是“内联块元素”呢?包括替换元素(replaced element),如,,,,等,或者inline-block的元素。因此,只有任意元素设置display:inline-block,都会看到左右顺序的变化。
简单的一个domo在做弹窗的时候;一般都有确定和取消button;有的是左‘取消‘右‘确认‘,有的是左‘确认’右’取消’。如果 在同一个项目中需要2种情况都存在的时候呢?
第一种;可以用flex布局,但flex布局在安卓低版本webview下有兼容问题;
第二种就是用direction:rtl;属性了;
确定取消
writing-mode介绍确定取消
先来看看writing-mode都有哪些属性值:
writing-mode: horizontal-tb; //默认值 水平从左到右满横行后折行; writing-mode: vertical-rl; //垂直从上到下书写满竖行后折行(从右边开始书写)古代汉语的顺序 writing-mode: vertical-lr; //垂直从上到下书写满竖行后折行(从左边开始书写)
和direction相似writing-mode也是改变文档流的顺序滴,在caniuser网站显示的兼容性基本所有现代浏览器都支持此属性。
中国古诗词writing-mode属性本来就是为了解决像中国古汉语这样的排版顺序的;像
别的地方能用吗枫桥夜泊
月落乌啼霜满天,
江枫渔火对愁眠。
姑苏城外寒山寺。
夜半钟声到客船。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51586.html
摘要:基本上,大家只要关心下面这两个属性值就好了默认值标点符号也是反的,适用于阿拉伯文字和古汉语等其中,是初始值,表示,就是从左往右的意思,则是另外一个值,缩写,就是从右往左的意思。 direction介绍 属性值和兼容都很好 CSSdirection属性简单好记,属性值少,兼容性好,关键时候省心省力,是时候给大家宣传宣传,不要埋没了人家的特殊技能。 Chrome Safari Firef...
摘要:本篇则会分享的逻辑属性以及盒子模型。的逻辑属性年月日,的工作组发布了逻辑属性和值的首份工作草案。那么按着这个规则去修改文本属性时,就会出现上述这种不符合语法规则的状态。大概也是基于这个原因,所以发布了新的逻辑属性与值。因此称为匿名盒子。 作者:陈大鱼头 github: KRISACHAN 在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的...
摘要:注意会生成新的,因此不会出现效果。图中蓝色线框,位于内,作为间的分隔线。不可否认求学之路的艰辛苦闷。如此的努力,为了仅仅是能在大学逍遥快活一番这动机实在让人心寒,也正因如此造就了大学生的堕落。人类文明进步最有力的证明。 前言 是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗? 当我们希望将报刊、杂志中的阅读体验迁移到网页上时,最简单...
摘要:引言一带一路正在积极推动中国的国际化进程,前端网站也面临着前所未有的国际化挑战。本周精读的文章是,通过一种新的技术,实现国际化布局。讨论地址是精读国际化布局如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。 1 引言 一带一路 正在积极推动中国的国际化进程,前端网站也面临着前所未有的国际化挑战。那么怎么才能积极响应 一带一路 战略,推动网站的国际化工作呢?可以先从国际化布...
摘要:引言一带一路正在积极推动中国的国际化进程,前端网站也面临着前所未有的国际化挑战。本周精读的文章是,通过一种新的技术,实现国际化布局。讨论地址是精读国际化布局如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。 1 引言 一带一路 正在积极推动中国的国际化进程,前端网站也面临着前所未有的国际化挑战。那么怎么才能积极响应 一带一路 战略,推动网站的国际化工作呢?可以先从国际化布...
阅读 1140·2023-04-26 01:35
阅读 2497·2021-11-02 14:44
阅读 7521·2021-09-22 15:38
阅读 2189·2021-09-06 15:11
阅读 3631·2019-08-30 15:53
阅读 785·2019-08-29 16:54
阅读 616·2019-08-26 13:48
阅读 1720·2019-08-26 13:47