摘要:基本上,大家只要關心下面這兩個屬性值就好了默認值標點符號也是反的,適用于阿拉伯文字和古漢語等其中,是初始值,表示,就是從左往右的意思,則是另外一個值,縮寫,就是從右往左的意思。
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屬性本來就是為了解決像中國古漢語這樣的排版順序的;像
別的地方能用嗎楓橋夜泊
月落烏啼霜滿天,
江楓漁火對愁眠。
姑蘇城外寒山寺。
夜半鐘聲到客船。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112878.html
摘要:基本上,大家只要關心下面這兩個屬性值就好了默認值標點符號也是反的,適用于阿拉伯文字和古漢語等其中,是初始值,表示,就是從左往右的意思,則是另外一個值,縮寫,就是從右往左的意思。 direction介紹 屬性值和兼容都很好 CSSdirection屬性簡單好記,屬性值少,兼容性好,關鍵時候省心省力,是時候給大家宣傳宣傳,不要埋沒了人家的特殊技能。 Chrome Safari Firef...
摘要:本篇則會分享的邏輯屬性以及盒子模型。的邏輯屬性年月日,的工作組發布了邏輯屬性和值的首份工作草案。那么按著這個規則去修改文本屬性時,就會出現上述這種不符合語法規則的狀態。大概也是基于這個原因,所以發布了新的邏輯屬性與值。因此稱為匿名盒子。 作者:陳大魚頭 github: KRISACHAN 在上一篇【Hello CSS】的第一章CSS的語法與工作流中介紹了CSS的語法規則以及基本的...
摘要:注意會生成新的,因此不會出現效果。圖中藍色線框,位于內,作為間的分隔線。不可否認求學之路的艱辛苦悶。如此的努力,為了僅僅是能在大學逍遙快活一番這動機實在讓人心寒,也正因如此造就了大學生的墮落。人類文明進步最有力的證明。 前言 ?是否記得《讀者文摘》中那一篇篇優美感人的文章呢?那除了文章內容外,還記得那報刊、雜志獨有的多欄布局嗎??當我們希望將報刊、雜志中的閱讀體驗遷移到網頁上時,最簡單...
摘要:引言一帶一路正在積極推動中國的國際化進程,前端網站也面臨著前所未有的國際化挑戰。本周精讀的文章是,通過一種新的技術,實現國際化布局。討論地址是精讀國際化布局如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。 1 引言 一帶一路 正在積極推動中國的國際化進程,前端網站也面臨著前所未有的國際化挑戰。那么怎么才能積極響應 一帶一路 戰略,推動網站的國際化工作呢?可以先從國際化布...
摘要:引言一帶一路正在積極推動中國的國際化進程,前端網站也面臨著前所未有的國際化挑戰。本周精讀的文章是,通過一種新的技術,實現國際化布局。討論地址是精讀國際化布局如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。 1 引言 一帶一路 正在積極推動中國的國際化進程,前端網站也面臨著前所未有的國際化挑戰。那么怎么才能積極響應 一帶一路 戰略,推動網站的國際化工作呢?可以先從國際化布...
閱讀 3263·2023-04-25 14:35
閱讀 3417·2021-11-15 18:00
閱讀 2535·2021-11-12 10:34
閱讀 2481·2021-11-11 16:54
閱讀 3463·2021-10-08 10:12
閱讀 2761·2021-09-06 15:02
閱讀 3318·2021-09-04 16:48
閱讀 2799·2019-08-29 14:02