摘要:基本上,大家只要關(guān)心下面這兩個(gè)屬性值就好了默認(rèn)值標(biāo)點(diǎn)符號(hào)也是反的,適用于阿拉伯文字和古漢語(yǔ)等其中,是初始值,表示,就是從左往右的意思,則是另外一個(gè)值,縮寫,就是從右往左的意思。
direction介紹 屬性值和兼容都很好
CSSdirection屬性簡(jiǎn)單好記,屬性值少,兼容性好,關(guān)鍵時(shí)候省心省力,是時(shí)候給大家宣傳宣傳,不要埋沒(méi)了人家的特殊技能。
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|
2.0+ | 1.3+ | Any | 9.2+ | 5.5+ | Any | 3.1+ |
---|
從表中可以看出android和ios的很早版本就在支持direction屬性了。基本上,大家只要關(guān)心下面這兩個(gè)屬性值就好了:
direction: ltr; // 默認(rèn)值 direction: rtl;//標(biāo)點(diǎn)符號(hào)也是反的,適用于阿拉伯文字和古漢語(yǔ)等
其中,ltr是初始值,表示left-to-right,就是從左往右的意思,
rtl則是另外一個(gè)值,right-to-left縮寫,就是從右往左的意思。
默認(rèn)時(shí)的圖片是從左往右依次排布的;就是direction: ltr; // 默認(rèn)值
那通過(guò)direction: rtl; 就可以改變內(nèi)聯(lián)塊元素的順序:從右向左依次排布:
看吧,很神奇對(duì)不對(duì),代碼里并沒(méi)有改變書(shū)寫順序;只需要加上{text-align:left;direction:rtl;}就讓文檔流的渲染改變了方向;
那什么是“內(nèi)聯(lián)塊元素”呢?包括替換元素(replaced element),如,,,,等,或者inline-block的元素。因此,只有任意元素設(shè)置display:inline-block,都會(huì)看到左右順序的變化。
在做彈窗的時(shí)候;一般都有確定和取消button;有的是左‘取消‘右‘確認(rèn)‘,有的是左‘確認(rèn)’右’取消’。如果 在同一個(gè)項(xiàng)目中需要2種情況都存在的時(shí)候呢?
第一種;可以用flex布局,但flex布局在安卓低版本webview下有兼容問(wèn)題;
第二種就是用direction:rtl;屬性了;
確定取消
writing-mode介紹確定取消
先來(lái)看看writing-mode都有哪些屬性值:
writing-mode: horizontal-tb; //默認(rèn)值 水平從左到右滿橫行后折行; writing-mode: vertical-rl; //垂直從上到下書(shū)寫滿豎行后折行(從右邊開(kāi)始書(shū)寫)古代漢語(yǔ)的順序 writing-mode: vertical-lr; //垂直從上到下書(shū)寫滿豎行后折行(從左邊開(kāi)始書(shū)寫)
和direction相似writing-mode也是改變文檔流的順序滴,在caniuser網(wǎng)站顯示的兼容性基本所有現(xiàn)代瀏覽器都支持此屬性。
中國(guó)古詩(shī)詞writing-mode屬性本來(lái)就是為了解決像中國(guó)古漢語(yǔ)這樣的排版順序的;像
別的地方能用嗎楓橋夜泊
月落烏啼霜滿天,
江楓漁火對(duì)愁眠。
姑蘇城外寒山寺。
夜半鐘聲到客船。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/112878.html
摘要:基本上,大家只要關(guān)心下面這兩個(gè)屬性值就好了默認(rèn)值標(biāo)點(diǎn)符號(hào)也是反的,適用于阿拉伯文字和古漢語(yǔ)等其中,是初始值,表示,就是從左往右的意思,則是另外一個(gè)值,縮寫,就是從右往左的意思。 direction介紹 屬性值和兼容都很好 CSSdirection屬性簡(jiǎn)單好記,屬性值少,兼容性好,關(guān)鍵時(shí)候省心省力,是時(shí)候給大家宣傳宣傳,不要埋沒(méi)了人家的特殊技能。 Chrome Safari Firef...
摘要:本篇?jiǎng)t會(huì)分享的邏輯屬性以及盒子模型。的邏輯屬性年月日,的工作組發(fā)布了邏輯屬性和值的首份工作草案。那么按著這個(gè)規(guī)則去修改文本屬性時(shí),就會(huì)出現(xiàn)上述這種不符合語(yǔ)法規(guī)則的狀態(tài)。大概也是基于這個(gè)原因,所以發(fā)布了新的邏輯屬性與值。因此稱為匿名盒子。 作者:陳大魚(yú)頭 github: KRISACHAN 在上一篇【Hello CSS】的第一章CSS的語(yǔ)法與工作流中介紹了CSS的語(yǔ)法規(guī)則以及基本的...
摘要:注意會(huì)生成新的,因此不會(huì)出現(xiàn)效果。圖中藍(lán)色線框,位于內(nèi),作為間的分隔線。不可否認(rèn)求學(xué)之路的艱辛苦悶。如此的努力,為了僅僅是能在大學(xué)逍遙快活一番這動(dòng)機(jī)實(shí)在讓人心寒,也正因如此造就了大學(xué)生的墮落。人類文明進(jìn)步最有力的證明。 前言 ?是否記得《讀者文摘》中那一篇篇優(yōu)美感人的文章呢?那除了文章內(nèi)容外,還記得那報(bào)刊、雜志獨(dú)有的多欄布局嗎??當(dāng)我們希望將報(bào)刊、雜志中的閱讀體驗(yàn)遷移到網(wǎng)頁(yè)上時(shí),最簡(jiǎn)單...
摘要:引言一帶一路正在積極推動(dòng)中國(guó)的國(guó)際化進(jìn)程,前端網(wǎng)站也面臨著前所未有的國(guó)際化挑戰(zhàn)。本周精讀的文章是,通過(guò)一種新的技術(shù),實(shí)現(xiàn)國(guó)際化布局。討論地址是精讀國(guó)際化布局如果你想?yún)⑴c討論,請(qǐng)點(diǎn)擊這里,每周都有新的主題,周末或周一發(fā)布。 1 引言 一帶一路 正在積極推動(dòng)中國(guó)的國(guó)際化進(jìn)程,前端網(wǎng)站也面臨著前所未有的國(guó)際化挑戰(zhàn)。那么怎么才能積極響應(yīng) 一帶一路 戰(zhàn)略,推動(dòng)網(wǎng)站的國(guó)際化工作呢?可以先從國(guó)際化布...
摘要:引言一帶一路正在積極推動(dòng)中國(guó)的國(guó)際化進(jìn)程,前端網(wǎng)站也面臨著前所未有的國(guó)際化挑戰(zhàn)。本周精讀的文章是,通過(guò)一種新的技術(shù),實(shí)現(xiàn)國(guó)際化布局。討論地址是精讀國(guó)際化布局如果你想?yún)⑴c討論,請(qǐng)點(diǎn)擊這里,每周都有新的主題,周末或周一發(fā)布。 1 引言 一帶一路 正在積極推動(dòng)中國(guó)的國(guó)際化進(jìn)程,前端網(wǎng)站也面臨著前所未有的國(guó)際化挑戰(zhàn)。那么怎么才能積極響應(yīng) 一帶一路 戰(zhàn)略,推動(dòng)網(wǎng)站的國(guó)際化工作呢?可以先從國(guó)際化布...
閱讀 3319·2023-04-25 14:35
閱讀 3430·2021-11-15 18:00
閱讀 2594·2021-11-12 10:34
閱讀 2512·2021-11-11 16:54
閱讀 3491·2021-10-08 10:12
閱讀 2775·2021-09-06 15:02
閱讀 3334·2021-09-04 16:48
閱讀 2810·2019-08-29 14:02