鏃╁勾锛堝叾瀹炰笉鏄緢鏃╋級锛屽啓杩囧嚑绡囧叧浜嶤SSReset鐨勬枃绔犫€斺€攔eset.css浣犵煡澶氬皯銆傝缁嗘弿杩颁簡褰撴椂涓氱晫甯哥敤鐨勪袱绉岰SS閲嶇疆鏂规锛歳eset.css鍜孨ormalize.css銆備互姣旇緝鎺ㄨ崘鐨凬ormalize.css涓轰緥銆傚畠鐨勬牳蹇冩€濇兂鏄粺涓€涓€浜涘厓绱犲湪鎵€鏈夋祻瑙堝櫒涓嬬殑琛ㄧ幇锛屼繚鎶ゅソ鐢ㄧ殑娴忚鍣ㄩ粯璁ゆ牱寮忚€屼笉鏄畬鍏ㄦ竻闄わ紝璁╁畠浠湪鍚勪釜娴忚鍣ㄤ笅閮借兘鏄剧ず鍑烘潵銆傚缁堝涓€;涓哄ぇ澶氭暟鍏冪礌鎻愪緵骞夸箟琛ㄧず锛涗慨澶嶄竴浜涙祻瑙堝櫒閿欒骞朵娇瀹冧滑鍦ㄦ墍鏈夋祻瑙堝櫒涓繚鎸佷竴鑷达紱閫氳繃涓€浜涘阀濡欑殑缁嗚妭鎻愰珮CSS鐨勫彲鐢ㄦ€э紱鎻愪緵璇︾粏鐨勬枃妗ｏ紝璁╁紑鍙戣€呬簡瑙ｄ笉鍚屽厓绱犲湪涓嶅悓娴忚鍣ㄤ笅鐨勬覆鏌撹鍒欙紱鐜板湪锛孨ormalize宸茬粡鍒颁簡绗叓涓増鏈€斺€攏ormalize.cssV8.0.1锛屾祻瑙堝櫒甯傚満鐜鐨勫法鍙樹篃闅忎箣鏀瑰彉銆侷E宸茬粡閫愭笎閫€鍑哄巻鍙茶垶鍙帮紝澶勭悊娴忚鍣ㄤ箣闂村法澶у樊寮傚拰涓嶅悓鍏煎鎬ч棶棰樼殑鏃ュ瓙浼间箮涓€鍘讳笉澶嶈繑浜嗐€傝櫧鐒剁幇鍦ㄤ笉鍚屽巶鍟嗙殑鏍囧噯杩樻槸鏈夊樊寮傜殑锛屽湪涓€浜涚粏鑺備笂杩樻槸鏈夊嚭鍏ワ紝浣嗘槸鎴戜滑宸茬粡涓嶉渶瑕佸儚杩囧幓閭ｆ牱鍘婚噸鏂拌缃祻瑙堝櫒鐨勯粯璁ゆ牱寮忎簡銆傛椂鑷充粖鏃ワ紝鎴戜滑瓒婃潵瓒婂鍦板惉鍒扮幇浠SS瑙ｅ喅鏂规杩欎竴鏈銆傞櫎浜嗘渶鍩烘湰鐨勯〉闈㈡牱寮忔覆鏌撳锛屽畠杩樻敞閲嶇敤鎴蜂綋楠屽拰鍙闂€с€傝繖鍙兘涔熸槸鎴戜滑浠ュ線鍐機SS鏃跺鏄撳拷鐣ョ殑涓€涓幆鑺傘€侻odernCSSReset鎴戞渶杩戞渶鍠滄鐨凜SSReset瑙ｅ喅鏂规涔嬩竴鏉ヨ嚜--Modern-CSS-Reset銆傚畠鐨勬牳蹇冩€濇兂鏄細閲嶇疆鍚堢悊鐨勯粯璁ゅ€硷紝娉ㄩ噸鐢ㄦ埛浣撻獙锛屾敞閲嶆棤闅滅锛屾暣涓猂eset鐨勬簮鐮佹瘮杈冪畝鍗曪細/*Boxsizingrules*/*,*::before,*::after{box-sizing:border-box;}/*鍒犻櫎榛樿杈硅窛*/body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}/*鍒犻櫎ul,ol涓婄殑鍒楄〃鏍峰紡鍏锋湁鍒楄〃瑙掕壊鐨勫厓绱狅紝杩欒〃鏄庡皢鍒犻櫎榛樿鏍峰紡*/ul[role='list'],ol[role='list']{list-style:none;}/*璁剧疆鏍稿績鏍归粯璁ゅ€?/html:focus-within{scroll-behavior:smooth;}/*璁剧疆鏍稿績涓讳綋榛樿鍊?/body{min-height:100vh;鏂囨湰娓叉煋锛歰ptimizeSpeed锛沴ine-height:1.5;}/*娌℃湁绫荤殑鍏冪礌鑾峰緱榛樿鏍峰紡*/a:not([class]){text-decoration-skip-ink:auto;}/*浣垮浘鍍忔洿瀹规槗宸ヤ綔with*/img,picture{鏈€澶у搴︼細100%锛沝isplay:block;}/*缁ф壙杈撳叆鍜屾寜閽殑瀛椾綋*/input,button,textarea,select{font:inherit;}/*绉婚櫎鎵€鏈夊姩鐢汇€佽繃娓″拰骞虫粦婊氬姩锛屼互渚涗笉鎯崇湅鍒板畠浠殑浜轰娇鐢?/@media锛堟洿鍠滄鍑忓皯杩愬姩锛氬噺灏戯級{html:focus-within{婊氬姩琛屼负锛氳嚜鍔紱}*,*::before,*::after{animation-duration:0.01ms!important;鍔ㄧ敾杩唬璁℃暟锛?锛侀噸瑕侊紱杩囨浮鎸佺画鏃堕棿锛?.01姣锛侀噸瑕侊紱婊氬姩琛屼负锛氳嚜鍔紒閲嶈锛泒}涓€浜涙瘮杈冩湁鎰忔€濈殑鐐癸紝鐩存帴鐪嬬洅瀛愭ā鍨嬶細*,*::before,*::after{box-sizing:border-box;}Normalize.css涓嶅缓璁繖鏍峰仛銆傚ぇ澶氭暟鍏冪礌鐨刡ox-sizing瀹為檯涓婃槸content-box銆備笉杩囧浜庡疄闄呭紑鍙戞潵璇达紝灏嗘墍鏈夊厓绱犻兘璁剧疆涓篵order-box鍏跺疄鏄竴绉嶆洿鏂逛究鐨勬搷浣滄柟寮忋€傚啀鏉ョ湅鐪嬬敤鎴蜂綋楠屽拰鏃犻殰纰嶆柟闈㈢殑涓€浜涘仛娉曪細-class鑰屼笉鏄洿鎺tml璧嬩簣骞虫粦婊氬姩銆傝繖鏍峰仛鐨勭洰鐨勬槸涓轰簡鍦ㄤ娇鐢ㄩ敭鐩榯ab閿垏鎹㈢劍鐐归〉闈㈡椂锛屽彧鍏佽椤甸潰骞虫粦婊氬姩锛屽甫鏉ユ洿濂界殑鐢ㄦ埛浣撻獙銆傚鏋滄垜浠缃涓婥SS:html{scroll-behavior:smooth;}鍙兘浼氫骇鐢熷壇浣滅敤锛屼緥濡傚綋鎴戜滑鍦ㄩ〉闈笂瀵绘壘鍏冪礌鏃讹紙浣跨敤Ctrl+F锛屾垨鑰匨ac鐨凜ommond+F锛夛紝杩欐CSS浠ｇ爜鍙兘涓ラ噸鍑忔參鎴戜滑鐨勬煡鎵鹃€熷害锛氬啀娆℃煡鐪嬭繖娈典唬鐮侊細@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto;}*,*::before,*::after{animation-duration:0.01ms!important;鍔ㄧ敾杩唬璁℃暟锛?锛侀噸瑕侊紱杩囨浮鎸佺画鏃堕棿锛?.01姣锛侀噸瑕侊紱婊氬姩琛屼负锛氳嚜鍔紒閲嶈锛涙垜鍦ㄤ娇鐢–SSprefers-*瑙勮寖锛屾彁楂樼綉绔欑殑鍙闂€у拰鍋ュ．鎬э紝寮曞叆浜唒refers-reduced-motion銆俻refers-reduced-motion瑙勫垯鏌ヨ鐢ㄤ簬鍑忓皯鍔ㄧ敾鏁堟灉銆傞櫎浜嗛粯璁よ鍒欎箣澶栵紝鍙湁涓€涓娉曞€紁refers-reduced-motion锛歳educe銆傚惎鐢ㄨ繖鏉¤鍒欏悗锛屽氨鐩稿綋浜庡憡璇夌敤鎴蜂唬鐞嗕粬鎯崇湅鐨勯〉闈紝鍙互鍘绘帀鎴栬€呮浛鎹竴浜涘鏌愪簺瑙嗛殰浜哄＋鏉ヨ鍙兘涓嶈垝鏈嶇殑鍔ㄧ敾绫诲瀷銆傝鑼冪殑鍘熷鏂囨湰锛氳〃绀虹敤鎴峰凡閫氱煡绯荤粺浠栦滑鏇村枩娆竴涓晫闈紝璇ョ晫闈㈠彲浠ュ垹闄ゆ垨鏇挎崲鍩轰簬杩愬姩鐨勫姩鐢荤被鍨嬶紝杩欎簺鍔ㄧ敾浼氬紩鍙戝墠搴繍鍔ㄩ殰纰嶆偅鑰呯殑涓嶉€傘€傚墠搴繍鍔ㄩ殰纰嶆槸涓€绉嶅彲寮曡捣鐪╂檿鐨勭柧鐥呫€備緥濡傦紝涓€涓姩鐢绘瘡绉掗棯鐑佸娆★紝杩欎細缁欐偅鑰呭甫鏉ヤ笉閫傘€備娇鐢ㄦ柟娉曡繕鏄笂闈㈢殑浠ｇ爜锛?ele{animation:aniName5sinfinitelinear;}@media(prefers-reduced-motion:reduce){.ele{animation:none;濡傛灉鎴戜滑鏈夎繖鏍风殑鍔ㄧ敾锛氬綋鐢ㄦ埛鎵撳紑prefers-reduced-motion:reduce鏃讹紝杩欎釜鍔ㄧ敾搴旇琚Щ闄ゃ€備笂闈eset涓殑浠ｇ爜鏄敤鏉ュ湪鐢ㄦ埛寮€鍚浉搴旈€夐」鏃讹紝寮卞寲椤甸潰涓婄殑鎵€鏈夊姩鐢绘晥鏋溿€傝繖鏄鍙闂€х殑鑰冭檻銆傜粨鍚堝疄闄呯幆澧冨綋鐒讹紝缁撳悎瀹為檯鐜锛岀洰鍓嶅浗鍐呮€讳綋涓婂鏃犻殰纰嶇浉鍏崇殑鍐呭鍏虫敞搴︿笉楂樸€傝€屼笖寰堝鍟嗗鏍规湰鏃犳硶鑸嶅純涓€浜涜€佹祻瑙堝櫒锛屼粛鐒堕渶瑕佸吋瀹笽E绯诲垪銆傛墍浠ュ浜庣幇闃舵鐨凴eset瑙ｅ喅鏂规锛屽彲浠ョ伒娲绘惌閰嶏細濡傛灉浣犵殑涓氬姟鍦烘櫙杩樻槸闇€瑕佽€冭檻涓€浜涜€佹祻瑙堝櫒锛岃繕鏄渶瑕佸吋瀹笽E绯诲垪锛孨ormalize.css鐨勫ぇ閮ㄥ垎鍔熻兘杩樻槸寰堜笉閿欑殑濂界殑閫夋嫨銆傚鏋滀綘鐨勪笟鍔″満鏅彧鍏虫敞Chrome鎴朇hromium鍐呮牳銆侼ormalize.css涓殑寰堝鍐呭瀹為檯涓婂彲鑳芥槸鍏煎鐨勬敼缂栵紝鍦ㄥ疄璺典腑姘歌繙涓嶄細閬囧埌鎴栦娇鐢ㄣ€傚彲浠ヨ繘琛屽繀瑕佺殑绮剧畝銆傚鏋滀綘鐨勪笟鍔℃槸鍏ㄧ悆鍖栫殑锛岄潰鍚戠殑鐢ㄦ埛涓嶄粎鍦ㄤ腑鍥斤紝浣犲簲璇ュ紑濮嬭€冭檻鏇村涓庢棤闅滅鐩稿叧鐨勫唴瀹广€備笂闈㈡彁鍒扮殑ModernCSSReset鍙互鍙傝€冦€傚洜姝わ紝鏍规嵁瀹為檯涓氬姟闇€姹傚惛绾冲涓涓氬簲璇ユ槸姣旇緝閫氱敤/鐭ュ悕鐨勩€傞噸缃柟妗堥€傚悎鑷繁鐨勪笟鍔°€備笅闈㈡槸涓€浜涙瘮杈冨父瑙佸拰鐜颁唬鐨凜SSReset鏂规锛歊esetSchemeGithubStars鏁扮畝浠媙ormalize.cssCSSReset鐨勭幇浠ｆ浛浠ｆ柟妗?7.1Ksanitize.css鎻愪緵涓€鑷寸殑銆佽法娴忚鍣ㄧ殑HTML鍏冪礌榛樿鏍峰紡鍜屾湁鐢ㄧ殑榛樿鏍峰紡4.8Kreseter.cssNormalizeFutureAlternativesto.cssandCSSReset981Modern-CSS-Reset灏忚€岀編锛岄噸缃悎鐞嗛粯璁ゅ€肩殑鐜颁唬CSSReset瑙ｅ喅鏂规2.4K浣犱細鐪嬪埌澶у閮藉彿绉版槸鐜颁唬CSSReset瑙ｅ喅鏂规锛屼絾瀹為檯涓婇噷闈㈠仛浜嗗緢澶歊eset宸ヤ綔鑰屾槸鎴戜滑鏍规湰涓嶉渶瑕佸畠銆傛湁鐨勪汉鍠滄灏忚€岀編锛屾湁鐨勪汉鍠滄澶ц€屽叏锛屽湪瀹為檯浣跨敤涓紝闇€瑕佸叿浣撻€夋嫨锛屾渶濂界粨鍚堥瓟鍙樼粍鍚堟垚閫傚悎鑷繁鐨勩€傛渶鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
