direction和writing mode的介紹

2021-09-14 04:39:17 字數 1513 閱讀 3952

cssdirection屬性簡單好記,屬性值少,相容性好,關鍵時候省心省力,是時候給大家宣傳宣傳,不要埋沒了人家的特殊技能。

direction: ltr;   // 預設值

direction: rtl;//標點符號也是反的,適用於阿拉伯文本和古漢語等

其中,ltr是初始值,表示left-to-right,就是從左往右的意思,

rtl則是另外乙個值,right-to-left縮寫,就是從右往左的意思。

預設時的是從左往右依次排布的;就是direction: ltr; // 預設值

那通過direction: rtl; 就可以改變內聯塊元素的順序:從右向左依次排布:

看吧,很神奇對不對,**裡並沒有改變書寫順序;只需要加上就讓文件流的渲染改變了方向;

direction只能改變內聯塊元素的順序,對於內聯元素和text-align是一樣的

那什麼是「內聯塊元素」呢?包括替換元素(replaced element),如,,,,等,或者inline-block的元素。因此,只有任意元素設定display:inline-block,都會看到左右順序的變化。

在做彈窗的時候;一般都有確定和取消button;有的是左『取消『右『確認『,有的是左『確認』右』取消』。如果 在同乙個專案中需要2種情況都存在的時候呢?

第一種;可以用flex布局,但flex布局在安卓低版本webview下有相容問題;

第二種就是用direction:rtl;屬性了;

確定

取消

確定

取消

先來看看writing-mode都有哪些屬性值:

writing-mode: horizontal-tb;    //預設值 水平從左到右滿橫行後折行;

writing-mode: vertical-rl; //垂直從上到下書寫滿豎行後折行(從右邊開始書寫)古代漢語的順序

writing-mode: vertical-lr; //垂直從上到下書寫滿豎行後折行(從左邊開始書寫)

和direction相似writing-mode也是改變文件流的順序滴,在caniuser**顯示的相容性基本所有現代瀏覽器都支援此屬性。

中國古詩詞

writing-mode屬性本來就是為了解決像中國古漢語這樣的排版順序的;像

楓橋夜泊

月落烏啼霜滿天,

江楓漁火對愁眠。

姑蘇城外寒山寺。

夜半鐘聲到客船。

別的地方能用嗎

和 區別和聯絡, 和 區別和聯絡

和 區別和聯絡,和 區別和聯絡,實際專案中,什麼情況用哪種?首先,和 的聯絡 共同點 和 都可以用作 邏輯與 運算子,都是雙目運算子。具體要看使用時的具體條件來決定。無論使用哪種運算子,對最終的運算結果都沒有影響。情況1 當上述的運算元是boolean型別變數時,和 都可以用作邏輯與運算子。情況2 ...

rpx和樣式和class和flex

5 style 靜態的樣式統一寫到 class 中。style 接收動態的樣式,在執行時會進行解析,請盡量避免將靜態的樣式寫進 style 中,以免影響渲染速度。例 6 class 用於指定樣式規則,其屬性值是樣式規則中類選擇器名 樣式類名 的集合,樣式類名不需要帶上.樣式類名之間用空格分隔。關於f...

if和switch和for語句

if和switch很像。具體什麼場景下,應用那個語句呢?如果判斷的具體數值不多,而是符合byte,short,int,char,字串。這五種型別。雖然兩個語句都可以使用,建議使用switch語句,因為效率稍高。其他情況,對區間判斷,對結果為boolean型別判斷,使用if,if的使用範圍更廣。whi...