CSS世界中的方向和顺序
鍦–SS涓紝鎴戜滑缁忓父澶勭悊鍚勭鏂瑰悜銆傛瘮濡俶argin锛宲adding锛屽畠浠細鏈塵argin-left锛宮argin-right鎴栬€卲adding-left锛宲adding-right銆俻ositioning涓繕鏈塴eft銆乼op銆乺ight銆乥ottom锛屽垎鍒唬琛ㄤ笂銆佷笅銆佸乏銆佸彸鐨勪笉鍚屾柟浣嶃€傚彟涓€绉嶆儏鍐垫槸浠巟-position鍒皒-position锛屾瘮濡倃riting-mode,direction锛屼唬琛ㄤ竴涓簭鍒楋紝琛ㄧず鍧楁祦鐨勬柟鍚戯紝鎴栬€呮枃瀛椾功鍐欑殑鏂瑰悜绛夛紝杩欑瘒鏂囩珷灏卞厛鐪嬬湅orientation骞跺湪CSS涓栫晫涓帓搴忓苟鎺㈢储涓€浜涙湁瓒ｇ殑鐐广€倃riting-mode&direction&unicode-bidi鍦–SS鐨勪笘鐣岄噷锛岃繖涓変釜灞炴€ч兘鏄拰鎺掔増椤哄簭鐩稿叧鐨勶紝瀹冧滑鐩镐簰鍏宠仈浣嗕綔鐢ㄤ笉鍚屻€倃riting-mode锛氬畾涔夊潡绾у厓绱犱腑鏂囨湰鐨勬按骞虫垨鍨傜洿鎺掑垪浠ュ強鏂囨湰鐨勮杩涙柟鍚戙€俤irection锛氳缃枃瀛楁帓鍒楃殑鏂瑰悜銆俽tl琛ㄧず浠庡彸鍒板乏锛堝甯屼集鏉ヨ鎴栭樋鎷変集璇級锛宭tr琛ㄧず浠庡乏鍒板彸銆倁nicode-bidi锛氬拰direction寰堝儚锛屼袱鑰呯粡甯镐細涓€璧峰嚭鐜般€傚湪鐜颁唬璁＄畻鏈哄簲鐢ㄤ腑锛屾渶甯哥敤鐨勫鐞嗗弻鍚戞枃鏈殑绠楁硶鏄疷nicode鍙屽悜绠楁硶銆倁nicode-bidi灞炴€х敤浜庤鐩栨绠楁硶銆傚厜鐪嬪畾涔夋湁鐐逛贡锛岀畝鍗曠湅鍑犲紶搴旂敤鍥撅細writing-mode琛ㄧずwriting-mode鍩烘湰涓婂彧闇€瑕佸叧娉ㄦ渶甯歌鐨刪orizo鈥嬧€媙tal-tb銆乿ertical-lr銆乿ertical-rl銆傛寚绀烘枃鏈殑琛岃繘鏂瑰悜銆備笅鍥炬槸娴忚鍣ㄥ畬鍏ㄦ敮鎸亀riting-mode鏃惰緭鍑虹殑鏍峰瓙锛歞irection琛ㄧずOK锛屼负浠€涔堟槸direction锛熷畠鎸囩ず鏂囨湰鎺掑垪鐨勬柟鍚戙€傛柟鍚戯細ltr锛氶粯璁ゅ睘鎬с€傚彲璁剧疆鏂囨湰鍜屽叾浠栧厓绱犵殑榛樿鏂瑰悜鏄粠宸﹀埌鍙炽€俤irection:rtl:鏂囨湰鍜屽叾浠栧厓绱犵殑榛樿鏂瑰悜锛屽彲浠ヨ缃负浠庡彸鍒板乏銆傛湁鐐逛贡锛屾墍浠emo鏄渶鐩磋鐨勩€傚亣璁撅紝鎴戜滑鏈変互涓嬬粨鏋勶細1234杩欐槸涓€娈垫甯搁『搴忕殑鏂囧瓧
绠€鍗曠殑CSS濡備笅锛歱,ul{background:#ff00ff50;濉厖锛?0px锛泒ul{鏄剧ず锛歠lex锛涜瘉鏄庡唴瀹癸細绌烘牸涔嬮棿锛?>li{border:1pxsolid#333;}}姝ｅ父鐨勬牱寮忓涓嬶細鎴戜滑鍒嗗埆鍦ㄤ袱缁勫厓绱犵殑鐖跺鍣?p>鍜?ul>涓坊鍔犱簡direction:ltr鍜宒irection:rtl锛屾渶缁堟晥鏋滃涓嬶細鍙互鐪嬪埌锛宒irection鍙互鏀瑰彉瀛愬厓绱犵殑鎺掑垪鏂瑰悜锛屼絾涓嶈兘鏀瑰彉鍗曟鏂囧瓧锛堟垨鍐呰仈鍏冪礌锛変腑鍚勬枃瀛楃殑涔﹀啓椤哄簭銆傞偅涔堝鏋滐紝鎴戝笇鏈涜繖鏄竴娈垫甯搁『搴忕殑鏂囧瓧锛岃繖娈垫枃瀛椾笉鏄粠宸﹀埌鍙冲啓鐨勶紝鍙嶄箣锛屾槸浠庡彸鍒板乏鍐欑殑锛屾€庝箞璁剧疆鍛紵unicode-bidi琛ㄧず闇€瑕佽姹倁nicode-bidi銆備娇鐢ㄦ柟鍚戯細鍗曠嫭浣跨敤rtl鏃犳硶鍦ㄥ崟涓枃鏈钀斤紙鎴栧唴鑱斿厓绱狅級涓粠鍙冲埌宸︽洿鏀规枃鏈殑涔﹀啓椤哄簭銆傞渶瑕乽nicode-bidi銆侰SS涓殑unicode-bidi灞炴€т笌鏂瑰悜灞炴€т竴璧峰喅瀹氫簡濡備綍澶勭悊鏂囨。涓殑鍙屽悜鏂囨湰銆傝繕鏄笂闈㈢殑浠ｇ爜锛屾垜浠慨鏀逛竴涓嬶細Thisisatextinnormalorder
p{direction:rtl;unicode-bidi:bidi-override;}缁撴灉濡備笅锛氫竴璧锋瘮杈冿細杩欓噷闄や簡bidi:bidi-override锛寀nicode-bidi:isolate-override涔熷彲浠ュ緱鍒板悓鏍风殑鏁堟灉銆傝繖閲屾秹鍙婂埌涓€涓緢閲嶈鐨勭煡璇嗏€斺€擴nicode鍙屽悜绠楁硶銆俇nicode鍙屽悜绠楁硶鍙屽悜鏂囨湰鏄寚涓€涓瓧绗︿覆鍖呭惈涓ょ鏂囨湰锛屾棦鍖呮嫭浠庡乏鍒板彸鐨勬枃鏈紝涔熷寘鎷粠鍙冲埌宸︾殑鏂囨湰銆傚浜庝功鍐欎範鎯紝鍒嗕负锛氬ぇ閮ㄥ垎鐨勪功鍐欎範鎯槸浠庡乏鍒板彸锛氬鎷変竵鏂囷紙鑻辨枃瀛楁瘝锛夊拰姹夊瓧锛涗竴浜涘崟璇嶆槸浠庡彸鍒板乏涔﹀啓鐨勶紝渚嬪闃挎媺浼锛坅r锛夊拰甯屼集鏉ヨ閫氳锛坔e锛夈€傚湪鐜颁唬璁＄畻鏈哄簲鐢ㄤ腑锛屽鐞嗗弻鍚戞枃鏈渶甯哥敤鐨勭畻娉曟槸Unicode鍙屽悜绠楁硶銆備竴涓尯鍩熶腑鏈変竴涓€讳綋鏂瑰悜锛屽畠鍐冲畾浜嗕粠璇ュ尯鍩熺殑鍝竴渚у紑濮嬪啓鏂囧瓧锛岄€氬父绉颁负鍩烘湰鏂瑰悜銆傛祻瑙堝櫒浼氭牴鎹偍鐨勯粯璁よ瑷€璁剧疆榛樿鐨勫熀鏈柟鍚戙€備緥濡傦紝鑻辫鍜屾眽璇殑鍩烘湰鏂瑰悜鏄粠宸﹀埌鍙筹紝闃挎媺浼鐨勫熀鏈柟鍚戞槸浠庡彸鍒板乏銆傚湪Web涓紝鎴戜滑鏈?绉嶆柟寮忔潵鎺у埗鏂囨湰鏂瑰悜锛歨tml瀹炰綋鈥斺€斿拰)鍜?bdo>鏍囩鍜宒ir灞炴€SS灞炴€irection+unicode-bidi鏈枃浠嬬粛浜咰SS涓殑direction+unicode-bidi鏂规硶鎺у埗鏂囨湰鐨勪功鍐欐柟鍚戙€傚叧浜嶶nicodeBidirectionalAlgorithm鏈韩杩樻槸寰堝鏉傜殑锛屾湰鏂囧彧鏄畝鍗曠殑鎻愪竴涓嬶紝鏇磋缁嗙殑鍐呭鍙互鍙傝€僓NICODEBIDIRECTIONALALGORITHMwriting-mode&direction&unicode-bidi鐨勪竴浜涘簲鐢ㄥ幓鎺夊畠鏈韩鐨勫姛鑳斤紝璁╂垜浠湅鐪嬩粬浠殑涓€浜涘叾浠栧簲鐢ㄥ満鏅€備娇鐢╳riting-mode杩涜鍒涙剰鎺掔増Layoutwriting-mode闈炲父閫傚悎涓€浜涙湁鍒涙剰鐨勬帓鐗堛€備竴浜涚被浼间簬涓浗鍙よ瘲璇嶇殑鍩烘湰绔栧睆鏄剧ず锛?divclass="g-wrap">鍑夊窞璇?/h2>
钁¤悇閰掑鍏夋澂锛?/p>
鎯冲枬鐞电惗绔嬮┈鍌?
閱夋矙娌欏満鐨勫悰鑾瑧锛?/p>
鍙ゅ線浠婃潵澶氬皯浜哄緛鎴樸€?/p>
灏唚riting-mode:vertical-rl鎴杦riting-mode:vertical-lr娣诲姞鍒?g-wrap浠ヨ幏寰椾笉鍚岀殑鏁堟灉锛?rl{writing-mode:vertical-rl;}.lr{writing-mode:vertical-lr;}CodePenDemo--浠riting-mode涔嬬被鐨勬柟寮忔樉绀鸿瘲姝岋紝浣跨敤writing-mode:vertical-rl瀹炵幇鏍囬绔栨帓锛屽舰鎴愭湁瓒ｇ殑鎶ョ焊鐗堥潰锛宑ontent:
TitleLoomings
鍙垜浠ュ疄鐜涘埄鍚с€傚嚑骞村墠-娌″叧绯?.....
div{width:750px;padding-left:150px;}h2{position:absolute;writing-mode:vertical-rl;}寰楀埌杩欐牱涓€涓帓鐗堝竷灞€锛欳odePenDemo--writing-modeLayoutDemo鏀瑰彉鏂囧瓧婧㈠嚭鍜岀渷鐣ュ彿鐨勪綅缃紝浣垮叾鍦ㄥご閮ㄨ鐪佺暐銆傛垜浠兘鐭ラ亾杩欑瘒鏂囩珷瓒呴暱锛屾孩鍑洪€氳璇佺殑閬楁紡鍦ㄦ枃鏈€傚儚杩欐牱锛?p>浣緾SS鐪佺暐鍙锋垚涓哄瓧绗︿覆鐨勫紑澶?/p>p{overflow:hidden;鏂囨湰婧㈠嚭锛氱渷鐣ュ彿锛泈hite-space:nowrap;}杩欓噷锛屾垜浠彲浠ョ渷鐣irection鐨勭偣鐨勪綅缃紝浠巑ovethetailtothehead:p{direction:rtl;}缁撴灉濡備笅锛氭垜灏濊瘯鍦ㄥ琛屼腑浣跨敤鐪佺暐鍙凤紝澶氳鐪佺暐鍙风殑鐐逛細鍑虹幇鍦ㄦ渶鍚庝竴琛岀殑宸︿晶锛屼笉绗﹀悎瑕佹眰銆侰odePenDemo--CSSEllipsisBeginningofString浣跨敤writing-mode鏀瑰彉鍏冪礌鐨勬柟鍚戣繖涓皬鎶€宸ф槸浠庡紶鑰佸笀鐨勫崥瀹腑瀛︽潵鐨勶細鏀瑰彉CSS涓栫晫绾垫í瑙勫垯鐨剋riting-mode灞炴€э紝鎴戜滑鍙互浣跨敤writing-mode:vertical-rl,灏嗗厓绱犺浆90掳瑙?
鉃?/div>div:hover{writing-mode:vertical-rl;}鐪嬫晥鏋滐紝鎮仠鏃讹紝鏀瑰彉绠ご浠庡彸鉃★笍鍒颁笅馃斀锛氬綋鐒惰繖涓姛鑳界幇鍦ㄥ畬鍏ㄥ彲浠ョ敤transform鏉ユ浛浠ｏ紝浣嗘槸闇€瑕佸吋瀹笽E绯诲垪鐨勬椂鍊欐槸涓€涓湁瓒ｇ殑灏忔妧宸с€侰SS涓殑閫昏緫灞炴€у湪涓嬩竴绔犱腑锛屾垜浠皢璁ㄨCSS涓殑閫昏緫浣嶇疆銆傛垜浠煡閬擄紝褰撴垜浠娇鐢ㄥ儚margin鍜宲adding杩欐牱鐨勪笢瑗挎椂锛屾垜浠彲浠ュ崟鐙帶鍒舵瘡涓柟鍚戯紝姣斿margin-top锛宲adding-left銆備絾鏄繖绉嶇敱涓?宸?涓?鍙崇墿鐞嗘柟鍚戠淮搴﹀畾涔夌殑灞炴€у湪涓嶅悓鐨勬帓鐗堣鍒欎笅寰堝鏄撳嚭闂銆傝€冭檻涓嬮潰鐨凞EMO锛屾垜浠兂鍦ㄥ彜璇楄瘝鐨勬爣棰樹笂鏂规坊鍔犱竴涓猵adding鍊硷細
鍑夊窞璇?/h2>
钁¤悇閰掑鍏夋澂锛?/p>
鎯冲枬鐞电惗锛岄┈涓婃彁閱掋€?/p>
閱夋矙娌欏満鐨勫悰鑾瑧锛?/p>
鍙ゅ線浠婃潵澶氬皯浜哄緛鎴樸€?/p>
鍑夊窞璇?/h2>
钁¤悇閰掑鍏夋澂锛?/p>
鎯冲枬鐞电惗锛岄┈涓婃彁閱掋€?/p>
閱夋矙娌欏満鐨勫悰鑾瑧锛?/p>
鍙ゅ線浠婃潵澶氬皯浜哄緛鎴樸€?/p>
.pt{padding-top:100px;}.rl{writing-mode:vertical-rl;}鍙鏃犺writing-mode鏄粈涔堬紝padding-top鎬绘槸鎸囩墿鐞嗘柟鍚戠殑椤堕儴銆傚熀浜庤繖绉嶄笉鍚岀殑鎺掔増瑙勫垯锛岀墿鐞嗘柟鍚戝彲鑳戒細閫犳垚涓€浜涢夯鐑︺€侰SS鍦–SSLogicalPropertiesandValuesLevel1瑙勮寖涓紩鍏ヤ簡CSSLogicalProperties銆侰SSLogicalPropertiesandValues鏄疌SS鐨勪竴涓柊妯″潡锛屽畠寮曞叆浜嗕粠閫昏緫瑙掑害鑰屼笉鏄墿鐞嗐€佹柟鍚戞垨缁村害鎺у埗鏉ユ帶鍒跺竷灞€鐨勫睘鎬у拰鍊笺€傝繕鏄笂闈㈢殑DEMO锛屾垜浠彲浠ョ敤padding-block-start浠ｆ浛padding-top銆傚叧閿偣锛氫娇鐢╬adding-block-start鑰屼笉鏄痯adding-top:.pt{-padding-top:100px;+padding-block-start:100px;}.rl{writing-mode:vertical-rl;}璁╂垜浠潵涓€涓繖娆＄湅鏁堟灉锛歱adding鐨勪綅缃敱鐗╃悊涓婂湪涓婂彉涓洪€昏緫涓婁笂銆傚畬鏁寸殑demo鍙互鐐硅繖閲岋細CodePenDemo--鐗╃悊鏂瑰悜鍜岄€昏緫鏂瑰悜鏄剧ずmargin,padding,border锛岀墿鐞嗗睘鎬у埌閫昏緫灞炴€х殑鐩稿鏄犲皠绫讳技杩欎釜灞炴€э紝瑙勮寖涓湁寰堝瀹氫箟锛岃繖閲岀畝鍗曠綏鍒椾竴涓媠pecificsMappingrules:MarginMappingfromphysicalattributestologicalattributes:Property灞炴€ogicalProperty閫昏緫灞炴€argin-topmargin-block-startmargin-leftmargin-inline-startmargin-rightmargin-inline-endmargin-bottommargin-block-endpadding鐗╃悊灞炴€у埌閫昏緫灞炴€х殑鏄犲皠:PropertyattributeLogicalProperty閫昏緫灞炴€adding-toppadding-block-startpadding-leftpadding-inline-startpadding-rightpadding-inline-endpadding-bottompadding-block-endborder浠庣墿鐞嗗睘鎬у埌閫昏緫灞炴€х殑鏄犲皠锛歅ropertyattributeLogicalProperty閫昏緫灞炴€order-top{-size\style\color}border-block-start{-size\style\color}border-left{-size\style\color}border-inline-start{-size\style\color}border-right{-size\style\color}border-inline-end{-size\style\color}border-bottom{-size\style\color}border-block-end{-size\style\color}鐩稿鐗╃悊灞炴€у埌閫昏緫灞炴€х殑鏄犲皠锛氬睘鎬у睘鎬ogicalProperty閫昏緫灞炴€opinset-block-startleftinset-inline-startrightinset-inline-endbottominset-block-end绛?..锛堝畬鎴愬垪琛紝鍙互鎴宠繖閲岋細MDN-CSSlogicalattributesandvalues)inlogic灞炴€т腑娌℃湁鏂瑰悜鐨勬蹇碉紝鍙湁寮€濮嬶紙start锛夊拰缁撴潫锛坋nd锛夈€佸潡锛坆lock锛夊拰鍐呰仈锛坕nline锛夌殑姒傚康銆備緥濡傦紝鍦ㄤ粠宸﹀埌鍙?LTR)涓紝璧风偣鍦ㄥ乏锛屼絾鍦ㄤ粠鍙冲埌宸?RTL)涓紝璧风偣鍦ㄥ彸銆俵ogical灞炴€т笅鐨勭洅妯″瀷鑰冭檻鍒颁簡涓嶅悓甯冨眬甯︽潵鐨勯€昏緫闂锛屾暣涓洅妯″瀷涔熷彲浠ョ浉搴旀敼鍙樸€備笅鍥句腑锛屽乏杈规槸鐗╃悊鐩掑瓙妯″瀷锛屽彸杈规槸閫昏緫灞炴€т笅鐨勭洅瀛愭ā鍨嬨€傜墿鐞嗘柟鍚戜笌閫昏緫鏂瑰悜閲嶅彔褰撶劧杩樻湁涓€绉嶆儏鍐垫槸璁剧疆鐨勯€昏緫鏂瑰悜涓庣墿鐞嗘柟鍚戦噸鍙犮€備緥濡傦紝鎴戜滑鍚屾椂涓轰竴涓櫘閫氱殑浠庡乏鍒板彸鍜屼粠涓婂埌涓嬬殑鍏冪礌璁剧疆padding-top鍜宲adding-block銆?寮€濮嬶紝鐪嬬湅浼氬彂鐢熶粈涔堬細div{padding-top:120px;padding-block-start:100px;}杩欓噷濡傛灉鐗╃悊鏂瑰悜璁剧疆鐨刾adding涓庨€昏緫鏂瑰悜閲嶅彔锛屽垯鍙栦袱涓€煎悗闈㈠畾涔夌殑閭ｄ釜銆傝繖閲岋紝鐢变簬padding-block-start鏄湪padding-top涔嬪悗瀹氫箟鐨勶紝鎵€浠adding鐨勫€间负100px銆俶argin鍜宐order鏄竴鏍风殑銆傛垜杩欓噷鐨勭悊瑙ｆ槸鍚屼竴涓柟鍚憁argin\padding\border鍙兘鏈変竴涓紝涓嶇鏄€昏緫鏂瑰悜杩樻槸鐗╃悊鏂瑰悜锛屼互鍚庨潰瀹氫箟鐨勫€间负鍑嗐€侰odePenDemo--鐗╃悊鏂瑰悜鍜岄€昏緫鏂瑰悜閲嶅彔DEMO灞曠ず鎬荤粨缁间笂鎵€杩帮紝褰撻」鐩紑濮嬪浗闄呭寲锛屽綋瓒婃潵瓒婂鐨勫浗鍐呬笟鍔″紑濮嬪嚭娴凤紝鍥介檯鍏煎鍜岄€傞厤浼氳秺鏉ヨ秺閲嶈銆傚垢杩愮殑鏄紝CSS涓€鐩村湪涓庢椂淇辫繘锛屾帹闄堝嚭鏂般€傚綋鎮ㄧ殑鎺掔増甯冨眬闇€瑕佽€冭檻涓嶅悓鐨勪功鍐欐ā寮忔椂锛屾偍闇€瑕佸紑濮嬭€冭檻浣跨敤閫昏緫灞炴€ц€屼笉鏄墿鐞嗗睘鎬э紒鏈€鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪锛氾級濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃
