Posted 2021-04-09 鍓嶇澶у叏

锛堢粰鍓嶇澶у叏鍔犳槦鏍囷紝鎻愬崌鍓嶇鎶€鑳?/span>锛?/span>

https://github.com/qdlaoyao/css-gif

鏈枃姹囨€讳釜浜虹洰鍓嶅彂杩囩殑鎵€鏈?CSS 鐭ヨ瘑鐐瑰姩鍥撅紝浠ヤ究闃呰銆?/span>锛堟湰鏂囧姩鍥惧緢澶氾紝鍙兘鍔犺浇鏈夌偣鎱€?/span>锛?/span>

闇€瑕佽鏄庣殑鏄紝椤哄簭浠嶆槸鎸夊綋鏃跺彂甯冮『搴忕綏鍒楃殑锛岃繕娌℃湁绯荤粺鐨勬€荤粨锛屽澶氬寘娑点€?/span>鍙﹀杩欓噷锛岃€佸璋㈣阿鍚勪綅涓€濡傛棦寰€鐨勬敮鎸併€?/span>馃槝馃槝馃槝

01.銆愯礋杈硅窛銆戰煉樿礋杈硅窛鐨勬晥鏋溿€?/span>娉ㄦ剰宸﹀彸璐熻竟璺濊〃鐜板苟涓嶄竴鑷淬€?/span>宸︿负璐熸椂锛屾槸宸︾Щ锛屽彸涓鸿礋鏃讹紝鏄乏鎷夈€?/span>涓婁笅涓庡乏鍙崇被浼?/span>

02.銆恠hape-outside銆戔潳涓嶈鑷互涓烘槸浜嗐€?/span>浣犱互涓鸿嚜宸辨槸鏂圭殑锛屽湪鍒汉鐪奸噷浣犲嵈鏄渾鐨?/span>

03.銆怋FC搴旂敤銆戰煉揃FC搴旂敤涔嬮樆姝㈠杈硅窛鍚堝苟锛坢argin collapsing锛?/span>

04.銆怋FC搴旂敤銆戰煉擝FC搴旂敤涔嬫秷闄ゆ诞鍔ㄧ殑褰卞搷

05.銆恌lex涓嶄负璁ょ煡鐨勭壒鎬т箣涓€銆戰煉昮lex甯冨眬涓媘argin:auto鐨勭濂囩敤娉?/span>

06.銆恌lex涓嶄负璁ょ煡鐨勭壒鎬т箣浜屻€戰煉杅lex甯冨眬锛屽綋flex-grow涔嬪拰灏忎簬1鏃讹紝鍙兘鎸夋瘮渚嬪垎閰嶉儴鍒嗗墿浣欑┖闂达紝鑰屼笉鏄叏閮?/span>

07.銆恑nput鐨勫搴︺€戰煉楀苟涓嶆槸缁欏厓绱犺缃甦isplay:block灏变細鑷姩濉厖鐖跺厓绱犲搴︺€?/span>input 灏辨槸涓緥澶栵紝鍏堕粯璁ゅ搴﹀彇鍐充簬size鐗规€х殑鍊?/span>

08.銆愬畾浣嶇壒鎬с€戰煉欑粷瀵瑰畾浣嶅拰鍥哄畾瀹氫綅鏃讹紝鍚屾椂璁剧疆 left 鍜?right 绛夊悓浜庨殣寮忓湴璁剧疆瀹藉害

09.銆愬眰鍙犱笂涓嬫枃銆戰煉氬眰鍙犱笂涓嬫枃锛?/span>灏忚緢灏辨槸灏忚緢锛屽啀鍘夊涔熷彧鏄釜灏忚緢

10.銆愮矘鎬у畾浣嶃€戰煉沺osition:sticky锛岀矘鎬у畾浣嶈璧蜂綔鐢紝闇€瑕佽缃渶鍚庢粸鐣欎綅缃€?/span>chrome鏈塨ug锛宖irefox瀹岀編

11.銆愮浉閭诲厔寮熼€夋嫨鍣ㄣ€戰煉滅浉閭诲厔寮熼€夋嫨鍣ㄤ箣甯哥敤鍦烘櫙

12.銆愭ā鎬佹銆戰煐よ浣挎ā鎬佹鑳屾櫙閫忔槑锛岀敤rgba鏄竴绉嶇畝鍗曟柟寮?/span>

13.銆愪笁瑙掑舰銆戰煉漜ss缁樺埗涓夎褰㈢殑鍘熺悊

14.銆恡able甯冨眬銆戰煉瀌isplay:table瀹炵幇澶氬垪绛夐珮甯冨眬

15.銆愰鑹插姣斿害銆戔潱钃濆簳绾㈠瓧锛岀敱浜庨鑹插姣斿害姣旇緝浣庯紝鏁呰€岀湅涓嶆竻锛屽洜姝や笉鏄ソ鐨勯厤鑹叉柟妗堭煒?/span>

16.銆愬畾瀹介珮姣斻€戔櫏css瀹炵幇瀹氬楂樻瘮鐨勫師鐞嗭細padding鐨勭櫨鍒嗘瘮鏄浉瀵逛簬鍏跺寘鍚潡鐨勫搴︼紝鑰屼笉鏄珮搴?/span>

17.銆愬姩鐢绘柟鍚戙€戰煇瑰姩鐢绘柟鍚戝彲浠ラ€夋嫨alternate锛屽幓鍥炰氦鏇胯繘琛?/span>

18.銆愮嚎鎬ф笎鍙樺簲鐢ㄣ€戰煇甤ss缁樺埗褰╁甫鐨勫師鐞?/span>

19.銆愰殣钘忔枃鏈€戰煇殣钘忔枃瀛楀唴瀹圭殑涓ょ鍔炴硶

20.銆愬眳涓€戰煇板疄鐜板眳涓殑涓€绉嶇畝鍗曟柟寮?/span>

21.銆愯鍚戞笎鍙樸€戰煇叉柊鐨勬笎鍙橈細瑙掑悜娓愬彉銆?/span>鍙互鐢ㄦ潵瀹炵幇楗煎浘

22.銆愯儗鏅綅缃櫨鍒嗘瘮銆戰煇峛ackground-position鐧惧垎姣旂殑姝ｇ‘鐞嗚В鏂瑰紡锛?/span>鍥剧墖鑷韩鐨勭櫨鍒嗘瘮浣嶇疆涓庡鍣ㄥ悓鏍风殑鐧惧垎姣斾綅缃噸鍚?/span>

23.銆愯儗鏅噸澶嶆柊鍊笺€戰煇碽ackground-repeat鏂板睘鎬у€硷細round鍜宻pace銆?/span>鍓嶈€呰〃绀哄噾涓暣锛屽悗鑰呰〃绀虹暀鐐圭紳

24.銆愯儗鏅檮鐫€銆戰煇恇ackground-attachment鎸囧畾鑳屾櫙濡備綍闄勭潃鍦ㄥ鍣ㄤ笂锛屾敞鎰忓叾灞炴€у€糽ocal鍜宖ixed鐨勪娇鐢?/span>

25.銆愬姩鐢诲欢鏃躲€戰煇靛姩鐢绘坊鍔犲欢杩熸椂闂村彲浠ヤ娇姝ヨ皟涓嶄竴鑷?/span>

26.銆恛utline浣跨敤銆戰煇斿彲浠ヤ娇鐢╫utline鏉ユ弿杈癸紝涓嶅崰鍦版柟锛屽畠鐢氳嚦鍙互鍦ㄩ噷闈?/span>

27銆愯儗鏅畾浣嶃€戰煇跺綋鍥哄畾鑳屾櫙涓嶉殢鍏冪礌婊氬姩鏃讹紝鑳屾櫙瀹氫綅鏄浉瀵逛簬瑙嗗彛鐨?/span>

28銆恡ab-size銆戰煇锋祻瑙堝櫒榛樿鏄剧ずtab涓?涓┖鏍硷紝tab-size鍙互鎸囧畾绌烘牸闀垮害

29銆愬姩鐢绘殏鍋溿€戰煡滳SS鍔ㄧ敾鍏跺疄鏄彲浠ユ殏鍋滅殑

30銆恛bject-fit銆戰煃撳浘鐗囧湪鎸囧畾灏哄鍚庯紝鍙互璁剧疆object-fit涓篶ontain鎴朿over淇濇寔姣斾緥

31銆愰紶鏍囩姸鎬併€戰煃掓寜閽鐢ㄦ椂锛屼笉瑕佸繕浜嗚缃紶鏍囩姸鎬?/span>

32銆愯儗鏅櫄鍖栥€戰煃戜娇鐢–SS婊ら暅瀹炵幇鑳屾櫙铏氬寲

33銆恌ill-available銆戰煃忚缃搴︿负fill-available锛屽彲浠ヤ娇inline-block鍍廱lock閭ｆ牱濉厖鏁翠釜绌洪棿

34銆恌it-content銆戰煃庤缃搴︿负fit-content锛屽彲浠ヤ娇block鍍廼nline-block閭ｆ牱瀹炵幇鏀剁缉瀹藉害鍖呰９鍐呭鐨勬晥鏋?/span>

35銆愯嚜瀹氫箟灞炴€с€戰煃婥SS鑷畾涔夊睘鎬х殑绠€鍗曚娇鐢?/span>

36銆恗in-content/max-content銆戰煃嶅彲浠ヨ缃搴︿负min-content鍜宮ax-content锛屽墠鑰呰鍐呭灏藉彲鑳藉湴鏀剁缉锛屽悗鑰呰鍐呭灏藉彲鑳藉湴灞曞紑

37銆愯繘搴︽潯銆戰煃婁娇鐢ㄦ笎鍙橈紝涓€涓猟iv瀹炵幇杩涘害鏉?/span>

38銆愭墦鍗般€戰煃夊彲浠ュ湪鎵撳嵃缃戦〉鏃讹紝璁剧疆page鐩稿叧灞炴€с€?/span>姣斿page-break-before灞炴€ф潵琛ㄧず鏄惁闇€瑕佸彟璧锋柊椤?/span>

39銆愰€愬抚鍔ㄧ敾銆戰煃屽埄鐢–SS绮剧伒瀹炵幇閫愬抚鍔ㄧ敾

40銆恟esize銆戰煃愭櫘閫氬厓绱犱篃鍙互鍍弔extarea閭ｆ牱resize

41銆愰潰鍖呭睉銆戰煃囦娇鐢╞efore浼厓绱犲疄鐜伴潰鍖呭睉

42銆恠ticky footer銆戰煃堜娇鐢╣rid甯冨眬瀹炵幇sticky footer

43銆愬姩鐢诲～鍏呯姸鎬併€戰煃匔SS鍙互璁剧疆鍔ㄧ敾寮€濮嬪墠鍜岀粨鏉熸椂鎵€淇濇寔鐨勭姸鎬?/span>

44銆愬姩鐢昏礋寤惰繜銆戰煡慍SS鍔ㄧ敾鍙互璁剧疆寤惰繜鏃堕棿涓鸿礋鏁帮紝琛ㄧず鍔ㄧ敾浠夸經寮€濮嬪墠灏卞凡缁忚繍琛岃繃浜嗛偅涔堥暱鏃堕棿

45銆愯繃娓°€戰煃嗙埍鐨勯瓟鍔涜浆鍦堝湀

46銆愬姩鐢绘渚嬨€戰煃按娉㈡晥鏋滃師鐞?/span>

47銆愬姩鐢绘渚嬨€戰煂窩SS寮圭悆鍔ㄧ敾鏁堟灉鐨勫師鐞?/span>

48銆恛utline銆戰煂籵utline灞炴€х殑濡欑敤

49銆恎rid銆戰煉曠伀鐙愭祻瑙堝櫒grid甯冨眬妫€娴嬪櫒

甯屾湜鏈夋墍甯姪銆?/span>

涔熸杩庨槄璇绘湰浜虹殑銆奐S姝ｅ垯杩蜂綘涔︺€?/span>

鏈枃瀹屻€?/span>

References

• 銆奐S姝ｅ垯杩蜂綘涔︺€?https://github.com/qdlaoyao/js-regex-mini-book)

鎺ㄨ崘闃呰

锛堢偣鍑绘爣棰樺彲璺宠浆闃呰锛?/p>

瑙夊緱鏈枃瀵逛綘鏈夊府鍔╋紵璇峰垎浜粰鏇村浜?/span>

鍏虫敞銆屽墠绔ぇ鍏ㄣ€嶅姞鏄熸爣锛屾彁鍗囧墠绔妧鑳?/span>

濂芥枃绔狅紝鎴?span class="mq-269">鍦ㄧ湅鉂わ笍