css3鐨勪竴浜涘皬鏂规硶

Posted 2020-08-05

鏍囩锛?/p>

涓婃鎴戜滑鐢╟ss3鍋氬姩鐢伙紝閮芥槸瀹氫箟鍔ㄧ敾锛屽叾瀹炴垜浠湁涓畝鍗曠殑鏂规硶锛屽氨鏄娇鐢ㄥ姩鐢诲簱锛屾墍璋撶殑鍔ㄧ敾搴撳氨鏄竴涓凡缁忓啓濂界殑css鏂囦欢锛屽畠閲岄潰鍖呭惈浜嗗緢澶氬仛濂界殑鍔ㄧ敾锛屾垜浠娇鐢ㄦ椂鍙璋冪敤灏卞彲浠ヤ簡锛屽畠鐨勬楠ゆ湁杩欏嚑姝ワ細

1锛氬厛鐢╨ink寮曞叆鍔ㄧ敾搴揷ss鏂囦欢銆?/span>

2锛氱粰甯屾湜瑕佸姩鐢荤殑鍏冪礌璁剧疆class锛堝姩鐢诲悕  animated锛夈€?/span>

3锛氬姩鐢绘挱鏀惧畬姣曪紝绉婚櫎class銆?/span>

杩欓噷瑕佽€冭檻鍒版祻瑙堝櫒鐨勫吋瀹规€э細

杩欓噷鐢ㄥ埌涓€涓猳ne锛屽畠鏄竴娆℃€т簨浠讹紝杩欐牱鍐欑殑璇濓紝绛変簬姣忔鎵ц娉ㄥ唽浜嬩欢閮戒細缁戝畾涓€娆″吋瀹瑰拰娓呴櫎class銆傝繖鏍峰緢鍗犺祫婧愶紝鎴戜滑鎴戜滑涓€鑸妸杩欏彞鏀惧湪鏈€鍓嶉潰锛岀劧鑰屾斁鍦ㄦ渶鍓嶉潰鍚庝笉鑳界敤one锛岃鏀逛负on銆?/span>

瀹冭捣鍒扮殑鏁堟灉鍜屼笂闈竴涓槸涓€鏍风殑銆?/span>

濡傛灉鎴戜滑涓€涓」鐩敤鍒扮殑鍔ㄧ敾灏戠殑璇濓紝寮曞叆鏁翠釜鍔ㄧ敾搴擄紝涔熸湁鐐规氮璐硅祫婧愶紝鎴戜滑鍙互鎴彇鍏朵腑鐨勪竴娈靛姩鐢伙紝鎶婁粬鏀惧湪鏍峰紡璁剧疆閲屻€?/span>

鏈変釜灏忓姛鑳借涓嬶紝鎴戜滑椤甸潰涓竴鑸兘鏄竴浜涗紶缁熺殑瀛椾綋锛岄偅鎴戜滑瑕佹€庝箞璁剧疆涓€浜涚壒娈婄殑瀛椾綋鍛紵鏈変袱绉嶆柟娉曪紝鎴戜滑鍙互鐢╥confont锛堥樋閲岀殑鍥炬爣锛夋垨鑰呮槸鏈夊瓧搴擄紝浣嗘湁瀛楀簱鏄渶瑕佹敞鍐岋紝鐧诲叆鎵嶅彲浠ヤ娇鐢ㄣ€備娇鐢ㄦ柟娉曢噷闈㈤兘鏈夛紝寰堢畝鍗曘€?/span>

璇翠釜甯冨眬鐨勬柟娉曟妸锛屾垜浠箣鍓嶉兘鏄敤瀹氫綅鎴栬€呮诞鍔ㄦ潵瀹氫綅锛屼粖澶╂暀澶у涓€涓柊鏂规硶锛屾槸寮规€у竷灞€銆?/span>

1锛氬湪鐖跺厓绱犱腑瑕佸啓display锛歠lex锛涜繖鏄紑鍚脊鎬у竷灞€銆?/span>

2锛氬鏋滃瓙鍏冪礌瀵瑰叾鏂瑰紡閮戒竴鏍凤紝閭ｅ彧瑕佸湪鐖跺厓绱犱腑璁剧疆锛?/span>

涓婇潰鐨勬槸璁剧疆X杞寸殑瀵瑰叾鏂瑰紡锛屼笅闈㈡槸璁剧疆Y杞寸殑瀵瑰叾鏂瑰紡锛屼絾杩欎笉鏄粷瀵圭殑銆?/span>

Flex寮规€у竷灞€鏈夋柟鍚戠殑锛屽畠鏈潵灏辨湁姘村钩鍜岀珫鐩翠袱绉嶏紝涓婇潰鐨勬槸榛樿鐨勬按骞筹紝鐒惰€屾兂瑕佺珫鐩寸殑甯冨眬锛岄偅鎴戜滑瑕佸湪鐖跺厓绱犱腑鍔犱竴鍙ワ細flex-direction锛歝olumn锛涘姞浜嗚繖涓€鍙ュ悗X杞达紝Y杞翠篃浼氭敼鍙樹笅銆?/span>

3锛氬鏋滄兂瑕佸崟鐙缃瘡涓殑瀵归綈鏂瑰紡锛岄偅鍦ㄥ瓙鍏冪礌涓缃產lign-self锛氾紱

4锛氬瓙鍏冪礌璁剧疆鐨勫睘鎬э紝鍙互璁剧疆flex锛?锛涙墍鍦ㄧ殑姣斾緥锛屼篃鍙互鐩存帴璁剧疆瀹介珮銆?/span>

5锛氬瓙鍏冪礌涔嬮棿鍙互鎹綅缃殑锛屼娇鐢╫rder锛氾紱榛樿鐨勭涓€涓槸0锛屽€艰秺灏忥紝瓒婇潬鍓嶃€?/span>

6锛氬脊鎬у竷灞€榛樿鏄笉寮€鍚崲琛岀殑锛屽鏋滆鎹㈣鐨勶紝鏄渶瑕佸紑鍚紝闇€瑕佸湪鐖跺厓绱犱腑鍔狅細

7锛氬脊鎬у竷灞€鏄彲浠ュ祵濂椾娇鐢ㄧ殑锛屼絾鏄瘡宓屽涓€灞傦紝灏辫鍔犱竴涓猟isplay锛歠lex锛?/span>