20绉嶉槻寰℃€SS澶勭悊鏂规硶锛岀粏鑺傚緢甯歌锛屽鐞嗘柟娉曞鏄撹蹇借涓€浜涗繚鎶ゆ€у鐞嗘柟娉曪紝閬垮厤椤甸潰甯冨眬涓婄殑閿欎綅銆備竴浜汣SS灞炴€ц繕鏄緢鏅€氱殑锛屼絾鏄劅瑙夌粏鑺傜殑鎶婃帶鐪熺殑寰堝ソ銆傚師鏂囧緢闀匡紝鎽樺彇閮ㄥ垎鍐呭绠€鍗曞垎浜€傚畠涓嶆槸鍘熸枃鐨勭炕璇戙€傚浘鐗囧拰浠ｇ爜鍧囨潵鑷師鏂囥€傝鎯呰鏌ョ湅鍘熸枃銆傚師鏂囧湴鍧€锛歨ttps://ishadeed.com/article/defensive-css/鐩綍flexboxcontentlinewrapspacinglongtextcontent闃叉鍥剧墖琚媺浼告垨鍘嬬缉lockscrollinglinksCSSvariablefallbackusefixedwidthorheightbackground-repeatignoredMediaqueries瀵逛簬鍨傜洿鏂瑰悜锛屼娇鐢╦ustify-content:space-betweentextonimages鍦–SSgrid涓娇鐢ㄥ浐瀹氬€兼敞鎰忎粎鍦ㄩ渶瑕佹椂鏄剧ず婊氬姩鏉crollbarsgutterCSSgrid涓瑿SSflexbox涓殑鏈€灏忓唴瀹瑰ぇ灏廸illimageMaximumwidthPosition:stickycssgridgroupingselectorcontentflexboxcontentwrapping褰撴垜浠娇鐢╢lexbox甯冨眬鏃讹紝榛樿鎯呭喌涓嬶紝褰撳鍣ㄧ殑瀹藉害涓嶅鏃讹紝鍙兘浼氬嚭鐜拌繖绉嶆儏鍐点€傝繖涓昏鏄洜涓篺lex-wrap鐨勯粯璁ゅ€兼槸nowrap锛屾墍浠ユ垜浠渶瑕佽繖鏍锋敼鍊笺€?options-list{鏄剧ず锛歠lex锛沠lex-wrap:wrap;}Spacing鍦ㄨ璁″笀鎻愪緵鐨勮璁＄涓紝鏋佺鎯呭喌涓嬪緢瀹规槗蹇界暐鏂囧瓧涓庡叾浠栧厓绱犱箣闂寸殑闂磋窛銆傛渶鍚庯紝鍙兘浼氬嚭鐜拌繖鏍风殑鎯呭喌銆傛枃鏈綅浜庡浘鏍囨梺杈广€傚鐞嗚繖绉嶆儏鍐甸渶瑕佽€冭檻鏄湪鏂囧瓧閮ㄥ垎杩樻槸鍥炬爣閮ㄥ垎锛屽垎鏋愬疄闄呮儏鍐靛悗閫夋嫨澧炲姞杈硅窛鍊兼潵澧炲姞闂磋窛銆?section__title{margin-right:1rem;}浣嗘槸锛岃繖绉嶆儏鍐典笅锛屾垜涓€鑸細鑰冭檻鍦╥con涓婂姞涓妋argin-left锛岃繖鏍峰湪娌℃湁icon鐨勬儏鍐典笅锛屾枃鏈粛鐒跺彲浠ュ埌杈惧鍣ㄧ殑杈圭紭銆傞暱鏂囨湰鍐呭绠€鍗曘€傝繖鏄鐞嗗お闀挎枃鏈殑鏂规硶銆備竴鑸互鎹㈣鎴栨埅鏂拰....鐨勫舰寮忓嚭鐜般€傝嚦浜庨€夋嫨鍝鏂瑰紡锛屽彇鍐充簬褰撳墠椤甸潰妯″潡鐨勮璁￠鏍笺€傝繖绡囨枃绔犵殑澶勭悊鏂瑰紡鏄埅鏂帀...杩欑銆?username{white-space:nowrap;婧㈠嚭锛氶殣钘忥紱text-overflow:ellipsis;}闃叉鍥惧儚琚媺浼告垨鍘嬬缉銆傝繖绉嶆儏鍐典竴鑸槸鐢ㄦ埛涓婁紶鐨勫浘鐗囷紝鎴栬€呮病鏈夋寜鐓ц瀹氱殑姣斾緥浣跨敤鍥剧墖閫犳垚鐨勩€傚鐞嗘柟娉曟槸鐩存帴浣跨敤object-fit灞炴€э細.card__thumb{object-fit:cover;}閿佸畾婊氬姩閾炬帴鐨勪富瑕佹儏鍐垫槸鍦ㄩ〉闈㈢偣鍑绘ā鎬佸脊灞傛椂锛岄〉闈㈠唴瀹规湰韬緢闀裤€?modal__content{overscroll-behavior-y:contain;overflow-y:auto;}overscroll-behavior寰堝ソ锛屼絾鐩墠瀛樺湪寰堝ぇ鐨勫吋瀹规€ч棶棰樸€侰SS鍙橀噺鍥為€€杩欎釜CSS鍙橀噺鍥為€€锛岃鐧戒簡灏辨槸鐢ㄤ竴涓€滃畨鍏ㄥ€尖€濇潵淇濊瘉褰揅SS鍙橀噺鍊兼棤鏁堟椂锛屾煇涓睘鎬у€间粛鐒跺彲鐢ㄣ€?message__bubble{max-width:calc(100%-var(--actions-width,70px));}涓嶈繃鑰冭檻鍒板皬鏅哄仛鐚庡ご涔嬪墠鏄€庝箞鍐欏墠绔〉闈㈢殑锛屽彲鑳借繕瑕佽€冭檻娴忚鍣ㄧ殑var()鍏煎鎬ч棶棰橈紝鐒跺悗灏嗘坊鍔犱竴涓檮鍔犲睘鎬с€備笉杩囦粠鐜板湪鐨勬祻瑙堝櫒鏉ョ湅锛岃繖涓棶棰樹技涔庡苟涓嶆櫘閬嶅瓨鍦ㄣ€?message__bubble{鏈€澶у搴︼細70px锛沵ax-width:var(--actions-width,70px);}浣跨敤鍥哄畾鐨勫楂樻病浠€涔堝ソ璇寸殑锛屼富瑕佹槸淇濇姢鍐呭鍦ㄨ繃闀縨easure鏃舵孩鍑哄鍣ㄣ€傛瘮濡傛垜浠浐瀹氶珮搴︿负350px锛屽唴瀹瑰お闀垮氨浼氭孩鍑恒€傝€屽鏋滄垜浠妸height鎹㈡垚min-height锛岄偅涔堟儏鍐靛氨涓嶄竴鏍蜂簡銆傚悓鐞嗭紝瀹藉害鐨勫鐞嗕篃鏄竴鏍风殑銆傚綋蹇界暐background-repeat鏃讹紝鍦ㄤ娇鐢ㄨ儗鏅浘鐗囨椂锛屽鏋滀笉鍔爊o-repeat锛岃儗鏅浘鐗囬粯璁や細琚帇骞炽€傛墍浠ラ殢渚垮姞涓猲o-repeat杩樻槸涓ソ涔犳儻锛岄櫎闈炰綘鐭ラ亾鑳屾櫙鍥句細涓嶄細骞抽摵銆?hero{鑳屾櫙鍥剧墖锛歶rl('..');background-repeat:no-repeat;}鍨傜洿鏂瑰悜鐨勫獟浣撴煡璇㈣繖涓満鏅皬鏅虹洰鍓嶅湪椤甸潰涓婅繕娌℃湁鐪嬪埌杩囷紝鍑虹幇鍦ㄤ腑鍚庡彴椤甸潰鐨勬鐜囦竴鑸兘鏈夊緢澶氾紝姣斿浣滆€呮彁渚涚殑椤甸潰鏁堟灉銆傚乏涓嬭鎸塸osition瀹氫綅锛歴ticky锛沵aybefixed涔熸槸涓€鏍风殑锛屽綋娴忚鍣ㄧ殑楂樺害鍙樺皬鐨勬椂鍊欙紝浼氬彔鍔犲湪宸﹁竟瀵艰埅鐨勪笂闈€傛樉鐒讹紝杩欐牱鐨勯〉闈㈡晥鏋滄槸閿欒鐨勩€傝€屽鏋滄鏃堕〉闈㈢殑楂樺害鏄敱@media鍒ゆ柇鐨勶紝鎴戜滑鍙厑璁稿乏涓嬭鍦ㄦ煇涓畨鍏ㄥ尯鍩熷閫氳繃sticky瀹氫綅銆侤media(min-height:600px){.aside__secondary{position:sticky;搴曢儴锛?锛泒}Usingjustify-content:space-between鍘熸枃杩欓儴鍒嗙殑鏍囬鏄疷singJustify-Content:Space-Between锛屼笉杩囩湅璧锋潵鏇村簲璇ユ槸Usinggap銆備娇鐢ㄤ粈涔堟爣棰樹笉鏄叧閿€傝繖閮ㄥ垎涓昏鎻愬埌鍦ㄤ娇鐢╦ustify-content:space-between;鏃讹紝濡傛灉鍏冪礌涓嶅澶氾紝鍏冪礌涔嬮棿鐨勭┖闂翠細琚媺闀匡紝鍥犱负鍏冪礌涔嬮棿鐨勭┖闂村簲璇ユ槸鍧囧寑鍒嗗竷鐨勩€傛瘮濡傛垜鏈潵鎯宠杩欐牱鐨勬晥鏋滐紝闂磋窛鐨勫€兼槸鍥哄畾鐨勶細褰撳厓绱犳暟閲忚冻澶熺殑鏃跺€欙紝鍏冪礌涔嬮棿鐨勯棿璺濊繕鏄瘮杈冪悊鎯崇殑锛岄€氳繃涓嬮潰鐨凜SS澶勭悊鏂瑰紡锛氬脊鎬у寘瑁咃細鍖呰锛沯ustify-content:space-between;}浣嗘槸锛屽綋鍏冪礌涓暟鎬绘槸涓嶅鐨勬椂鍊欙紝灏变細鍙樻垚杩欐牱銆傚彲浠ョ湅鍑猴紝鍏跺疄鎴戜滑骞朵笉甯屾湜鍒嗗竷鍧囧寑锛屽彧鏄笇鏈涘厓绱犱箣闂寸殑闂磋窛鍦ㄦ渶澶ч檺鍒跺拰鍐呭涓嶈冻鐨勬儏鍐典笅鍙帶銆備竴鑸潵璇达紝澶勭悊杩欎釜鐨勬柟娉曡繕鏄尯澶氱殑锛宮argin涔嬬被鐨勪篃鍙互鐢ㄦ潵澶勭悊銆備笉杩囩洰鍓嶆湁涓€涓樊璺濅笉鏄緢鍏煎锛屽彲浠ュ畬缇庤В鍐宠繖涓棶棰樸€?wrapper{鏄剧ず锛歠lex;寮规€у寘瑁咃細鍖呰锛沢ap:1rem;}鍥剧墖涓婄殑鏂囧瓧鏄敤鎴蜂綋楠屼腑鐨勭粏鑺傚鐞嗛棶棰樸€傚鏋滃浘鐗囦笂鏈夋枃瀛楋紝浣嗘槸鍥剧墖娌℃湁鍔犺浇鎴栬€呭姞杞藉け璐ワ紝娣诲姞鑳屾櫙鑹诧紝淇濊瘉鍥剧墖鍔犺浇澶辫触鏃惰兘澶熷尯鍒嗘枃瀛楀拰鑳屾櫙銆傚湪CSS缃戞牸涓娇鐢ㄥ浐瀹氬€肩殑鏃跺€欙紝闇€瑕佹敞鎰忕殑鏄紝grid缃戞牸甯冨眬鐜板湪鎱㈡參鍙楀埌閲嶈銆俫rid鍜宖lex閮藉彲浠ュ仛鑷€傚簲鏁堟灉锛屼篃鍙互鐢ㄥ浐瀹氬€笺€備娇鐢ㄥ浐瀹氬€兼椂锛屾渶濂介€氳繃@media鍒ゆ柇瀹藉害锛屾柟渚挎弧瓒虫渶灏忓搴︽椂鐨勫鐞嗐€侤media(min-width:600px){.wrapper{鏄剧ず锛氱綉鏍硷紱缃戞牸妯℃澘鍒楋細250px1fr锛涢棿闅欙細1rem锛泒}鐒惰€岋紝鍦ㄨ繖绉嶆儏鍐典笅锛岄〉闈㈠竷灞€鍙兘浼氱洿鎺ユ敼鍙樸€傛媴蹇冭繖涓槸涓嶅繀瑕佺殑銆傛垨鑰呬富瑕佹槸鍥犱负浠栦箣鍓嶉亣鍒扮殑鍦烘櫙锛屾垜娌℃湁閬囧埌杩囥€傚彧鍦ㄩ渶瑕佺殑鏃跺€欐墠鏄剧ず婊氬姩鏉℃病浠€涔堝ソ璇寸殑銆備竴鑸ぇ瀹堕兘鎶妔croll璁剧疆鎴恆uto銆備絾鏄紝鍦ㄤ釜鍒儏鍐典笅锛屾auto鍙兘浼氫娇鍏冪礌鐨勫搴﹀彉灏忥紝浠庤€屽鑷村唴瀹规垨甯冨眬鍑虹幇灏忕憰鐤点€?element{overflow-y:auto;}婊氬姩鏉＄粦瀹氱嚎杩欎釜鎵€璋撶殑缁戝畾绾夸富瑕佹槸scrollbar-gutter灞炴€э紝涓烘粴鍔ㄦ潯棰勭暀绌洪棿銆備笂闈verflow渚嬪瓙涓彁鍒帮紝濡傛灉璁剧疆涓篴uto锛屽彲鑳戒細瀵艰嚧椤甸潰甯冨眬鍑虹幇鎰忓锛岄偅涔坰crollbar-gutter灏卞彲浠ュ鐞嗚繖涓棶棰樸€傚吋瀹规€т粛鐒舵槸涓€涓棤娉曞洖閬跨殑璇濋銆傚亣璁句笉鑰冭檻鍏煎鎬ч棶棰橈紝閭ｄ箞鎴戜滑鍙互浣跨敤杩欑鏂规硶鏉ヤ负婊氬姩鏉￠鐣欑┖闂淬€?element{scrollbar-gutter:stable;}CSSflexbox涓殑鏈€灏忓唴瀹瑰昂瀵稿湪浣跨敤flex甯冨眬鏃讹紝寰堟湁鍙兘鍏朵腑涓€椤圭殑鏂囨湰鍐呭寰堥暱锛屾渶缁堝鑷存病鏈夋崲琛屾孩鍑哄鍣ㄣ€傝繖绉嶆儏鍐典笉鏄涓嶅彲鑳斤紝灏辩畻overflow-wrap:break-word;浣跨敤浜嗭紝涓嶄細鐢熸晥锛屾墍浠ラ渶瑕佸姞涓妋in-width:0;杩欎釜鏃跺€欏幓澶勭悊銆?card__title{overflow-wrap:break-word;min-width:0;}瀵逛簬杩欎竴鐐癸紝灏忔櫤蹇冮噷鏈変釜鐤戞儜锛屼负浠€涔堣鑰冭檻鐢╫verflow-wrap鑰屼笉鏄痺ord-wrap鎴栬€厀ord-break锛燂紵瀵规瘮demo鍚庡彂鐜帮紝word-break鐨勬晥鏋滐細break-word;鍜屼笂闈㈢殑渚嬪瓙涓€鏍凤紝鍙槸浠巜ordbreak鐨刣emo鏁堟灉鏉ョ湅銆備絾鏄粠MDN瀵硅繖涓や釜灞炴€х殑浠嬬粛鏉ョ湅锛岃繕鏄湁鍖哄埆鐨勩€倃ord-breakTheword-breakCSS灞炴€ц缃崲琛岀鏄惁鍑虹幇鍦ㄦ枃鏈孩鍑哄叾鍐呭妗嗙殑浠讳綍鍦版柟銆俹verflow-wrapTheoverflow-wrapCSS灞炴€ч€傜敤浜庡唴鑱斿厓绱狅紝璁剧疆娴忚鍣ㄦ槸鍚﹀簲璇ユ彃鍏ユ崲琛岀锛屽惁鍒欐湁寮规€trunning闃绘婧㈠嚭鍏惰妗嗙殑鏂囨湰銆侰SSgrid涓殑鏈€灏忓唴瀹瑰昂瀵镐笌flexbox绫讳技锛孋SSgrid鐨勫瓙椤规湁涓€涓粯璁ょ殑鏈€灏忓唴瀹瑰昂瀵革紝涔熷氨鏄痑uto锛屼篃灏辨槸璇达紝濡傛灉鏈夊厓绱犲ぇ浜巊riditem锛屽畠灏变細婧㈠嚭銆侤media(min-width:1020px){.wrapper{鏄剧ず锛氱綉鏍硷紱缃戞牸妯℃澘鍒楋細1fr248px锛涚綉鏍奸棿闅欙細40px锛泒}.carousel{鏄剧ず锛歠lex;overflow-x:auto;}forgrid鎴戝grid鐨勪簡瑙ｈ繕涓嶅锛屾墍浠ュ氨鎸夌収浣滆€呯殑鎬濊矾锛屽皢grid-template-columns鐨勫€兼敼涓猴細minmax(0,1fr)248px寰楀埌濡備笅鏁堟灉.鑷姩閫傞厤鍜岃嚜鍔ㄥ～鍏呭綋鏃剁湅鏁堟灉鍥剧殑鏃跺€欒繕浠ヤ负鏄痜lex甯冨眬涓殑鎯呭喌锛岀粨鏋滃彂鐜版槸grid缃戞牸甯冨眬涓娇鐢ㄧ殑鎯呭喌銆傚湪浣跨敤grid甯冨眬鐨勬椂鍊欙紝濡傛灉杩欐牱鍐欙紝骞朵笖浣跨敤auto-fit锛屽氨浼氬嚭鐜颁笂闈㈢殑鏁堟灉銆傚綋椤圭洰涓嶅鏃讹紝瀹冧細琚媺浼搞€?wrapper{鏄剧ず锛氱綉鏍硷紱grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;}鑰屽鏋滄敼鎴恆uto-fill锛屼細鏈夊涓嬫晥鏋溿€傚叧浜巃uto-fit鍜宎uto-fill鐨勫尯鍒紝澶у鍙互鐪嬭繖寮犲浘銆備綔鑰呭湪reset閮ㄥ垎寤鸿鍙互灏嗗浘鐗囩殑鏈€澶у搴﹁缃负img鐨勬渶澶у搴︼紝浣嗘槸娌℃湁璇翠负浠€涔堛€傛垜涓汉鐨勭寽娴嬫槸鑰冭檻鍒板浘鐗囧湪瀹瑰櫒涓殑鏄剧ず锛岃繕鏈変竴涓猳bject-fit灞炴€с€傪煒唅mg{鏈€澶у搴︼細100%锛沷bject-fit:cover;}position:stickycssgrid鍦ㄤ娇鐢–SSgrid甯冨眬鏃讹紝濡傛灉瀛愬厓绱犱娇鐢╬osition:sticky锛岀敱浜巊rid瀛愬厓绱犻粯璁ゅ榻愭柟寮忔槸stretch锛屾墍浠ヤ細琚媺浼搞€傚叾瀹炴垜浠兂瑕佺殑鏄乏渚ц竟鏍忎笉琚媺浼革紝鎵€浠ユ垜浠渶瑕侀€氳繃align-self:start;鏀瑰彉瀛愬厓绱犳湰韬殑瀵归綈鏂瑰紡銆俛side{align-self:寮€濮?瀹氫綅锛氱矘鎬э紱top:1rem;}鍦ㄨ繖绉嶆儏鍐典笅锛屾晥鏋滀細鏈夋墍涓嶅悓銆傜粡杩囩畝鍗曠殑娴嬭瘯锛屽湪flex甯冨眬涓篃鏄姝わ紝涓昏鏄瓙鍏冪礌琚媺浼哥殑鐗规€с€侴roupselector/*Don'tdothis,please*/input::-webkit-input-placeholder,input:-moz-placeholder{color:#222;}鐜板湪鍐機SS鐨勬椂鍊欙紝鍩烘湰涓嶄細鍐欏甫鍓嶇紑鐨勫睘鎬э紝浣嗘槸鐢辨瀯寤哄伐鍏疯嚜鍔ㄥ畬鎴愩€傛墍浠ユ垜閫氬父涓嶅叧蹇冭繖涓€傛寜鐓т綔鑰呯殑璇存硶锛屽鏋滆繖涓や釜鍐欏湪涓€璧凤紝鏁翠釜瑙勫垯灏变細澶辨晥锛屾墍浠ュ缓璁垎寮€鍐欍€俰nput::-webkit-input-placeholder{color:#222;}input:-moz-placeholder{color:#222;}鏈€鍚庯紝涓婇潰鐨勫唴瀹瑰叾瀹炴槸姣旇緝绠€鍗曞拰鍒濈骇鐨勫唴瀹癸紝浣嗘槸鍦ㄦ棩甯哥殑寮€鍙戣繃绋嬩腑锛屼竴浜涘CSS鐨勫叧娉ㄧ‘瀹炶繕涓嶅埌浣嶃€傛瘯绔熸湁浜涘唴瀹瑰お璇︾粏浜嗐€?/p>
