牛笔了！字节跳动大佬整理：CSS 核心知识（万字长文，值得收藏！）

鏈瘒鏂囩珷鍥寸粫浜?CSS 鐨勬牳蹇冪煡璇嗙偣鍜岄」鐩腑甯歌鐨勯渶姹傛潵灞曞紑銆傝櫧鐒惰鏂囧亸闀匡紝浣嗚緝鍩虹锛岄€傚悎鍒濈骇涓骇鍓嶇闃呰锛岄槄璇荤殑鏃跺€欒閫傚綋璺宠繃宸茬粡鎺屾彙鐨勯儴鍒嗐€?/p>

杩欑瘒鏂囩珷鏂柇缁画鍐欎簡姣旇緝涔咃紝涔熷弬鑰冧簡璁稿浼樼鐨勬枃绔狅紝浣嗘垨璁告枃绔犻噷杩樻槸瀛樺湪涓嶅ソ鎴栦笉瀵圭殑鍦版柟锛岃澶氬鎸囨暀锛屽彲浠ヨ瘎璁洪噷鐩存帴鎻愬嚭鏉ュ搱銆?/p>

灏弔ip锛氬悗缁唴瀹规洿绮惧僵鍝︺€?/p>

鏍稿績姒傚康鍜岀煡璇嗙偣

璇硶

CSS 鐨勬牳蹇冨姛鑳芥槸灏?CSS 灞炴€ц瀹氫负鐗瑰畾鐨勫€笺€備竴涓睘鎬т笌鍊肩殑閿€煎琚О涓?strong>澹版槑锛坉eclaration锛夈€?/p>

color: red;
澶嶅埗浠ｇ爜

鑰屽鏋滃皢涓€涓垨鑰呭涓０鏄庣敤 {} 鍖呰９璧锋潵鍚庯紝閭ｅ氨缁勬垚浜嗕竴涓?strong>澹版槑鍧?/strong>锛坉eclaration block锛夈€?/p>

{
    color: red;
    text-align: center;
}
澶嶅埗浠ｇ爜

澹版槑鍧楀鏋滈渶瑕佷綔鐢ㄥ埌瀵瑰簲鐨?HTML 鍏冪礌锛岄偅杩橀渶瑕佸姞涓?strong>閫夋嫨鍣?/strong>銆傞€夋嫨鍣ㄥ拰澹版槑鍧楃粍鎴愪簡CSS 瑙勫垯闆?/strong>锛圕SS ruleset锛夛紝甯哥畝绉颁负 CSS 瑙勫垯銆?br>

span {
    color: red;
    text-align: center;
}
澶嶅埗浠ｇ爜

瑙勫垯闆嗕腑鏈€鍚庝竴鏉″０鏄庡彲浠ョ渷鐣ュ垎鍙凤紝浣嗘槸骞朵笉寤鸿杩欎箞鍋氾紝鍥犱负瀹规槗鍑洪敊銆?/p>

CSS 涓殑娉ㄩ噴锛?/p>

/* 鍗曡娉ㄩ噴 */

/*
    澶氳
    娉ㄩ噴
*/
澶嶅埗浠ｇ爜

鍦?CSS 鏂囦欢涓紝闄や簡娉ㄩ噴銆丆SS 瑙勫垯闆嗕互鍙?@瑙勫垯 澶栵紝瀹氫箟鐨勪竴浜涘埆鐨勪笢瑗块兘灏嗚娴忚鍣ㄥ拷鐣ャ€?/p>

@瑙勫垯

CSS 瑙勫垯鏄牱寮忚〃鐨勪富浣擄紝閫氬父鏍峰紡琛ㄤ細鍖呮嫭澶ч噺鐨勮鍒欏垪琛ㄣ€備絾鏈夋椂鍊欎篃闇€瑕佸湪鏍峰紡琛ㄤ腑鍖呮嫭鍏朵粬鐨勪竴浜涗俊鎭紝姣斿瀛楃闆嗭紝瀵煎叆鍏跺畠鐨勫閮ㄦ牱寮忚〃锛屽瓧浣撶瓑锛岃繖浜涢渶瑕佷笓闂ㄧ殑璇彞琛ㄧず銆?/p>

鑰?@瑙勫垯 灏辨槸杩欐牱鐨勮鍙ャ€侰SS 閲屽寘鍚簡浠ヤ笅 @瑙勫垯锛?/p>

• @namespace 鍛婅瘔 CSS 寮曟搸蹇呴』鑰冭檻XML鍛藉悕绌洪棿銆?/li>
• @media, 濡傛灉婊¤冻濯掍綋鏌ヨ鐨勬潯浠跺垯鏉′欢瑙勫垯缁勯噷鐨勮鍒欑敓鏁堛€?/li>
• @page, 鎻忚堪鎵撳嵃鏂囨。鏃跺竷灞€鐨勫彉鍖?
• @font-face, 鎻忚堪灏嗕笅杞界殑澶栭儴鐨勫瓧浣撱€?/li>
• @keyframes, 鎻忚堪 CSS 鍔ㄧ敾鐨勫叧閿抚銆?/li>
• @document, 濡傛灉鏂囨。鏍峰紡琛ㄦ弧瓒崇粰瀹氭潯浠跺垯鏉′欢瑙勫垯缁勯噷鐨勮鍒欑敓鏁堛€?(鎺ㄥ欢鑷?CSS Level 4 瑙勮寖)

闄や簡浠ヤ笂杩欏嚑涓箣澶栵紝涓嬮潰杩樺皢瀵瑰嚑涓瘮杈冪敓娑╃殑 @瑙勫垯 杩涜浠嬬粛銆?/p>

@charset

@charset 鐢ㄤ簬瀹氫箟鏍峰紡琛ㄤ娇鐢ㄧ殑瀛楃闆嗐€傚畠蹇呴』鏄牱寮忚〃涓殑绗竴涓厓绱犮€傚鏋滄湁澶氫釜 @charset 琚０鏄庯紝鍙湁绗竴涓細琚娇鐢紝鑰屼笖涓嶈兘鍦℉TML鍏冪礌鎴朒TML椤甸潰鐨?<style> 鍏冪礌鍐呬娇鐢ㄣ€?/p>

娉ㄦ剰锛氬€煎繀椤绘槸鍙屽紩鍙峰寘瑁癸紝涓斿拰

@charset "UTF-8";
澶嶅埗浠ｇ爜

骞虫椂鍐欐牱寮忔枃浠堕兘娌″啓 @charset 瑙勫垯锛岄偅杩欎釜 CSS 鏂囦欢鍒板簳鏄敤鐨勪粈涔堝瓧绗︾紪鐮佺殑鍛紵

鏌愪釜鏍峰紡琛ㄦ枃浠跺埌搴曠敤鐨勬槸浠€涔堝瓧绗︾紪鐮侊紝娴忚鍣ㄦ湁涓€濂楄瘑鍒『搴忥紙浼樺厛绾х敱楂樺埌浣庯級锛?/p>

• 鏂囦欢寮€澶寸殑 Byte order mark 瀛楃鍊硷紝涓嶈繃涓€鑸紪杈戝櫒骞朵笉鑳界湅鍒版枃浠跺ご閲岀殑 BOM 鍊硷紱

• HTTP 鍝嶅簲澶撮噷鐨?content-type 瀛楁鍖呭惈鐨?charset 鎵€鎸囧畾鐨勫€硷紝姣斿锛?/p>

  Content-Type: text/css; charset=utf-8
  澶嶅埗浠ｇ爜
  

• CSS 鏂囦欢澶撮噷瀹氫箟鐨?@charset 瑙勫垯閲屾寚瀹氱殑瀛楃缂栫爜锛?/p>

• <link> 鏍囩閲岀殑 charset 灞炴€э紝璇ユ潯宸插湪 HTML5 涓簾闄わ紱

• 榛樿鏄?UTF-8銆?/p>

@import

@import 鐢ㄤ簬鍛婅瘔 CSS 寮曟搸寮曞叆涓€涓閮ㄦ牱寮忚〃銆?/p>

link 鍜?@import 閮借兘瀵煎叆涓€涓牱寮忔枃浠讹紝瀹冧滑鏈変粈涔堝尯鍒槢锛?/p>

• link 鏄?HTML 鏍囩锛岄櫎浜嗚兘瀵煎叆 CSS 澶栵紝杩樿兘瀵煎叆鍒殑璧勬簮锛屾瘮濡傚浘鐗囥€佽剼鏈拰瀛椾綋绛夛紱鑰?@import 鏄?CSS 鐨勮娉曪紝鍙兘鐢ㄦ潵瀵煎叆 CSS锛?/li>
• link 瀵煎叆鐨勬牱寮忎細鍦ㄩ〉闈㈠姞杞芥椂鍚屾椂鍔犺浇锛孈import 瀵煎叆鐨勬牱寮忛渶绛夐〉闈㈠姞杞藉畬鎴愬悗鍐嶅姞杞斤紱
• link 娌℃湁鍏煎鎬ч棶棰橈紝@import 涓嶅吋瀹?ie5 浠ヤ笅锛?/li>
• link 鍙互閫氳繃 JS 鎿嶄綔 DOM 鍔ㄦ€佸紩鍏ユ牱寮忚〃鏀瑰彉鏍峰紡锛岃€孈import涓嶅彲浠ャ€?/li>

@supports

@supports 鐢ㄤ簬鏌ヨ鐗瑰畾鐨?CSS 鏄惁鐢熸晥锛屽彲浠ョ粨鍚?not銆乤nd 鍜?or 鎿嶄綔绗﹁繘琛屽悗缁殑鎿嶄綔銆?/p>

/* 濡傛灉鏀寔鑷畾涔夊睘鎬э紝鍒欐妸 body 棰滆壊璁剧疆涓哄彉閲?varName 鎸囧畾鐨勯鑹?*/
@supports (--foo: green) {
    body {
        color: var(--varName);
    }
}
澶嶅埗浠ｇ爜

灞傚彔鎬?/h3>

灞傚彔鏍峰紡琛紝杩欓噷鐨勫眰鍙犳€庝箞鐞嗚В鍛紵鍏跺疄瀹冩槸 CSS 涓殑鏍稿績鐗规€т箣涓€锛岀敤浜庡悎骞舵潵鑷涓簮鐨勫睘鎬у€肩殑绠楁硶銆傛瘮濡傝閽堝鏌愪釜 HTML 鏍囩锛屾湁璁稿鐨?CSS 澹版槑閮借兘浣滅敤鍒扮殑鏃跺€欙紝閭ｆ渶鍚庤皝搴旇璧蜂綔鐢ㄥ憿锛熷眰鍙犳€ц鐨勫ぇ姒傚氨鏄繖涓€?/p>

閽堝涓嶅悓婧愮殑鏍峰紡锛屽皢鎸夌収濡備笅鐨勯『搴忚繘琛屽眰鍙狅紝瓒婂線涓嬩紭鍏堢骇瓒婇珮锛?/p>

• 鐢ㄦ埛浠ｇ悊鏍峰紡琛ㄤ腑鐨勫０鏄?渚嬪锛屾祻瑙堝櫒鐨勯粯璁ゆ牱寮忥紝鍦ㄦ病鏈夎缃叾浠栨牱寮忔椂浣跨敤)銆?/li>
• 鐢ㄦ埛鏍峰紡琛ㄤ腑鐨勫父瑙勫０鏄?鐢辩敤鎴疯缃殑鑷畾涔夋牱寮忋€傜敱浜?Chrome 鍦ㄥ緢鏃╃殑鏃跺€欏氨鏀惧純浜嗙敤鎴锋牱寮忚〃鐨勫姛鑳斤紝鎵€浠ヨ繖閲屽皢涓嶅啀鑰冭檻瀹冪殑鎺掑簭銆?銆?/li>
• 浣滆€呮牱寮忚〃涓殑甯歌澹版槑(杩欎簺鏄垜浠?Web 寮€鍙戜汉鍛樿缃殑鏍峰紡)銆?/li>
• 浣滆€呮牱寮忚〃涓殑 !important 澹版槑銆?/li>
• 鐢ㄦ埛鏍峰紡琛ㄤ腑鐨?!important 澹版槑S銆?/li>

鐞嗚В灞傚彔鎬х殑鏃跺€欓渶瑕佺粨鍚?CSS 閫夋嫨鍣ㄧ殑浼樺厛绾т互鍙婄户鎵挎€ф潵鐞嗚В銆傛瘮濡傞拡瀵瑰悓涓€涓€夋嫨鍣紝瀹氫箟鍦ㄥ悗闈㈢殑澹版槑浼氳鐩栧墠闈㈢殑锛涗綔鑰呭畾涔夌殑鏍峰紡浼氭瘮榛樿缁ф壙鐨勬牱寮忎紭鍏堢骇鏇撮珮銆?/p>

閫夋嫨鍣?/h3>

CSS 閫夋嫨鍣ㄦ棤鐤戞槸鍏舵牳蹇冧箣涓€锛屽浜庡熀纭€閫夋嫨鍣ㄤ互鍙婁竴浜涘父鐢ㄤ吉绫诲繀椤绘帉鎻°€備笅闈㈠垪鍑轰簡甯哥敤鐨勯€夋嫨鍣ㄣ€?鎯宠鑾峰彇鏇村閫夋嫨鍣ㄧ殑鐢ㄦ硶鍙互鐪?MDN CSS Selectors銆?/p>

鍩虹閫夋嫨鍣?/h4>

• 鏍囩閫夋嫨鍣細h1
• 绫婚€夋嫨鍣細.checked
• ID 閫夋嫨鍣細#picker
• 閫氶厤閫夋嫨鍣細*

灞炴€ч€夋嫨鍣?/strong>

• [attr]锛氭寚瀹氬睘鎬х殑鍏冪礌锛?/li>
• [attr=val]锛氬睘鎬х瓑浜庢寚瀹氬€肩殑鍏冪礌锛?/li>
• [attr*=val]锛氬睘鎬у寘鍚寚瀹氬€肩殑鍏冪礌锛?/li>
• [attr^=val] 锛氬睘鎬т互鎸囧畾鍊煎紑澶寸殑鍏冪礌锛?/li>
• [attr$=val]锛氬睘鎬т互鎸囧畾鍊肩粨灏剧殑鍏冪礌锛?/li>
• [attr~=val]锛氬睘鎬у寘鍚寚瀹氬€?瀹屾暣鍗曡瘝)鐨勫厓绱?涓嶆帹鑽愪娇鐢?锛?/li>
• [attr|=val]锛氬睘鎬т互鎸囧畾鍊?瀹屾暣鍗曡瘝)寮€澶寸殑鍏冪礌(涓嶆帹鑽愪娇鐢?锛?/li>

缁勫悎閫夋嫨鍣?/h4>

• 鐩搁偦鍏勫紵閫夋嫨鍣細A + B
• 鏅€氬厔寮熼€夋嫨鍣細A ~ B
• 瀛愰€夋嫨鍣細A > B
• 鍚庝唬閫夋嫨鍣細A B

浼被

鏉′欢浼被

• :lang()锛氬熀浜庡厓绱犺瑷€鏉ュ尮閰嶉〉闈㈠厓绱狅紱
• :dir()锛氬尮閰嶇壒瀹氭枃瀛椾功鍐欐柟鍚戠殑鍏冪礌锛?/li>
• :has()锛氬尮閰嶅寘鍚寚瀹氬厓绱犵殑鍏冪礌锛?/li>
• :is()锛氬尮閰嶆寚瀹氶€夋嫨鍣ㄥ垪琛ㄩ噷鐨勫厓绱狅紱
• :not()锛氱敤鏉ュ尮閰嶄笉绗﹀悎涓€缁勯€夋嫨鍣ㄧ殑鍏冪礌锛?/li>

琛屼负浼被

• :active锛氶紶鏍囨縺娲荤殑鍏冪礌锛?/li>
• :hover锛?榧犳爣鎮诞鐨勫厓绱狅紱
• ::selection锛氶紶鏍囬€変腑鐨勫厓绱狅紱

鐘舵€佷吉绫?/strong>

• :target锛氬綋鍓嶉敋鐐圭殑鍏冪礌锛?/li>
• :link锛氭湭璁块棶鐨勯摼鎺ュ厓绱狅紱
• :visited锛氬凡璁块棶鐨勯摼鎺ュ厓绱狅紱
• :focus锛氳緭鍏ヨ仛鐒︾殑琛ㄥ崟鍏冪礌锛?/li>
• :required锛氳緭鍏ュ繀濉殑琛ㄥ崟鍏冪礌锛?/li>
• :valid锛氳緭鍏ュ悎娉曠殑琛ㄥ崟鍏冪礌锛?/li>
• :invalid锛氳緭鍏ラ潪娉曠殑琛ㄥ崟鍏冪礌锛?/li>
• :in-range锛氳緭鍏ヨ寖鍥翠互鍐呯殑琛ㄥ崟鍏冪礌锛?/li>
• :out-of-range锛氳緭鍏ヨ寖鍥翠互澶栫殑琛ㄥ崟鍏冪礌锛?/li>
• :checked锛氶€夐」閫変腑鐨勮〃鍗曞厓绱狅紱
• :optional锛氶€夐」鍙€夌殑琛ㄥ崟鍏冪礌锛?/li>
• :enabled锛氫簨浠跺惎鐢ㄧ殑琛ㄥ崟鍏冪礌锛?/li>
• :disabled锛氫簨浠剁鐢ㄧ殑琛ㄥ崟鍏冪礌锛?/li>
• :read-only锛氬彧璇荤殑琛ㄥ崟鍏冪礌锛?/li>
• :read-write锛氬彲璇诲彲鍐欑殑琛ㄥ崟鍏冪礌锛?/li>
• :blank锛氳緭鍏ヤ负绌虹殑琛ㄥ崟鍏冪礌锛?/li>
• :current()锛氭祻瑙堜腑鐨勫厓绱狅紱
• :past()锛氬凡娴忚鐨勫厓绱狅紱
• :future()锛氭湭娴忚鐨勫厓绱狅紱

缁撴瀯浼被

• :root锛氭枃妗ｇ殑鏍瑰厓绱狅紱
• :empty锛氭棤瀛愬厓绱犵殑鍏冪礌锛?/li>
• :first-letter锛氬厓绱犵殑棣栧瓧姣嶏紱
• :first-line锛氬厓绱犵殑棣栬锛?/li>
• :nth-child(n)锛氬厓绱犱腑鎸囧畾椤哄簭绱㈠紩鐨勫厓绱狅紱
• :nth-last-child(n)锛氬厓绱犱腑鎸囧畾閫嗗簭绱㈠紩鐨勫厓绱狅紱锛?/li>
• :first-child 锛氬厓绱犱腑涓洪鐨勫厓绱狅紱
• :last-child 锛氬厓绱犱腑涓哄熬鐨勫厓绱狅紱
• :only-child锛氱埗鍏冪礌浠呮湁璇ュ厓绱犵殑鍏冪礌锛?/li>
• :nth-of-type(n) 锛氭爣绛句腑鎸囧畾椤哄簭绱㈠紩鐨勬爣绛撅紱
• :nth-last-of-type(n)锛氭爣绛句腑鎸囧畾閫嗗簭绱㈠紩鐨勬爣绛撅紱
• :first-of-type 锛氭爣绛句腑涓洪鐨勬爣绛撅紱
• :last-of-type锛氭爣绛句腑涓哄熬鏍囩锛?/li>
• :only-of-type锛氱埗鍏冪礌浠呮湁璇ユ爣绛剧殑鏍囩锛?/li>

浼厓绱?/h4>

• ::before锛氬湪鍏冪礌鍓嶆彃鍏ュ唴瀹癸紱
• ::after锛氬湪鍏冪礌鍚庢彃鍏ュ唴瀹癸紱

浼樺厛绾?/h3>

浼樺厛绾у氨鏄垎閰嶇粰鎸囧畾鐨?CSS 澹版槑鐨勪竴涓潈閲嶏紝瀹冪敱鍖归厤鐨勯€夋嫨鍣ㄤ腑鐨勬瘡涓€绉嶉€夋嫨鍣ㄧ被鍨嬬殑鏁板€煎喅瀹氥€備负浜嗚蹇嗭紝鍙互鎶婃潈閲嶅垎鎴愬涓嬪嚑涓瓑绾э紝鏁板€艰秺澶х殑鏉冮噸瓒婇珮锛?/p>

• 10000锛?important锛?/li>
• 01000锛氬唴鑱旀牱寮忥紱
• 00100锛欼D 閫夋嫨鍣紱
• 00010锛氱被閫夋嫨鍣ㄣ€佷吉绫婚€夋嫨鍣ㄣ€佸睘鎬ч€夋嫨鍣紱
• 00001锛氬厓绱犻€夋嫨鍣ㄣ€佷吉鍏冪礌閫夋嫨鍣紱
• 00000锛氶€氶厤閫夋嫨鍣ㄣ€佸悗浠ｉ€夋嫨鍣ㄣ€佸厔寮熼€夋嫨鍣紱

鍙互鐪嬪埌鍐呰仈鏍峰紡锛堥€氳繃鍏冪礌涓?style 灞炴€у畾涔夌殑鏍峰紡锛夌殑浼樺厛绾уぇ浜庝换浣曢€夋嫨鍣紱鑰岀粰灞炴€у€煎姞涓?!important 鍙堝彲浠ユ妸浼樺厛绾ф彁鑷虫渶楂橈紝灏辨槸鍥犱负瀹冪殑浼樺厛绾ф渶楂橈紝鎵€浠ラ渶瑕佽皑鎱庝娇鐢ㄥ畠锛屼互涓嬫湁浜涗娇鐢ㄦ敞鎰忎簨椤癸細

• 涓€瀹氳浼樺厛鑰冭檻浣跨敤鏍峰紡瑙勫垯鐨勪紭鍏堢骇鏉ヨВ鍐抽棶棰樿€屼笉鏄?!important锛?/li>
• 鍙湁鍦ㄩ渶瑕佽鐩栧叏绔欐垨澶栭儴 CSS 鐨勭壒瀹氶〉闈腑浣跨敤 !important锛?/li>
• 姘歌繙涓嶈鍦ㄤ綘鐨勬彃浠朵腑浣跨敤 !important锛?/li>
• 姘歌繙涓嶈鍦ㄥ叏绔欒寖鍥寸殑 CSS 浠ｇ爜涓娇鐢?!important锛?/li>

缁ф壙鎬?/h3>

鍦?CSS 涓湁涓€涓緢閲嶈鐨勭壒鎬у氨鏄瓙鍏冪礌浼氱户鎵跨埗鍏冪礌瀵瑰簲灞炴€ц绠楀悗鐨勫€笺€傛瘮濡傞〉闈㈡牴鍏冪礌 html 鐨勬枃鏈鑹查粯璁ゆ槸榛戣壊鐨勶紝椤甸潰涓殑鎵€鏈夊叾浠栧厓绱犻兘灏嗙户鎵胯繖涓鑹诧紝褰撶敵鏄庝簡濡備笅鏍峰紡鍚庯紝H1 鏂囨湰灏嗗彉鎴愭鑹层€?/p>

body {
    color: orange;
}
h1 {
    color: inherit;
}
澶嶅埗浠ｇ爜

璁炬兂涓€涓嬶紝濡傛灉 CSS 涓笉瀛樺湪缁ф壙鎬э紝閭ｄ箞鎴戜滑灏遍渶瑕佷负涓嶅悓鏂囨湰鐨勬爣绛鹃兘璁剧疆涓€涓?color锛岃繖鏍蜂竴鏉ョ殑鍚庢灉灏辨槸 CSS 鐨勬枃浠跺ぇ灏忓氨浼氭棤闄愬澶с€?/p>

CSS 灞炴€у緢澶氾紝浣嗗苟涓嶆槸鎵€鏈夌殑灞炴€ч粯璁ら兘鏄兘缁ф壙鐖跺厓绱犲搴斿睘鎬х殑锛岄偅鍝簺灞炴€у瓨鍦ㄩ粯璁ょ户鎵跨殑琛屼负鍛紵涓€瀹氭槸閭ｄ簺涓嶄細褰卞搷鍒伴〉闈㈠竷灞€鐨勫睘鎬э紝鍙互鍒嗕负濡備笅鍑犵被锛?/p>

• 瀛椾綋鐩稿叧锛?code>font-family銆?code>font-style銆?code>font-size銆?code>font-weight 绛夛紱
• 鏂囨湰鐩稿叧锛?code>text-align銆?code>text-indent銆?code>text-decoration銆?code>text-shadow銆?code>letter-spacing銆?code>word-spacing銆?code>white-space銆?code>line-height銆?code>color 绛夛紱
• 鍒楄〃鐩稿叧锛?code>list-style銆?code>list-style-image銆?code>list-style-type銆?code>list-style-position 绛夛紱
• 鍏朵粬灞炴€э細visibility銆?code>cursor 绛夛紱

瀵逛簬鍏朵粬榛樿涓嶇户鎵跨殑灞炴€т篃鍙互閫氳繃浠ヤ笅鍑犱釜灞炴€у€兼潵鎺у埗缁ф壙琛屼负锛?/p>

• inherit锛氱户鎵跨埗鍏冪礌瀵瑰簲灞炴€х殑璁＄畻鍊硷紱
• initial锛氬簲鐢ㄨ灞炴€х殑榛樿鍊硷紝姣斿 color 鐨勯粯璁ゅ€兼槸 #000锛?/li>
• unset锛氬鏋滃睘鎬ф槸榛樿鍙互缁ф壙鐨勶紝鍒欏彇 inherit 鐨勬晥鏋滐紝鍚﹀垯鍚?initial锛?/li>
• revert锛氭晥鏋滅瓑鍚屼簬 unset锛屽吋瀹规€у樊銆?/li>

鏂囨。娴?/h3>

鍦?CSS 鐨勪笘鐣屼腑锛屼細鎶婂唴瀹规寜鐓т粠宸﹀埌鍙炽€佷粠涓婂埌涓嬬殑椤哄簭杩涜鎺掑垪鏄剧ず銆傛甯告儏鍐典笅浼氭妸椤甸潰鍒嗗壊鎴愪竴琛屼竴琛岀殑鏄剧ず锛岃€屾瘡琛屽張鍙兘鐢卞鍒楃粍鎴愶紝鎵€浠ヤ粠瑙嗚涓婄湅璧锋潵灏辨槸浠庝笂鍒颁笅浠庡乏鍒板彸锛岃€岃繖灏辨槸 CSS 涓殑娴佸紡甯冨眬锛屽張鍙枃妗ｆ祦銆傛枃妗ｆ祦灏卞儚姘翠竴鏍凤紝鑳藉鑷€傚簲鎵€鍦ㄧ殑瀹瑰櫒锛屼竴鑸畠鏈夊涓嬪嚑涓壒鎬э細

• 鍧楃骇鍏冪礌榛樿浼氬崰婊℃暣琛岋紝鎵€浠ュ涓潡绾х洅瀛愪箣闂存槸浠庝笂鍒颁笅鎺掑垪鐨勶紱
• 鍐呰仈鍏冪礌榛樿浼氬湪涓€琛岄噷涓€鍒椾竴鍒楃殑鎺掑竷锛屽綋涓€琛屾斁涓嶄笅鐨勬椂鍊欙紝浼氳嚜鍔ㄥ垏鎹㈠埌涓嬩竴琛岀户缁寜鐓у垪鎺掑竷锛?/li>

濡備綍鑴辩鏂囨。娴佸憿锛?/strong>

鑴辨祦鏂囨。娴佹寚鑺傜偣鑴辨祦姝ｅ父鏂囨。娴佸悗锛屽湪姝ｅ父鏂囨。娴佷腑鐨勫叾浠栬妭鐐瑰皢蹇界暐璇ヨ妭鐐瑰苟濉ˉ鍏跺師鍏堢┖闂淬€傛枃妗ｄ竴鏃﹁劚娴侊紝璁＄畻鍏剁埗鑺傜偣楂樺害鏃朵笉浼氬皢鍏堕珮搴︾撼鍏ワ紝鑴辨祦鑺傜偣涓嶅崰鎹┖闂淬€傛湁涓ょ鏂瑰紡鍙互璁╁厓绱犺劚绂绘枃妗ｆ祦锛氭诞鍔ㄥ拰瀹氫綅銆?/p>

• 浣跨敤娴姩锛坒loat锛変細灏嗗厓绱犺劚绂绘枃妗ｆ祦锛岀Щ鍔ㄥ埌瀹瑰櫒宸?鍙充晶杈圭晫鎴栬€呮槸鍙︿竴涓诞鍔ㄥ厓绱犳梺杈癸紝璇ユ诞鍔ㄥ厓绱犱箣鍓嶅崰鐢ㄧ殑绌洪棿灏嗚鍒殑鍏冪礌濉ˉ锛屽彟澶栨诞鍔ㄤ箣鍚庢墍鍗犵敤鐨勫尯鍩熶笉浼氬拰鍒殑鍏冪礌涔嬮棿鍙戠敓閲嶅彔锛?/li>
• 浣跨敤缁濆瀹氫綅锛?code>position: absolute;锛夋垨鑰呭浐瀹氬畾浣嶏紙position: fixed;锛変篃浼氫娇寰楀厓绱犺劚绂绘枃妗ｆ祦锛屼笖绌哄嚭鏉ョ殑浣嶇疆灏嗚嚜鍔ㄨ鍚庣画鑺傜偣濉ˉ銆?/li>

鐩掓ā鍨?/h3>

鍦?CSS 涓换浣曞厓绱犻兘鍙互鐪嬫垚鏄竴涓洅瀛愶紝鑰屼竴涓洅瀛愭槸鐢?4 閮ㄥ垎缁勬垚鐨勶細鍐呭锛坈ontent锛夈€佸唴杈硅窛锛坧adding锛夈€佽竟妗嗭紙border锛夊拰澶栬竟璺濓紙margin锛夈€?/p>

鐩掓ā鍨嬫湁 2 绉嶏細鏍囧噯鐩掓ā鍨嬪拰 IE 鐩掓ā鍨嬶紝鏈埆鏄敱 W3C 鍜?IExplore 鍒跺畾鐨勬爣鍑嗐€?/p>

濡傛灉缁欐煇涓厓绱犺缃涓嬫牱寮忥細

.box {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid #eee;
    margin: 10px;
}
澶嶅埗浠ｇ爜

鏍囧噯鐩掓ā鍨嬭涓猴細鐩掑瓙鐨勫疄闄呭昂瀵?= 鍐呭锛堣缃殑瀹?楂橈級 + 鍐呰竟璺?+ 杈规

鎵€浠?.box 鍏冪礌鍐呭鐨勫搴﹀氨涓?200px锛岃€屽疄闄呯殑瀹藉害鍒欐槸 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222銆?/p>

IE 鐩掓ā鍨嬭涓猴細鐩掑瓙鐨勫疄闄呭昂瀵?= 璁剧疆鐨勫/楂?= 鍐呭 + 鍐呰竟璺?+ 杈规

.box 鍏冪礌鎵€鍗犵敤鐨勫疄闄呭搴︿负 200px锛岃€屽唴瀹圭殑鐪熷疄瀹藉害鍒欐槸 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178銆?/p>

鐜板湪楂樼増鏈殑娴忚鍣ㄥ熀鏈笂榛樿閮芥槸浣跨敤鏍囧噯鐩掓ā鍨嬶紝鑰屽儚 IE6 杩欑鑰佸彜钁ｆ墠鏄粯璁や娇鐢?IE 鐩掓ā鍨嬬殑銆?/p>

鍦?CSS3 涓柊澧炰簡涓€涓睘鎬?box-sizing锛屽厑璁稿紑鍙戣€呮潵鎸囧畾鐩掑瓙浣跨敤浠€涔堟爣鍑嗭紝瀹冩湁 2 涓€硷細

• content-box锛氭爣鍑嗙洅妯″瀷锛?/li>
• border-box锛欼E 鐩掓ā鍨嬶紱

瑙嗚鏍煎紡鍖栨ā鍨?/h3>

瑙嗚鏍煎紡鍖栨ā鍨嬶紙Visual formatting model锛夋槸鐢ㄦ潵澶勭悊鍜屽湪瑙嗚濯掍綋涓婃樉绀烘枃妗ｆ椂浣跨敤鐨勮绠楄鍒欍€侰SS 涓竴鍒囩殕鐩掑瓙锛岃€岃瑙夋牸寮忓寲妯″瀷绠€鍗曟潵鐞嗚В灏辨槸瑙勫畾杩欎簺鐩掑瓙搴旇鎬庝箞鏍锋斁缃埌椤甸潰涓幓锛岃繖涓ā鍨嬪湪璁＄畻鐨勬椂鍊欎細渚濊禆鍒板緢澶氱殑鍥犵礌锛屾瘮濡傦細鐩掑瓙灏哄銆佺洅瀛愮被鍨嬨€佸畾浣嶆柟妗堬紙鏄诞鍔ㄨ繕鏄畾浣嶏級銆佸厔寮熷厓绱犳垨鑰呭瓙鍏冪礌浠ュ強涓€浜涘埆鐨勫洜绱犮€?/p>

浠庝笂鍥句腑鍙互鐪嬪埌瑙嗚鏍煎紡鍖栨ā鍨嬫秹鍙婂埌鐨勫唴瀹瑰緢澶氾紝鏈夊叴瓒ｆ繁鍏ョ爺绌剁殑鍙互缁撳悎涓婂浘鐪嬭繖涓?W3C 鐨勬枃妗?Visual formatting model銆傛墍浠ヨ繖閲屽氨绠€鍗曚粙缁嶄笅鐩掑瓙绫诲瀷銆?/p>

鐩掑瓙绫诲瀷鐢?display 鍐冲畾锛屽悓鏃剁粰涓€涓厓绱犺缃?display 鍚庯紝灏嗕細鍐冲畾杩欎釜鐩掑瓙鐨?2 涓樉绀虹被鍨嬶紙display type锛夛細

• outer display type锛堝澶栨樉绀猴級锛氬喅瀹氫簡璇ュ厓绱犳湰韬槸濡備綍甯冨眬鐨勶紝鍗冲弬涓庝綍绉嶆牸寮忓寲涓婁笅鏂囷紱
• inner display type锛堝鍐呮樉绀猴級锛氬叾瀹炲氨鐩稿綋浜庢妸璇ュ厓绱犲綋鎴愪簡瀹瑰櫒锛岃瀹氫簡鍏跺唴閮ㄥ瓙鍏冪礌鏄浣曞竷灞€鐨勶紝鍙備笌浣曠鏍煎紡鍖栦笂涓嬫枃锛?/li>

outer display type

瀵瑰鏄剧ず鏂归潰锛岀洅瀛愮被鍨嬪彲浠ュ垎鎴?2 绫伙細block-level box锛堝潡绾х洅瀛愶級 鍜?inline-level box锛堣鍐呯骇鐩掑瓙锛夈€?/p>

渚濇嵁涓婂浘鍙互鍒楀嚭閮芥湁鍝簺鍧楃骇鍜岃鍐呯骇鐩掑瓙锛?/p>

• 鍧楃骇鐩掑瓙锛歞isplay 涓?block銆乴ist-item銆乼able銆乫lex銆乬rid銆乫low-root 绛夛紱
• 琛屽唴绾х洅瀛愶細display 涓?inline銆乮nline-block銆乮nline-table 绛夛紱

鎵€鏈夊潡绾х洅瀛愰兘浼氬弬涓?BFC锛屽憟鐜板瀭鐩存帓鍒楋紱鑰屾墍鏈夎鍐呯骇鐩掑瓙閮藉弬浼?IFC锛屽憟鐜版按骞虫帓鍒椼€?/p>

闄ゆ涔嬪锛宐lock銆乮nline 鍜?inline-block 杩樻湁浠€涔堟洿鍏蜂綋鐨勫尯鍒憿锛?/p>

block

• 鍗犳弧涓€琛岋紝榛樿缁ф壙鐖跺厓绱犵殑瀹藉害锛涘涓潡鍏冪礌灏嗕粠涓婂埌涓嬭繘琛屾帓鍒楋紱
• 璁剧疆 width/height 灏嗕細鐢熸晥锛?/li>
• 璁剧疆 padding 鍜?margin 灏嗕細鐢熸晥锛?/li>

inline

• 涓嶄細鍗犳弧涓€琛岋紝瀹藉害闅忕潃鍐呭鑰屽彉鍖栵紱澶氫釜 inline 鍏冪礌灏嗘寜鐓т粠宸﹀埌鍙崇殑椤哄簭鍦ㄤ竴琛岄噷鎺掑垪鏄剧ず锛屽鏋滀竴琛屾樉绀轰笉涓嬶紝鍒欒嚜鍔ㄦ崲琛岋紱
• 璁剧疆 width/height 灏嗕笉浼氱敓鏁堬紱
• 璁剧疆绔栫洿鏂瑰悜涓婄殑 padding 鍜?margin 灏嗕笉浼氱敓鏁堬紱

inline-block

• 鏄鍐呭潡鍏冪礌锛屼笉鍗曠嫭鍗犳弧涓€琛岋紝鍙互鐪嬫垚鏄兘澶熷湪涓€琛岄噷杩涜宸﹀彸鎺掑垪鐨勫潡鍏冪礌锛?/li>
• 璁剧疆 width/height 灏嗕細鐢熸晥锛?/li>
• 璁剧疆 padding 鍜?margin 灏嗕細鐢熸晥锛?/li>

inner display type

瀵瑰唴鏂归潰锛屽叾瀹炲氨鏄妸鍏冪礌褰撴垚浜嗗鍣紝閲岄潰鍖呰９鐫€鏂囨湰鎴栬€呭叾浠栧瓙鍏冪礌銆俢ontainer box 鐨勭被鍨嬩緷鎹?display 鐨勫€间笉鍚岋紝鍒嗕负 4 绉嶏細

• block container锛氬缓绔?BFC 鎴栬€?IFC锛?/li>
• flex container锛氬缓绔?FFC锛?/li>
• grid container锛氬缓绔?GFC;
• ruby container锛氭帴瑙︿笉澶氾紝涓嶅仛浠嬬粛銆?/li>

鍊煎緱涓€鎻愮殑鏄鏋滄妸 img 杩欑鏇挎崲鍏冪礌锛坮eplaced element锛夌敵鏄庝负 block 鏄笉浼氫骇鐢?container box 鐨勶紝鍥犱负鏇挎崲鍏冪礌姣斿 img 璁捐鐨勫垵琛峰氨浠呬粎鏄€氳繃 src 鎶婂唴瀹规浛鎹㈡垚鍥剧墖锛屽畬鍏ㄦ病鑰冭檻杩囦細鎶婂畠褰撴垚瀹瑰櫒銆?/p>

鍙傝€冿細

• CSS 鍘熺悊 - 浣犳墍涓嶇煡閬撶殑 display
• 鏍煎紡鍖栦笂涓嬫枃

鏍煎紡鍖栦笂涓嬫枃

鏍煎紡鍖栦笂涓嬫枃锛團ormatting Context锛夋槸 CSS2.1 瑙勮寖涓殑涓€涓蹇碉紝澶ф璇寸殑鏄〉闈腑鐨勪竴鍧楁覆鏌撳尯鍩燂紝瑙勫畾浜嗘覆鏌撳尯鍩熷唴閮ㄧ殑瀛愬厓绱犳槸濡備綍鎺掔増浠ュ強鐩镐簰浣滅敤鐨勩€?/p>

涓嶅悓绫诲瀷鐨勭洅瀛愭湁涓嶅悓鏍煎紡鍖栦笂涓嬫枃锛屽ぇ姒傛湁杩?4 绫伙細

• BFC (Block Formatting Context) 鍧楃骇鏍煎紡鍖栦笂涓嬫枃锛?/li>
• IFC (Inline Formatting Context) 琛屽唴鏍煎紡鍖栦笂涓嬫枃锛?/li>
• FFC (Flex Formatting Context) 寮规€ф牸寮忓寲涓婁笅鏂囷紱
• GFC (Grid Formatting Context) 鏍兼爡鏍煎紡鍖栦笂涓嬫枃锛?/li>

鍏朵腑 BFC 鍜?IFC 鍦?CSS 涓壆婕旂潃闈炲父閲嶈鐨勮鑹诧紝鍥犱负瀹冧滑鐩存帴褰卞搷浜嗙綉椤靛竷灞€锛屾墍浠ラ渶瑕佹繁鍏ョ悊瑙ｅ叾鍘熺悊銆?/p>

BFC

鍧楁牸寮忓寲涓婁笅鏂囷紝瀹冩槸涓€涓嫭绔嬬殑娓叉煋鍖哄煙锛屽彧鏈夊潡绾х洅瀛愬弬涓庯紝瀹冭瀹氫簡鍐呴儴鐨勫潡绾х洅瀛愬浣曞竷灞€锛屽苟涓斾笌杩欎釜鍖哄煙澶栭儴姣笉鐩稿共銆?/p>

BFC 娓叉煋瑙勫垯

• 鍐呴儴鐨勭洅瀛愪細鍦ㄥ瀭鐩存柟鍚戯紝涓€涓帴涓€涓湴鏀剧疆锛?/li>
• 鐩掑瓙鍨傜洿鏂瑰悜鐨勮窛绂荤敱 margin 鍐冲畾锛屽睘浜庡悓涓€涓?BFC 鐨勪袱涓浉閭荤洅瀛愮殑 margin 浼氬彂鐢熼噸鍙狅紱
• 姣忎釜鍏冪礌鐨?margin 鐨勫乏杈癸紝涓庡寘鍚潡 border 鐨勫乏杈圭浉鎺ヨЕ(瀵逛簬浠庡乏寰€鍙崇殑鏍煎紡鍖栵紝鍚﹀垯鐩稿弽)锛屽嵆浣垮瓨鍦ㄦ诞鍔ㄤ篃鏄姝わ紱
• BFC 鐨勫尯鍩熶笉浼氫笌 float 鐩掑瓙閲嶅彔锛?/li>
• BFC 灏辨槸椤甸潰涓婄殑涓€涓殧绂荤殑鐙珛瀹瑰櫒锛屽鍣ㄩ噷闈㈢殑瀛愬厓绱犱笉浼氬奖鍝嶅埌澶栭潰鐨勫厓绱犮€傚弽涔嬩篃濡傛銆?/li>
• 璁＄畻 BFC 鐨勯珮搴︽椂锛屾诞鍔ㄥ厓绱犱篃鍙備笌璁＄畻銆?/li>

濡備綍鍒涘缓 BFC锛?/strong>

• 鏍瑰厓绱狅細html
• 闈炴孩鍑虹殑鍙鍏冪礌锛歰verflow 涓嶄负 visible
• 璁剧疆娴姩锛歠loat 灞炴€т笉涓?none
• 璁剧疆瀹氫綅锛歱osition 涓?absolute 鎴?fixed
• 瀹氫箟鎴愬潡绾х殑闈炲潡绾у厓绱狅細display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC 搴旂敤鍦烘櫙

1銆?鑷€傚簲涓ゆ爮甯冨眬

搴旂敤鍘熺悊锛欱FC 鐨勫尯鍩熶笉浼氬拰娴姩鍖哄煙閲嶅彔锛屾墍浠ュ氨鍙互鎶婁晶杈规爮鍥哄畾瀹藉害涓斿乏娴姩锛岃€屽鍙充晶鍐呭瑙﹀彂 BFC锛屼娇寰楀畠鐨勫搴﹁嚜閫傚簲璇ヨ鍓╀綑瀹藉害銆?/p>

<div class="layout">
    <div class="aside">aside</div>
    <div class="main">main</div>
</div>
澶嶅埗浠ｇ爜

.aside {
    float: left;
    width: 100px;
}
.main {
    <!-- 瑙﹀彂 BFC -->
    overflow: auto;
}
澶嶅埗浠ｇ爜

2銆佹竻闄ゅ唴閮ㄦ诞鍔?/p>

娴姩閫犳垚鐨勯棶棰樺氨鏄埗鍏冪礌楂樺害鍧嶅锛屾墍浠ユ竻闄ゆ诞鍔ㄩ渶瑕佽В鍐崇殑闂灏辨槸璁╃埗鍏冪礌鐨勯珮搴︽仮澶嶆甯搞€傝€岀敤 BFC 娓呴櫎娴姩鐨勫師鐞嗗氨鏄細璁＄畻 BFC 鐨勯珮搴︽椂锛屾诞鍔ㄥ厓绱犱篃鍙備笌璁＄畻銆傚彧瑕佽Е鍙戠埗鍏冪礌鐨?BFC 鍗冲彲銆?/p>

.parent {
    overflow: hidden;
}
澶嶅埗浠ｇ爜

3銆?闃叉鍨傜洿 margin 鍚堝苟

BFC 娓叉煋鍘熺悊涔嬩竴锛氬悓涓€涓?BFC 涓嬬殑鍨傜洿 margin 浼氬彂鐢熷悎骞躲€傛墍浠ュ鏋滆 2 涓厓绱犱笉鍦ㄥ悓涓€涓?BFC 涓嵆鍙樆姝㈠瀭鐩?margin 鍚堝苟銆傞偅濡備綍璁?2 涓浉閭荤殑鍏勫紵鍏冪礌涓嶅湪鍚屼竴涓?BFC 涓憿锛熷彲浠ョ粰鍏朵腑涓€涓厓绱犲闈㈠寘瑁逛竴灞傦紝鐒跺悗瑙﹀彂鍏跺寘瑁瑰眰鐨?BFC锛岃繖鏍蜂竴鏉?2 涓厓绱犲氨涓嶄細鍦ㄥ悓涓€涓?BFC 涓簡銆?/p>

<div class="layout">
    <div class="a">a</div>
    <div class="contain-b">
        <div class="b">b</div>
    </div>
</div>
澶嶅埗浠ｇ爜

.demo3 .a,
.demo3 .b {
    border: 1px solid #999;
    margin: 10px;
}
.contain-b {
    overflow: hidden;
}
澶嶅埗浠ｇ爜

閽堝浠ヤ笂 3 涓?绀轰緥 锛屽彲浠ョ粨鍚堣繖涓?BFC 搴旂敤绀轰緥 閰嶅悎瑙傜湅鏇翠匠銆?/p>

鍙傝€冿細CSS 鍘熺悊 - Formatting Context

IFC

IFC 鐨勫舰鎴愭潯浠堕潪甯哥畝鍗曪紝鍧楃骇鍏冪礌涓粎鍖呭惈鍐呰仈绾у埆鍏冪礌锛岄渶瑕佹敞鎰忕殑鏄綋IFC涓湁鍧楃骇鍏冪礌鎻掑叆鏃讹紝浼氫骇鐢熶袱涓尶鍚嶅潡灏嗙埗鍏冪礌鍒嗗壊寮€鏉ワ紝浜х敓涓や釜 IFC銆?/p>

IFC 娓叉煋瑙勫垯

• 瀛愬厓绱犲湪姘村钩鏂瑰悜涓婁竴涓帴涓€涓帓鍒楋紝鍦ㄥ瀭鐩存柟鍚戜笂灏嗕互瀹瑰櫒椤堕儴寮€濮嬪悜涓嬫帓鍒楋紱
• 鑺傜偣鏃犳硶澹版槑瀹介珮锛屽叾涓?margin 鍜?padding 鍦ㄦ按骞虫柟鍚戞湁鏁堝湪鍨傜洿鏂瑰悜鏃犳晥锛?/li>
• 鑺傜偣鍦ㄥ瀭鐩存柟鍚戜笂浠ヤ笉鍚屽舰寮忓榻愶紱
• 鑳芥妸鍦ㄤ竴琛屼笂鐨勬閮藉畬鍏ㄥ寘鍚繘鍘荤殑涓€涓煩褰㈠尯鍩燂紝琚О涓鸿琛岀殑绾跨洅锛坙ine box锛夈€傜嚎鐩掔殑瀹藉害鏄敱鍖呭惈鍧楋紙containing box锛夊拰涓庡叾涓殑娴姩鏉ュ喅瀹氾紱
• IFC 涓殑 line box 涓€鑸乏鍙宠竟璐寸揣鍏跺寘鍚潡锛屼絾 float 鍏冪礌浼氫紭鍏堟帓鍒椼€?/li>
• IFC 涓殑 line box 楂樺害鐢?line-height 璁＄畻瑙勫垯鏉ョ‘瀹氾紝鍚屼釜 IFC 涓嬬殑澶氫釜 line box 楂樺害鍙兘浼氫笉鍚岋紱
• 褰撳唴鑱旂骇鐩掑瓙鐨勬€诲搴﹀皯浜庡寘鍚畠浠殑 line box 鏃讹紝鍏舵按骞虫覆鏌撹鍒欑敱 text-align 灞炴€у€兼潵鍐冲畾锛?/li>
• 褰撲竴涓唴鑱旂洅瀛愯秴杩囩埗鍏冪礌鐨勫搴︽椂锛屽畠浼氳鍒嗗壊鎴愬鐩掑瓙锛岃繖浜涚洅瀛愬垎甯冨湪澶氫釜 line box 涓€傚鏋滃瓙鍏冪礌鏈缃己鍒舵崲琛岀殑鎯呭喌涓嬶紝inline box 灏嗕笉鍙鍒嗗壊锛屽皢浼氭孩鍑虹埗鍏冪礌銆?/li>

閽堝濡備笂鐨?IFC 娓叉煋瑙勫垯锛屼綘鏄笉鏄彲浠ュ垎鏋愪笅涓嬮潰杩欐浠ｇ爜鐨?IFC 鐜鏄€庝箞鏍风殑鍛紵

<p>It can get <strong>very complicated</storng> once you start looking into it.</p>
澶嶅埗浠ｇ爜

瀵瑰簲涓婇潰杩欐牱涓€涓?HTML 鍒嗘瀽濡備笅锛?/p>

• p 鏍囩鏄竴涓?block container锛屽鍐呭皢浜х敓涓€涓?IFC锛?/li>
• 鐢变簬涓€琛屾病鍔炴硶鏄剧ず瀹屽叏锛屾墍浠ヤ骇鐢熶簡 2 涓嚎鐩掞紙line box锛夛紱绾跨洅鐨勫搴﹀氨缁ф壙浜?p 鐨勫搴︼紱楂樺害鏄敱閲岄潰鐨勫唴鑱旂洅瀛愮殑 line-height 鍐冲畾锛?/li>
• It can get锛氬尶鍚嶇殑鍐呰仈鐩掑瓙锛?/li>
• very complicated锛歴trong 鏍囩浜х敓鐨勫唴鑱旂洅瀛愶紱
• once you start锛氬尶鍚嶇殑鍐呰仈鐩掑瓙锛?/li>
• looking into it.锛氬尶鍚嶇殑鍐呰仈鐩掑瓙銆?/li>

鍙傝€冿細Inline formatting contexts

IFC 搴旂敤鍦烘櫙

• 姘村钩灞呬腑锛氬綋涓€涓潡瑕佸湪鐜涓按骞冲眳涓椂锛岃缃叾涓?inline-block 鍒欎細鍦ㄥ灞備骇鐢?IFC锛岄€氳繃 text-align 鍒欏彲浠ヤ娇鍏舵按骞冲眳涓€?/li>
• 鍨傜洿灞呬腑锛氬垱寤轰竴涓?IFC锛岀敤鍏朵腑涓€涓厓绱犳拺寮€鐖跺厓绱犵殑楂樺害锛岀劧鍚庤缃叾 vertical-align: middle锛屽叾浠栬鍐呭厓绱犲垯鍙互鍦ㄦ鐖跺厓绱犱笅鍨傜洿灞呬腑銆?/li>

鍋蜂釜鎳掞紝demo 鍜屽浘鎴戝氨涓嶅仛浜嗐€?/p>

灞傚彔涓婁笅鏂?/h3>

鍦ㄧ數鑴戞樉绀哄睆骞曚笂鐨勬樉绀虹殑椤甸潰鍏跺疄鏄竴涓笁缁寸殑绌洪棿锛屾按骞虫柟鍚戞槸 X 杞达紝绔栫洿鏂瑰悜鏄?Y 杞达紝鑰屽睆骞曞埌鐪肩潧鐨勬柟鍚戝彲浠ョ湅鎴愭槸 Z 杞淬€備紬 HTML 鍏冪礌渚濇嵁鑷繁瀹氫箟鐨勫睘鎬х殑浼樺厛绾у湪 Z 杞翠笂鎸夌収涓€瀹氱殑椤哄簭鎺掑紑锛岃€岃繖鍏跺疄灏辨槸灞傚彔涓婁笅鏂囨墍瑕佹弿杩扮殑涓滆タ銆?/p>

鎴戜滑瀵瑰眰鍙犱笂涓嬫枃鐨勭涓€鍗拌薄鍙兘瑕佹潵婧愪簬 z-index锛岃涓哄畠鐨勫€艰秺澶э紝璺濈灞忓箷瑙傚療鑰呭氨瓒婅繎锛岄偅涔堝眰鍙犵瓑绾у氨瓒婇珮锛屼簨瀹炵‘瀹炴槸杩欐牱鐨勶紝浣嗗眰鍙犱笂涓嬫枃鐨勫唴瀹硅繙闈炰粎浠呭姝わ細

• z-index 鑳藉鍦ㄥ眰鍙犱笂涓嬫枃涓鍏冪礌鐨勫爢鍙犻『搴忓叾浣滅敤鏄繀椤婚厤鍚堝畾浣嶆墠鍙互锛?/li>
• 闄や簡 z-index 涔嬪锛屼竴涓厓绱犲湪 Z 杞翠笂鐨勬樉绀洪『搴忚繕鍙楀眰鍙犵瓑绾у拰灞傚彔椤哄簭褰卞搷锛?/li>

鍦ㄧ湅灞傚彔绛夌骇鍜屽眰鍙犻『搴忎箣鍓嶏紝鎴戜滑鍏堟潵鐪嬩笅濡備綍浜х敓涓€涓眰鍙犱笂涓嬫枃锛岀壒瀹氱殑 HTML 鍏冪礌鎴栬€?CSS 灞炴€т骇鐢熷眰鍙犱笂涓嬫枃锛孧DN 涓粰鍑轰簡杩欎箞涓€涓垪琛紝绗﹀悎浠ヤ笅浠讳竴鏉′欢鐨勫厓绱犻兘浼氫骇鐢熷眰鍙犱笂涓嬫枃锛?/p>

• html 鏂囨。鏍瑰厓绱?/li>
• 澹版槑 position: absolute/relative 涓?z-index 鍊间笉涓?auto 鐨勫厓绱狅紱
• 澹版槑 position: fixed/sticky 鐨勫厓绱狅紱
• flex 瀹瑰櫒鐨勫瓙鍏冪礌锛屼笖 z-index 鍊间笉涓?auto锛?/li>
• grid 瀹瑰櫒鐨勫瓙鍏冪礌锛屼笖 z-index 鍊间笉涓?auto锛?/li>
• opacity 灞炴€у€煎皬浜?1 鐨勫厓绱狅紱
• mix-blend-mode 灞炴€у€间笉涓?normal 鐨勫厓绱狅紱
• 浠ヤ笅浠绘剰灞炴€у€间笉涓?none 鐨勫厓绱狅細
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation 灞炴€у€间负 isolate 鐨勫厓绱狅紱
• -webkit-overflow-scrolling 灞炴€у€间负 touch 鐨勫厓绱狅紱
• will-change 鍊艰瀹氫簡浠讳竴灞炴€ц€岃灞炴€у湪 non-initial 鍊兼椂浼氬垱寤哄眰鍙犱笂涓嬫枃鐨勫厓绱狅紱
• contain 灞炴€у€间负 layout銆乸aint 鎴栧寘鍚畠浠叾涓箣涓€鐨勫悎鎴愬€硷紙姣斿 contain: strict銆乧ontain: content锛夌殑鍏冪礌銆?/li>

灞傚彔绛夌骇

灞傚彔绛夌骇鎸囪妭鐐瑰湪涓夌淮绌洪棿 Z 杞翠笂鐨勪笂涓嬮『搴忋€傚畠鍒嗕袱绉嶆儏鍐碉細

• 鍦ㄥ悓涓€涓眰鍙犱笂涓嬫枃涓紝瀹冩弿杩板畾涔夌殑鏄灞傚彔涓婁笅鏂囦腑鐨勫眰鍙犱笂涓嬫枃鍏冪礌鍦?Z 杞翠笂鐨勪笂涓嬮『搴忥紱
• 鍦ㄥ叾浠栨櫘閫氬厓绱犱腑锛屽畠鎻忚堪瀹氫箟鐨勬槸杩欎簺鏅€氬厓绱犲湪 Z 杞翠笂鐨勪笂涓嬮『搴忥紱

鏅€氳妭鐐圭殑灞傚彔绛夌骇浼樺厛鐢卞叾鎵€鍦ㄧ殑灞傚彔涓婁笅鏂囧喅瀹氾紝灞傚彔绛夌骇鐨勬瘮杈冨彧鏈夊湪褰撳墠灞傚彔涓婁笅鏂囦腑鎵嶆湁鎰忎箟锛岃劚绂诲綋鍓嶅眰鍙犱笂涓嬫枃鐨勬瘮杈冨氨鍙樺緱鏃犳剰涔変簡銆?/p>

灞傚彔椤哄簭

鍦ㄥ悓涓€涓眰鍙犱笂涓嬫枃涓鏋滄湁澶氫釜鍏冪礌锛岄偅涔堜粬浠箣闂寸殑灞傚彔椤哄簭鏄€庝箞鏍风殑鍛紵

浠ヤ笅杩欎釜鍒楄〃瓒婂線涓嬪眰鍙犱紭鍏堢骇瓒婇珮锛岃瑙変笂鐨勬晥鏋滃氨鏄秺瀹规槗琚敤鎴风湅鍒帮紙涓嶄細琚叾浠栧厓绱犺鐩栵級锛?/p>

• 灞傚彔涓婁笅鏂囩殑 border 鍜?background
• z-index < 0 鐨勫瓙鑺傜偣
• 鏍囧噯娴佸唴鍧楃骇闈炲畾浣嶇殑瀛愯妭鐐?/li>
• 娴姩闈炲畾浣嶇殑瀛愯妭鐐?/li>
• 鏍囧噯娴佸唴琛屽唴闈炲畾浣嶇殑瀛愯妭鐐?/li>
• z-index: auto/0 鐨勫瓙鑺傜偣
• z-index > 0鐨勫瓙鑺傜偣

濡備綍姣旇緝涓や釜鍏冪礌鐨勫眰鍙犵瓑绾э紵

• 鍦ㄥ悓涓€涓眰鍙犱笂涓嬫枃涓紝姣旇緝涓や釜鍏冪礌灏辨槸鎸夌収涓婂浘鐨勪粙缁嶇殑灞傚彔椤哄簭杩涜姣旇緝銆?/li>
• 濡傛灉涓嶅湪鍚屼竴涓眰鍙犱笂涓嬫枃涓殑鏃跺€欙紝閭ｅ氨闇€瑕佹瘮杈冧袱涓厓绱犲垎鍒墍澶勭殑灞傚彔涓婁笅鏂囩殑绛夌骇銆?/li>
• 濡傛灉涓や釜鍏冪礌閮藉湪鍚屼竴涓眰鍙犱笂涓嬫枃锛屼笖灞傚彔椤哄簭鐩稿悓锛屽垯鍦?HTML 涓畾涔夎秺鍚庨潰鐨勫眰鍙犵瓑绾ц秺楂樸€?/li>

鍙傝€冿細褰诲簳鎼炴噦CSS灞傚彔涓婁笅鏂囥€佸眰鍙犵瓑绾с€佸眰鍙犻『搴忋€亃-index

鍊煎拰鍗曚綅

CSS 鐨勫０鏄庢槸鐢卞睘鎬у拰鍊肩粍鎴愮殑锛岃€屽€肩殑绫诲瀷鏈夎澶氱锛?/p>

• 鏁板€硷細闀垮害鍊?锛岀敤浜庢寚瀹氫緥濡傚厓绱?width銆乥order-width銆乫ont-size 绛夊睘鎬х殑鍊硷紱
• 鐧惧垎姣旓細鍙互鐢ㄤ簬鎸囧畾灏哄鎴栭暱搴︼紝渚嬪鍙栧喅浜庣埗瀹瑰櫒鐨?width銆乭eight 鎴栭粯璁ょ殑 font-size锛?/li>
• 棰滆壊锛氱敤浜庢寚瀹?background-color銆乧olor 绛夛紱
• 鍧愭爣浣嶇疆锛氫互灞忓箷鐨勫乏涓婅涓哄潗鏍囧師鐐瑰畾浣嶅厓绱犵殑浣嶇疆锛屾瘮濡傚父瑙佺殑 background-position銆乼op銆乺ight銆乥ottom 鍜?left 绛夊睘鎬э紱
• 鍑芥暟锛氱敤浜庢寚瀹氳祫婧愯矾寰勬垨鑳屾櫙鍥剧墖鐨勬笎鍙橈紝姣斿 url()銆乴inear-gradient() 绛夛紱

鑰岃繕鏈変簺鍊兼槸闇€瑕佸甫鍗曚綅鐨勶紝姣斿 width: 100px锛岃繖閲岀殑 px 灏辨槸琛ㄧず闀垮害鐨勫崟浣嶏紝闀垮害鍗曚綅闄や簡 px 澶栵紝姣旇緝甯哥敤鐨勮繕鏈?em銆乺em銆乿w/vh 绛夈€傞偅浠栦滑鏈変粈涔堝尯鍒憿锛熷張搴旇鍦ㄤ粈涔堟椂鍊欎娇鐢ㄥ畠浠憿锛?/p>

px

灞忓箷鍒嗚鲸鐜囨槸鎸囧湪灞忓箷鐨勬í绾垫柟鍚戜笂鐨勫儚绱犵偣鏁伴噺锛屾瘮濡傚垎杈ㄧ巼 1920脳1080 鎰忓懗鐫€姘村钩鏂瑰悜鍚湁 1920 涓儚绱犳暟锛屽瀭鐩存柟鍚戝惈鏈?1080 涓儚绱犳暟銆?/p>

鑰?px 琛ㄧず鐨勬槸 CSS 涓殑鍍忕礌锛屽湪 CSS 涓畠鏄粷瀵圭殑闀垮害鍗曚綅锛屼篃鏄渶鍩虹鐨勫崟浣嶏紝鍏朵粬闀垮害鍗曚綅浼氳嚜鍔ㄨ娴忚鍣ㄦ崲绠楁垚 px銆備絾鏄浜庤澶囪€岃█锛屽畠鍏跺疄鍙堟槸鐩稿鐨勯暱搴﹀崟浣嶏紝姣斿瀹介珮閮戒负 2px锛屽湪姝ｅ父鐨勫睆骞曚笅锛屽叾瀹炲氨鏄?4 涓儚绱犵偣锛岃€屽湪璁惧鍍忕礌姣?devicePixelRatio) 涓?2 鐨?Retina 灞忓箷涓嬶紝瀹冨氨鏈?16 涓儚绱犵偣銆傛墍浠ュ睆骞曞昂瀵镐竴鑷寸殑鎯呭喌涓嬶紝灞忓箷鍒嗚鲸鐜囪秺楂橈紝鏄剧ず鏁堟灉灏辫秺缁嗚吇銆?/p>

璁插埌杩欓噷锛岃繕鏈変竴浜涚浉鍏崇殑姒傚康闇€瑕佺悊娓呬笅锛?/p>

璁惧鍍忕礌锛圖evice pixels锛?/strong>

璁惧灞忓箷鐨勭墿鐞嗗儚绱狅紝琛ㄧず鐨勬槸灞忓箷鐨勬í绾垫湁澶氬皯鍍忕礌鐐癸紱鍜屽睆骞曞垎杈ㄧ巼鏄樊涓嶅鐨勬剰鎬濄€?/p>

璁惧鍍忕礌姣旓紙DPR锛?/strong>

璁惧鍍忕礌姣旇〃绀?1 涓?CSS 鍍忕礌绛変簬鍑犱釜鐗╃悊鍍忕礌銆?/p>

璁＄畻鍏紡锛欴PR = 鐗╃悊鍍忕礌鏁?/ 閫昏緫鍍忕礌鏁帮紱

鍦ㄦ祻瑙堝櫒涓彲浠ラ€氳繃 window.devicePixelRatio 鏉ヨ幏鍙栧綋鍓嶅睆骞曠殑 DPR銆?/p>

鍍忕礌瀵嗗害锛圖PI/PPI锛?/strong>

鍍忕礌瀵嗗害涔熷彨鏄剧ず瀵嗗害鎴栬€呭睆骞曞瘑搴︼紝缂╁啓涓?DPI(Dots Per Inch) 鎴栬€?PPI(Pixel Per Inch)銆備粠鎶€鏈搴﹁锛孭PI 鍙瓨鍦ㄤ簬璁＄畻鏈烘樉绀洪鍩燂紝鑰?DPI 鍙嚭鐜颁簬鎵撳嵃鎴栧嵃鍒烽鍩熴€?/p>

璁＄畻鍏紡锛氬儚绱犲瘑搴?= 灞忓箷瀵硅绾跨殑鍍忕礌灏哄 / 鐗╃悊灏哄

姣斿锛屽浜庡垎杈ㄧ巼涓?750 * 1334 鐨?iPhone 6 鏉ヨ锛屽畠鐨勫儚绱犲瘑搴︿负锛?/p>

Math.sqrt(750 * 750 + 1334 * 1334) / 4.7 = 326ppi
澶嶅埗浠ｇ爜

璁惧鐙珛鍍忕礌锛圖IP锛?/strong>

DIP 鏄壒鍒拡瀵?Android璁惧鑰岃鐢熷嚭鏉ョ殑锛屽師鍥犳槸瀹夊崜灞忓箷鐨勫昂瀵哥箒澶氾紝鍥犳涓轰簡鏄剧ず鑳藉敖閲忓拰璁惧鏃犲叧锛岃€屾彁鍑虹殑杩欎釜姒傚康銆傚畠鏄熀浜庡睆骞曞瘑搴﹁€岃绠楃殑锛岃涓哄綋灞忓箷瀵嗗害鏄?160 鐨勬椂鍊欙紝px = DIP銆?/p>

璁＄畻鍏紡锛歞ip = px * 160 / dpi

em

em 鏄?CSS 涓殑鐩稿闀垮害鍗曚綅涓殑涓€涓€傚眳鐒舵槸鐩稿鐨勶紝閭ｅ畠鍒板簳鏄浉瀵圭殑璋佸憿锛熷畠鏈?2 灞傛剰鎬濓細

• 鍦?font-size 涓娇鐢ㄦ槸鐩稿浜?strong>鐖跺厓绱?/strong>鐨?font-size 澶у皬锛屾瘮濡傜埗鍏冪礌 font-size: 16px锛屽綋缁欏瓙鍏冪礌鎸囧畾 font-size: 2em 鐨勬椂鍊欙紝缁忚繃璁＄畻鍚庡畠鐨勫瓧浣撳ぇ灏忎細鏄?32px锛?/li>
• 鍦ㄥ叾浠栧睘鎬т腑浣跨敤鏄浉瀵逛簬鑷韩鐨勫瓧浣撳ぇ灏忥紝濡?width/height/padding/margin 绛夛紱

鎴戜滑閮界煡閬撴瘡涓祻瑙堝櫒閮戒細缁?HTML 鏍瑰厓绱?html 璁剧疆涓€涓粯璁ょ殑 font-size锛岃€岃繖涓€奸€氬父鏄?16px銆傝繖涔熷氨鏄负浠€涔?1em = 16px 鐨勫師鍥犳墍鍦ㄤ簡銆?/p>

em 鍦ㄨ绠楃殑鏃跺€欐槸浼氬眰灞傝绠楃殑锛屾瘮濡傦細

<div>
    <p></p>
</div>
澶嶅埗浠ｇ爜

div { font-size: 2em; }
p { font-size: 2em; }
澶嶅埗浠ｇ爜

瀵逛簬濡備笂涓€涓粨鏋勭殑 HTML锛岀敱浜庢牴鍏冪礌 html 鐨勫瓧浣撳ぇ灏忔槸 16px锛屾墍浠?p 鏍囩鏈€缁堣绠楀嚭鏉ュ悗鐨勫瓧浣撳ぇ灏忎細鏄?16 * 2 * 2 = 64px

rem

rem(root em) 鍜?em 涓€鏍凤紝涔熸槸涓€涓浉瀵归暱搴﹀崟浣嶏紝涓嶈繃 rem 鐩稿鐨勬槸 HTML 鐨勬牴鍏冪礌 html銆?/p>

rem 鐢变簬鏄熀浜?html 鐨?font-size 鏉ヨ绠楋紝鎵€浠ラ€氬父鐢ㄤ簬鑷€傚簲缃戠珯鎴栬€?H5 涓€?/p>

姣斿鍦ㄥ仛 H5 鐨勬椂鍊欙紝鍓嶇閫氬父浼氳 UI 缁?750px 瀹界殑璁捐鍥撅紝鑰屽湪寮€鍙戠殑鏃跺€欏彲浠ュ熀浜?iPhone X 鐨勫昂瀵?375px * 812px 鏉ュ啓椤甸潰锛岃繖鏍蜂竴鏉ョ殑璇濓紝灏卞彲浠ョ敤涓嬮潰鐨?JS 渚濇嵁褰撳墠椤甸潰鐨勮鍙ｅ搴﹁嚜鍔ㄨ绠楀嚭鏍瑰厓绱?html 鐨勫熀鍑?font-size 鏄灏戙€?/p>

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window 'orientationchange' : 'resize',
        psdWidth = 750,  // 璁捐鍥惧搴?
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if ( !clientWidth ) return;
            if ( clientWidth >= 640 ) {
                docEl.style.fontSize = 200 * ( 640 / psdWidth ) + 'px';
            } else {
                docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + 'px';
            }
        };

    if ( !doc.addEventListener ) return;
    // 缁戝畾浜嬩欢鐨勬椂鍊欐渶濂介厤鍚堥槻鎶栧嚱鏁?
    win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
    doc.addEventListener( 'DOMContentLoaded', recalc, false );

    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
})(document, window);
澶嶅埗浠ｇ爜

姣斿褰撹鍙ｆ槸 375px 鐨勬椂鍊欙紝缁忚繃璁＄畻 html 鐨?font-size 浼氭槸 100px锛岃繖鏍锋湁浠€涔堝ソ澶勫憿锛熷ソ澶勫氨鏄柟渚垮啓鏍峰紡锛屾瘮濡備粠璁捐鍥鹃噺鍑烘潵鐨?header 楂樺害鏄?50px 鐨勶紝閭ｆ垜浠啓鏍峰紡鐨勬椂鍊欏氨鍙互鐩存帴鍐欙細

header {
    height: 0.5rem;
}
澶嶅埗浠ｇ爜

姣忎釜浠庤璁″浘閲忓嚭鏉ョ殑灏哄鍙闄や簬 100 鍗冲彲寰楀埌褰撳墠鍏冪礌鐨?rem 鍊硷紝閮戒笉鐢ㄧ粡杩囪绠楋紝闈炲父鏂逛究銆傚伔鍋峰憡璇変綘锛屽鏋滀綘鎶婁笂闈㈤偅涓茶绠?html 鏍囩 font-size 鐨?JS 浠ｇ爜涓殑 200 鏇挎崲鎴?2锛岄偅鍦ㄨ绠?rem 鐨勬椂鍊欏氨涓嶉渶瑕侀櫎浜?100 浜嗭紝浠庤璁″浘閲忓嚭澶氬ぇ px锛屽氨鐩存帴鍐欏灏戜釜 rem銆?/p>

vw/vh

vw 鍜?vh 鍒嗗埆鏄浉瀵逛簬灞忓箷瑙嗗彛瀹藉害鍜岄珮搴﹁€岃█鐨勯暱搴﹀崟浣嶏細

• 1vw = 瑙嗗彛瀹藉害鍧囧垎鎴?100 浠戒腑 1 浠界殑闀垮害锛?/li>
• 1vh = 瑙嗗彛楂樺害鍧囧垎鎴?100 浠戒腑 1 浠界殑闀垮害锛?/li>

鍦?JS 涓?100vw = window.innerWidth锛?00vh = window.innerHeight銆?/p>

vw/vh 鐨勫嚭鐜颁娇寰楀浜嗕竴绉嶅啓鑷€傚簲甯冨眬鐨勬柟妗堬紝寮€鍙戣€呬笉鍐嶅眬闄愪簬 rem 浜嗐€?/p>

鐩稿瑙嗗彛鐨勫崟浣嶏紝闄や簡 vw/vh 澶栵紝杩樻湁 vmin 鍜?vmax锛?/p>

• vmin锛氬彇 vw 鍜?vh 涓€艰緝灏忕殑锛?/li>
• vmax锛氬彇 vw 鍜?vh 涓€艰緝澶х殑锛?/li>

棰滆壊浣撶郴

CSS 涓敤浜庤〃绀洪鑹茬殑鍊肩绫荤箒澶氾紝瓒冲鏋勬垚涓€涓綋绯伙紝鎵€浠ヨ繖閲屽氨涓撻棬鎷垮嚭涓€涓皬鑺傛潵璁茶В瀹冦€?/p>

鏍规嵁 CSS 棰滆壊鑽夋 涓彁鍒扮殑棰滆壊鍊肩被鍨嬶紝澶ф鍙互鎶婂畠浠垎涓鸿繖鍑犵被锛?/p>

• 棰滆壊鍏抽敭瀛?/li>
• transparent 鍏抽敭瀛?/li>
• currentColor 鍏抽敭瀛?/li>
• RGB 棰滆壊
• HSL 棰滆壊

棰滆壊鍏抽敭瀛?/h4>

棰滆壊鍏抽敭瀛楋紙color keywords锛夋槸涓嶅尯鍒嗗ぇ灏忓啓鐨勬爣璇嗙锛屽畠琛ㄧず涓€涓叿浣撶殑棰滆壊锛屾瘮濡?white锛堢櫧锛夛紝榛戯紙black锛夌瓑锛?/p>

鍙帴鍙楃殑鍏抽敭瀛楀垪琛ㄥ湪CSS鐨勬紨鍙樿繃绋嬩腑鍙戠敓浜嗘敼鍙橈細

• CSS 鏍囧噯 1 鍙帴鍙?16 涓熀鏈鑹诧紝绉颁负 VGA 棰滆壊锛屽洜涓哄畠浠潵婧愪簬 VGA 鏄惧崱鎵€鏄剧ず鐨勯鑹查泦鍚堣€岃绉颁负 VGA colors 锛堣棰戝浘褰㈤樀鍒楄壊褰╋級銆?/li>
• CSS 鏍囧噯 2 澧炲姞浜?orange 鍏抽敭瀛椼€?/li>
• 浠庝竴寮€濮嬶紝娴忚鍣ㄦ帴鍙楀叾瀹冪殑棰滆壊锛岀敱浜庝竴浜涙棭鏈熸祻瑙堝櫒鏄?X11 搴旂敤绋嬪簭锛岃繖浜涢鑹插ぇ澶氭暟鏄?X11 鍛藉悕鐨勯鑹插垪琛紝铏界劧鏈変竴鐐逛笉鍚屻€係VG 1.0 鏄涓寮忓畾涔夎繖浜涘叧閿瓧鐨勬爣鍑嗭紱CSS 鑹插僵鏍囧噯 3 涔熸寮忓畾涔変簡杩欎簺鍏抽敭瀛椼€傚畠浠粡甯歌绉颁綔鎵╁睍鐨勯鑹插叧閿瓧锛?X11 棰滆壊鎴?SVG 棰滆壊 銆?/li>
• CSS 棰滆壊鏍囧噯 4 娣诲姞鍙?rebeccapurple 鍏抽敭瀛楁潵绾康 web 鍏堥攱 Eric Meyer銆?/li>

濡備笅杩欏紶鍥炬槸 16 涓熀纭€鑹诧紝鍙堝彨 VGA 棰滆壊銆傛埅姝㈠埌鐩墠涓烘 CSS 棰滆壊鍏抽敭瀛楁€诲叡鏈?146 涓紝杩欓噷鍙互鏌ョ湅 瀹屾暣鐨勮壊褰╁叧閿瓧鍒楄〃銆?/p>

闇€瑕佹敞鎰忕殑鏄鏋滃０鏄庣殑鏃跺€欑殑棰滆壊鍏抽敭瀛楁槸閿欒鐨勶紝娴忚鍣ㄤ細蹇界暐瀹冦€?/p>

transparent 鍏抽敭瀛?/h4>

transparent 鍏抽敭瀛楄〃绀轰竴涓畬鍏ㄩ€忔槑鐨勯鑹诧紝鍗宠棰滆壊鐪嬩笂鍘诲皢鏄儗鏅壊銆備粠鎶€鏈笂璇达紝瀹冩槸甯︽湁 alpha 閫氶亾涓烘渶灏忓€肩殑榛戣壊锛屾槸 rgba(0,0,0,0) 鐨勭畝鍐欍€?/p>

閫忔槑鍏抽敭瀛楁湁浠€涔堝簲鐢ㄥ満鏅憿锛?/p>

瀹炵幇涓夎褰?/strong>

涓嬮潰杩欎釜鍥炬槸鐢?4 鏉¤竟妗嗗～鍏呯殑姝ｆ柟褰紝鐪嬫噦浜嗗畠浣犲ぇ姒傚氨鐭ラ亾璇ュ浣曠敤 CSS 鍐欎笁瑙掑舰浜嗐€?/p>

div {
    border-top-color: #ffc107;
    border-right-color: #00bcd4;
    border-bottom-color: #e26b6b;
    border-left-color: #cc7cda;
    border-width: 50px;
    border-style: solid;
}
澶嶅埗浠ｇ爜

鐢?transparent 瀹炵幇涓夎褰㈢殑鍘熺悊锛?/p>

• 棣栧厛瀹介珮蹇呴』鏄?0px锛岄€氳繃杈规鐨勭矖缁嗘潵濉厖鍐呭锛?/li>
• 閭ｆ潯杈归渶瑕佸氨瑕佸姞涓婇鑹诧紝鑰屼笉闇€瑕佺殑杈瑰垯鐢?transparent锛?/li>
• 鎯宠浠€涔堟牱濮垮娍鐨勪笁瑙掑舰锛屽畬鍏ㄧ敱涓婁笅宸﹀彸 4 鏉¤竟鐨勪腑鏈夐鑹茬殑杈瑰拰閫忔槑鐨勮竟鐨勪綅缃喅瀹氾紱
• 绛夎叞涓夎褰細璁剧疆涓€鏉¤竟鏈夐鑹诧紝鐒跺悗绱ф尐鐫€鐨?2 杈规槸閫忔槑锛屼笖瀹藉害鏄湁棰滆壊杈圭殑涓€鍗婏紱鐩磋涓夎褰細璁剧疆涓€鏉¤竟鏈夐鑹诧紝鐒跺悗绱ф尐鐫€鐨勪换浣曚竴杈归€忔槑鍗冲彲銆?/li>

鐪嬩笅绀轰緥锛?/p>

澧炲ぇ鐐瑰嚮鍖哄煙

甯稿父鍦ㄧЩ鍔ㄧ鐨勬椂鍊欑偣鍑荤殑鎸夐挳鐨勫尯鍩熺壒鍒皬锛屼絾鏄敱浜庣幇瀹炴晥鏋滃張涓嶅お濂芥妸瀹冨仛澶э紝鎵€浠ュ父鐢ㄧ殑涓€涓墜娈靛氨鏄€氳繃閫忔槑鐨勮竟妗嗘潵澧炲ぇ鎸夐挳鐨勭偣鍑诲尯鍩燂細

.btn {
    border: 5px solid transparent;
}
澶嶅埗浠ｇ爜

currentColor 鍏抽敭瀛?/h4>

currentColor 浼氬彇褰撳墠鍏冪礌缁ф壙鐖剁骇鍏冪礌鐨勬枃鏈鑹插€兼垨澹版槑鐨勬枃鏈鑹插€硷紝鍗?computed 鍚庣殑 color 鍊笺€?/p>

姣斿锛屽浜庡涓?CSS锛岃鍏冪礌鐨勮竟妗嗛鑹蹭細鏄?red锛?/p>

.btn {
    color: red;
    border: 1px solid currentColor;
}
澶嶅埗浠ｇ爜

RGB[A] 棰滆壊

RGB[A] 棰滆壊鏄敱 R(red)-G(green)-B(blue)-A(alpha) 缁勬垚鐨勮壊褰╃┖闂淬€?/p>

鍦?CSS 涓紝瀹冩湁涓ょ琛ㄧず褰㈠紡锛?/p>

• 鍗佸叚杩涘埗绗﹀彿锛?/li>
• 鍑芥暟绗︼紱

鍗佸叚杩涘埗绗﹀彿

RGB 涓殑姣忕棰滆壊鐨勫€艰寖鍥存槸 00~ff锛屽€艰秺澶ц〃绀洪鑹茶秺娣便€傛墍浠ヤ竴涓鑹叉甯告槸 6 涓崄鍏繘鍒跺瓧绗﹀姞涓?# 缁勬垚锛屾瘮濡傜孩鑹插氨鏄?#ff0000銆?/p>

濡傛灉 RGB 棰滆壊闇€瑕佸姞涓婁笉閫忔槑搴︼紝閭ｅ氨闇€瑕佸姞涓?alpha 閫氶亾鐨勫€硷紝瀹冪殑鑼冨洿涔熸槸 00~ff锛屾瘮濡備竴涓甫涓嶉€忔槑搴︿负 67% 鐨勭孩鑹插彲浠ヨ繖鏍峰啓 #ff0000aa銆?/p>

浣跨敤鍗佸叚杩涘埗绗﹀彿琛ㄧず棰滆壊鐨勬椂鍊欙紝閮芥槸鐢?2 涓崄鍏繘鍒惰〃绀轰竴涓鑹诧紝濡傛灉杩?2 涓瓧绗︾浉鍚岋紝杩樺彲浠ョ缉鍑忔垚鍙啓 1 涓紝姣斿锛岀孩鑹?#f00锛涘甫 67% 涓嶉€忔槑搴︾殑绾㈣壊 #f00a銆?/p>

鍑芥暟绗?/strong>

褰?RGB 鐢ㄥ嚱鏁拌〃绀虹殑鏃跺€欙紝姣忎釜鍊肩殑鑼冨洿鏄?0~255 鎴栬€?0%~100%锛屾墍浠ョ孩鑹叉槸 rgb(255, 0, 0)锛?鎴栬€?rgb(100%, 0, 0)銆?/p>

濡傛灉闇€瑕佷娇鐢ㄥ嚱鏁版潵琛ㄧず甯︿笉閫忔槑搴︾殑棰滆壊鍊硷紝鍊肩殑鑼冨洿鏄?0~1 鍙婂叾涔嬮棿鐨勫皬鏁版垨鑰?0%~100%锛屾瘮濡傚甫 67% 涓嶉€忔槑搴︾殑绾㈣壊鏄?rgba(255, 0, 0, 0.67) 鎴栬€?rgba(100%, 0%, 0%, 67%)

闇€瑕佹敞鎰忕殑鏄?RGB 杩?3 涓鑹插€奸渶瑕佷繚鎸佷竴鑷寸殑鍐欐硶锛岃鍢涚敤鏁板瓧瑕佸槢鐢ㄧ櫨鍒嗘瘮锛岃€屼笉閫忔槑搴︾殑鍊肩殑鍙互涓嶇敤鍜?RGB 淇濇寔涓€鑷村啓娉曘€傛瘮濡?rgb(100%, 0, 0) 杩欎釜鍐欐硶鏄棤鏁堢殑锛涜€?rgb(100%, 0%, 0%, 0.67) 鏄湁鏁堢殑銆?/p>

鍦ㄧ 4 浠?CSS 棰滆壊鏍囧噯涓紝鏂板浜嗕竴绉嶆柊鐨勫嚱鏁板啓娉曪紝鍗冲彲浠ユ妸 RGB 涓€肩殑鍒嗛殧閫楀彿鏀规垚绌烘牸锛岃€屾妸 RGB 鍜?alpha 涓殑閫楀彿鏀规垚 /锛屾瘮濡傚甫 67% 涓嶉€忔槑搴︾殑绾㈣壊鍙互杩欐牱鍐?rgba(255 0 0 / 0.67)銆傚彟澶栬繕鎶?rgba 鐨勫啓娉曞悎骞跺埌 rgb 鍑芥暟涓簡锛屽嵆 rgb 鍙互鐩存帴鍐欏甫涓嶉€忔槑搴︾殑棰滆壊銆?/p>

HSL[A] 棰滆壊

HSL[A] 棰滆壊鏄敱鑹茬浉(hue)-楗卞拰搴?saturation)-浜害(lightness)-涓嶉€忔槑搴︾粍鎴愮殑棰滆壊浣撶郴銆?/p>

• 鑹茬浉锛圚锛夋槸鑹插僵鐨勫熀鏈睘鎬э紝鍊艰寖鍥存槸 0360 鎴栬€?0deg360deg锛?0 (鎴?360) 涓虹孩鑹? 120 涓虹豢鑹? 240 涓鸿摑鑹诧紱
• 楗卞拰搴︼紙S锛夋槸鎸囪壊褰╃殑绾害锛岃秺楂樿壊褰╄秺绾紝浣庡垯閫愭笎鍙樼伆锛屽彇 0~100% 鐨勬暟鍊硷紱0% 涓虹伆鑹诧紝 100% 鍏ㄨ壊锛?/li>
• 浜害锛圠锛夛紝鍙?0~100%锛?% 涓烘殫锛?00% 涓虹櫧锛?/li>
• 涓嶉€忔槑搴︼紙A锛夛紝鍙?0100%锛屾垨鑰?1鍙婁箣闂寸殑灏忔暟锛?/li>

鍐欐硶涓婂彲浠ュ弬鑰?RGB 鐨勫啓娉曪紝鍙槸鍙傛暟鐨勫€间笉涓€鏍枫€?/p>

缁欎竴涓寜閽缃笉閫忔槑搴︿负 67% 鐨勭孩鑹茬殑 color 鐨勫啓娉曪紝浠ヤ笅鍏ㄩ儴鍐欐硶鏁堟灉涓€鑷达細

button {
    color: #ff0000aa;
    color: #f00a;
    color: rgba(255, 0, 0, 0.67);
    color: rgb(100% 0% 0% / 67%);
    color: hsla(0, 100%, 50%, 67%);
    color: hsl(0deg 100% 50% / 67%);
}
澶嶅埗浠ｇ爜

灏忔彁绀猴細鍦?Chrome DevTools 涓彲浠ユ寜浣?shift + 榧犳爣宸﹂敭鍙互鍒囨崲棰滆壊鐨勮〃绀烘柟寮忋€?/p>

濯掍綋鏌ヨ

濯掍綋鏌ヨ鏄寚閽堝涓嶅悓鐨勮澶囥€佺壒瀹氱殑璁惧鐗瑰緛鎴栬€呭弬鏁拌繘琛屽畾鍒跺寲鐨勪慨鏀圭綉绔欑殑鏍峰紡銆?/p>

浣犲彲浠ラ€氳繃缁?<link> 鍔犱笂 media 灞炴€ф潵鎸囧畾璇ユ牱寮忔枃浠跺彧鑳藉浠€涔堣澶囩敓鏁堬紝涓嶆寚瀹氱殑璇濋粯璁ゆ槸 all锛屽嵆瀵规墍鏈夎澶囬兘鐢熸晥锛?/p>

<link rel="stylesheet" src="styles.css" media="screen" />
<link rel="stylesheet" src="styles.css" media="print" />
澶嶅埗浠ｇ爜

閮芥敮鎸佸摢浜涜澶囩被鍨嬶紵

• all锛氶€傜敤浜庢墍鏈夎澶囷紱
• print锛氶€傜敤浜庡湪鎵撳嵃棰勮妯″紡涓嬪湪灞忓箷涓婃煡鐪嬬殑鍒嗛〉鏉愭枡鍜屾枃妗ｏ紱
• screen锛氫富瑕佺敤浜庡睆骞曪紱
• speech锛氫富瑕佺敤浜庤闊冲悎鎴愬櫒銆?/li>

闇€瑕佹敞鎰忕殑鏄細閫氳繃 media 鎸囧畾鐨?璧勬簮灏界涓嶅尮閰嶅畠鐨勮澶囩被鍨嬶紝浣嗘槸娴忚鍣ㄤ緷鐒朵細鍔犺浇瀹冦€?/p>

闄や簡閫氳繃 <link> 璁╂寚瀹氳澶囩敓鏁堝锛岃繕鍙互閫氳繃 @media 璁?CSS 瑙勫垯鍦ㄧ壒瀹氱殑鏉′欢涓嬫墠鑳界敓鏁堛€傚搷搴斿紡椤甸潰灏辨槸浣跨敤浜?@media 鎵嶈涓€涓〉闈㈣兘澶熷悓鏃堕€傞厤 PC銆丳ad 鍜屾墜鏈虹銆?/p>

@media (min-width: 1000px) {}
澶嶅埗浠ｇ爜

濯掍綋鏌ヨ鏀寔閫昏緫鎿嶄綔绗︼細

• and锛氭煡璇㈡潯浠堕兘婊¤冻鐨勬椂鍊欐墠鐢熸晥锛?/li>
• not锛氭煡璇㈡潯浠跺彇鍙嶏紱
• only锛氭暣涓煡璇㈠尮閰嶇殑鏃跺€欐墠鐢熸晥锛屽父鐢ㄨ鍏煎鏃ф祻瑙堝櫒锛屼娇鐢ㄦ椂鍊欏繀椤绘寚瀹氬獟浣撶被鍨嬶紱
• 閫楀彿鎴栬€?or锛氭煡璇㈡潯浠舵弧瓒充竴椤瑰嵆鍙尮閰嶏紱

濯掍綋鏌ヨ杩樻敮鎸佷紬澶氱殑濯掍綋鐗规€э紝浣垮緱瀹冨彲浠ュ啓鍑哄緢澶嶆潅鐨勬煡璇㈡潯浠讹細

/* 鐢ㄦ埛璁惧鐨勬渶灏忛珮搴︿负680px鎴栦负绾靛悜妯″紡鐨勫睆骞曡澶?*/
@media (min-height: 680px), screen and (orientation: portrait) {}
澶嶅埗浠ｇ爜

甯歌闇€姹?/h2>

鑷畾涔夊睘鎬?/h3>

涔嬪墠鎴戜滑閫氬父鏄湪棰勫鐞嗗櫒閲屾墠鍙互浣跨敤鍙橀噺锛岃€岀幇鍦?CSS 閲屼篃鏀寔浜嗗彉閲忕殑鐢ㄦ硶銆傞€氳繃鑷畾涔夊睘鎬у氨鍙互鍦ㄦ兂瑕佷娇鐢ㄧ殑鍦版柟寮曠敤瀹冦€?/p>

鑷畾涔夊睘鎬т篃鍜屾櫘閫氬睘鎬т竴鏍峰叿鏈夌骇鑱旀€э紝鐢虫槑鍦?:root 涓嬬殑鏃跺€欙紝鍦ㄥ叏鏂囨。鑼冨洿鍐呭彲鐢紝鑰屽鏋滄槸鍦ㄦ煇涓厓绱犱笅鐢虫槑鑷畾涔夊睘鎬э紝鍒欏彧鑳藉湪瀹冨強瀹冪殑瀛愬厓绱犱笅鎵嶅彲浠ヤ娇鐢ㄣ€?/p>

鑷畾涔夊睘鎬у繀椤婚€氳繃 --x 鐨勬牸寮忕敵鏄庯紝姣斿锛?-theme-color: red; 浣跨敤鑷畾涔夊睘鎬х殑鏃跺€欙紝闇€瑕佺敤 var 鍑芥暟銆傛瘮濡傦細

<!-- 瀹氫箟鑷畾涔夊睘鎬?-->
:root {
    --theme-color: red;
}

<!-- 浣跨敤鍙橀噺 -->
h1 {
    color: var(--theme-color);
}
澶嶅埗浠ｇ爜

涓婂浘杩欎釜鏄娇鐢?CSS 鑷畾涔夊睘鎬ч厤鍚?JS 瀹炵幇鐨勫姩鎬佽皟鏁村厓绱犵殑 box-shadow锛屽叿浣撳彲浠ョ湅杩欎釜 codepen demo銆?/p>

1px 杈规瑙ｅ喅鏂规

Retina 鏄剧ず灞忔瘮鏅€氱殑灞忓箷鏈夌潃鏇撮珮鐨勫垎杈ㄧ巼锛屾墍浠ュ湪绉诲姩绔殑 1px 杈规灏变細鐪嬭捣鏉ユ瘮杈冪矖锛屼负浜嗙編瑙傞€氬父闇€瑕佹妸杩欎釜绾挎潯缁嗗寲澶勭悊銆傝繖閲屾湁绡囨枃绔犲垪涓句簡 7 涓柟妗堝彲浠ュ弬鑰冧竴涓嬶細7绉嶆柟娉曡В鍐崇Щ鍔ㄧRetina灞忓箷1px杈规闂

鑰岃繖閲岄檮涓婃渶鍚庝竴绉嶉€氳繃浼被鍜?transform 瀹炵幇鐨勭浉瀵瑰畬缇庣殑瑙ｅ喅鏂规锛?/p>

鍙缃崟鏉″簳閮ㄨ竟妗嗭細

.scale-1px-bottom {
    position: relative;
    border:none;
}
.scale-1px-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
澶嶅埗浠ｇ爜

鍚屾椂璁剧疆 4 鏉¤竟妗嗭細

.scale-1px {
    position: relative;
    margin-bottom: 20px;
    border:none;
}
.scale-1px::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
澶嶅埗浠ｇ爜

娓呴櫎娴姩

浠€涔堟槸娴姩锛氭诞鍔ㄥ厓绱犱細鑴辩鏂囨。娴佸苟鍚戝乏/鍚戝彸娴姩锛岀洿鍒扮鍒扮埗鍏冪礌鎴栬€呭彟涓€涓诞鍔ㄥ厓绱犮€?/p>

涓轰粈涔堣娓呮娴姩锛屽畠閫犳垚浜嗕粈涔堥棶棰橈紵

鍥犱负娴姩鍏冪礌浼氳劚绂绘甯哥殑鏂囨。娴侊紝骞朵笉浼氬崰鎹枃妗ｆ祦鐨勪綅缃紝鎵€浠ュ鏋滀竴涓埗鍏冪礌涓嬮潰閮芥槸娴姩鍏冪礌锛岄偅涔堣繖涓埗鍏冪礌灏辨棤娉曡娴姩鍏冪礌鎵€鎾戝紑锛岃繖鏍蜂竴鏉ョ埗鍏冪礌灏变涪澶变簡楂樺害锛岃繖灏辨槸鎵€璋撶殑娴姩閫犳垚鐨勭埗鍏冪礌楂樺害鍧嶅闂銆?/p>

鐖跺厓绱犻珮搴︿竴鏃﹀潔濉屽皢瀵瑰悗闈㈢殑鍏冪礌甯冨眬閫犳垚褰卞搷锛屼负浜嗚В鍐宠繖涓棶棰橈紝鎵€浠ラ渶瑕佹竻闄ゆ诞鍔紝璁╃埗鍏冪礌鎭㈠楂樺害锛岄偅璇ュ浣曞仛鍛紵

杩欓噷浠嬬粛涓ょ鏂规硶锛氶€氳繃 BFC 鏉ユ竻闄ゃ€侀€氳繃 clear 鏉ユ竻闄ゃ€?/p>

BFC 娓呴櫎娴姩

鍓嶉潰浠嬬粛 BFC 鐨勬椂鍊欐彁鍒拌繃锛岃绠?BFC 楂樺害鐨勬椂鍊欐诞鍔ㄥ瓙鍏冪礌鐨勯珮搴︿篃灏嗚绠楀湪鍐咃紝鍒╃敤杩欐潯瑙勫垯灏卞彲浠ユ竻妤氭诞鍔ㄣ€?/p>

鍋囪涓€涓埗鍏冪礌 parent 鍐呴儴鍙湁 2 涓瓙鍏冪礌 child锛屼笖瀹冧滑閮芥槸宸︽诞鍔ㄧ殑锛岃繖涓椂鍊?parent 濡傛灉娌℃湁璁剧疆楂樺害鐨勮瘽锛屽洜涓烘诞鍔ㄩ€犳垚浜嗛珮搴﹀潔濉岋紝鎵€浠?parent 鐨勯珮搴︿細鏄?0锛屾鏃跺彧瑕佺粰 parent 鍒涢€犱竴涓?BFC锛岄偅瀹冪殑楂樺害灏辫兘鎭㈠浜嗐€?/p>

鑰屼骇鐢?BFC 鐨勬柟寮忓緢澶氾紝鎴戜滑鍙互缁欑埗鍏冪礌璁剧疆overflow: auto 鏉ョ畝鍗曠殑瀹炵幇 BFC 娓呴櫎娴姩锛屼絾鏄负浜嗗吋瀹?IE 鏈€濂界敤 overflow: hidden銆?/p>

.parent {
    overflow: hidden;
}
澶嶅埗浠ｇ爜

閫氳繃 overflow: hidden 鏉ユ竻闄ゆ诞鍔ㄥ苟涓嶅畬缇庯紝褰撳厓绱犳湁闃村奖鎴栧瓨鍦ㄤ笅鎷夎彍鍗曠殑鏃跺€欎細琚埅鏂紝鎵€浠ヨ鏂规硶浣跨敤姣旇緝灞€闄愩€?/p>

閫氳繃 clear 娓呴櫎娴姩

鎴戝厛鎶婄粨璁鸿创鍑烘潵锛?/p>

.clearfix {
    zoom: 1;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
澶嶅埗浠ｇ爜

杩欑鍐欐硶鐨勬牳蹇冨師鐞嗗氨鏄€氳繃 ::after 浼厓绱犱负鍦ㄧ埗鍏冪礌鐨勬渶鍚庝竴涓瓙鍏冪礌鍚庨潰鐢熸垚涓€涓唴瀹逛负绌虹殑鍧楃骇鍏冪礌锛岀劧鍚庨€氳繃 clear 灏嗚繖涓吉鍏冪礌绉诲姩鍒版墍鏈夊畠涔嬪墠鐨勬诞鍔ㄥ厓绱犵殑鍚庨潰锛岀敾涓浘鏉ョ悊瑙ｄ竴涓嬨€?/p>

鍙互缁撳悎杩欎釜 codepen demo 涓€璧风悊瑙ｄ笂鍥剧殑 clear 娓呮娴姩鍘熺悊銆?/p>

涓婇潰杩欎釜 demo 鎴栬€呭浘閲屼负浜嗗睍绀洪渶瑕佹墍浠ョ粰浼厓绱犵殑鍐呭璁剧疆涓轰簡 ::after锛屽疄闄呬娇鐢ㄧ殑鏃跺€欓渶瑕佽缃负绌哄瓧绗︿覆锛岃瀹冪殑楂樺害涓?0锛屼粠鑰岀埗鍏冪礌鐨勯珮搴﹂兘鏄敱瀹為檯鐨勫瓙鍏冪礌鎾戝紑銆?/p>

璇ユ柟寮忓熀鏈笂鏄幇鍦ㄤ汉浜洪兘鍦ㄧ敤鐨勬竻闄ゆ诞鍔ㄧ殑鏂规锛岄潪甯搁€氱敤銆?/p>

鍙傝€冿細CSS涓殑娴姩鍜屾竻闄ゆ诞鍔紝姊崇悊涓€涓?/p>

娑堥櫎娴忚鍣ㄩ粯璁ゆ牱寮?/h3>

閽堝鍚屼竴涓被鍨嬬殑 HTML 鏍囩锛屼笉鍚岀殑娴忚鍣ㄥ線寰€鏈変笉鍚岀殑琛ㄧ幇锛屾墍浠ュ湪缃戠珯鍒朵綔鐨勬椂鍊欙紝寮€鍙戣€呴€氬父閮芥槸闇€瑕佸皢杩欎簺娴忚鍣ㄧ殑榛樿鏍峰紡娓呴櫎锛岃缃戦〉鍦ㄤ笉鍚岀殑娴忚鍣ㄤ笂鑳藉淇濇寔涓€鑷淬€?/p>

閽堝娓呴櫎娴忚鍣ㄩ粯璁ゆ牱寮忚繖浠朵簨锛屽湪寰堟棭涔嬪墠 CSS 澶у笀 Eric A. Meyer 灏卞共杩囥€傚畠灏辨槸鍐欎竴鍫嗛€氱敤鐨勬牱寮忕敤鏉ラ噸缃祻瑙堝櫒榛樿鏍峰紡锛岃繖浜涙牱寮忛€氬父浼氭斁鍒颁竴涓懡鍚嶄负 reset.css 鏂囦欢涓€傛瘮濡傚ぇ甯堢殑 reset.css 鏄繖涔堝啓鐨勶細

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
澶嶅埗浠ｇ爜

浠栫殑杩欎唤 reset.css 鎹鏄浣跨敤鏈€骞挎硾鐨勯噸璁炬牱寮忕殑鏂规浜嗐€?/p>

闄や簡 reset.css 澶栵紝鍚庢潵鍙堝嚭鐜颁簡 Normalize.css 銆傚叧浜?Normalize.css, 鍏朵綔鑰?necolas 涓撻棬鍐欎簡涓€绡囨枃绔犱粙缁嶄簡瀹冿紝骞惰皥鍒颁簡瀹冨拰 reset.css 鐨勫尯鍒€傝繖涓槸浠栧啓閭ｇ瘒鏂囩珷鐨勭炕璇戠増锛氳鎴戜滑璋堜竴璋?Normalize.css銆?/p>

鏂囩珷浠嬬粛鍒帮細Normalize.css 鍙槸涓€涓緢灏忕殑CSS鏂囦欢锛屼絾瀹冨湪榛樿鐨?HTML 鍏冪礌鏍峰紡涓婃彁渚涗簡璺ㄦ祻瑙堝櫒鐨勯珮搴︿竴鑷存€с€傜浉姣斾簬浼犵粺鐨?CSS reset锛孨ormalize.css 鏄竴绉嶇幇浠ｇ殑銆佷负 HTML5 鍑嗗鐨勪紭璐ㄦ浛浠ｆ柟妗堬紝鐜板湪宸茬粡鏈夊緢澶氱煡鍚嶇殑妗嗘灦鍜岀綉绔欏湪浣跨敤瀹冧簡銆?/p>

Normalize.css 鐨勫叿浣撴牱寮忓彲浠ョ湅杩欓噷 Normalize.css

鍖哄埆浜?reset.css锛孨ormalize.css 鏈夊涓嬬壒鐐癸細

• reset.css 鍑犱箮涓烘墍鏈夋爣绛鹃兘璁剧疆浜嗛粯璁ゆ牱寮忥紝鑰?Normalize.css 鍒欐槸鏈夐€夋嫨鎬х殑淇濇姢浜嗛儴鍒嗘湁浠峰€肩殑榛樿鍊硷紱
• 淇浜嗗緢澶氭祻瑙堝櫒鐨?bug锛岃€岃繖鏄?reset.css 娌″仛鍒扮殑锛?/li>
• 涓嶄細璁╀綘鐨勮皟璇曞伐鍏峰彉鐨勬潅涔憋紝鐩稿弽 reset.css 鐢变簬璁剧疆浜嗗緢澶氶粯璁ゅ€硷紝鎵€浠ュ湪娴忚鍣ㄨ皟璇曞伐鍏蜂腑寰€寰€浼氱湅鍒颁竴澶у爢鐨勭户鎵挎牱寮忥紝鏄惧緱寰堟潅涔憋紱
• Normalize.css 鏄ā鍧楀寲鐨勶紝鎵€浠ュ彲浠ラ€夋嫨鎬х殑鍘绘帀姘歌繙涓嶄細鐢ㄥ埌鐨勯儴鍒嗭紝姣斿琛ㄥ崟鐨勪竴鑸寲锛?/li>
• Normalize.css 鏈夎缁嗙殑璇存槑鏂囨。锛?/li>

闀挎枃鏈鐞?/h3>

榛樿锛氬瓧绗﹀お闀挎孩鍑轰簡瀹瑰櫒

瀛楃瓒呭嚭閮ㄥ垎鎹㈣

瀛楃瓒呭嚭浣嶇疆浣跨敤杩炲瓧绗?/strong>

鍗曡鏂囨湰瓒呭嚭鐪佺暐

澶氳鏂囨湰瓒呭嚭鐪佺暐

鏌ョ湅浠ヤ笂杩欎簺鏂规鐨勭ず渚嬶細 codepen demo

鏈夋剰鎬濈殑鏄垰濂藉墠涓ゅぉ鐪嬪埌 chokcoco 閽堝鏂囨湰婧㈠嚭涔熷啓浜嗕竴绡囨枃绔狅紝涓昏绐佸嚭鐨勬槸瀵规暣鍧楃殑鏂囨湰婧㈠嚭澶勭悊銆傚暐鍙暣鍧楁枃鏈紵姣斿锛屼笅闈㈣繖绉嶆妧鏈爣绛惧氨鏄睘浜庢暣鍧楁枃鏈細

鍙﹀浠栬繕瀵?iOS/Safari 鍋氫簡鍏煎澶勭悊锛屾劅鍏磋叮鐨勫彲浠ュ幓闃呰涓嬶細CSS 鏁村潡鏂囨湰婧㈠嚭鐪佺暐鐗规€ф帰绌躲€?/p>

姘村钩鍨傜洿灞呬腑

璁╁厓绱犲湪鐖跺厓绱犱腑鍛堢幇鍑烘按骞冲瀭鐩村眳涓殑褰㈡€侊紝鏃犻潪灏?2 绉嶆儏鍐碉細

• 鍗曡鐨勬枃鏈€乮nline 鎴栬€?inline-block 鍏冪礌锛?/li>
• 鍥哄畾瀹介珮鐨勫潡绾х洅瀛愶紱
• 涓嶅浐瀹氬楂樼殑鍧楃骇鐩掑瓙锛?/li>

浠ヤ笅鍒楀埌鐨勬墍鏈夋按骞冲瀭鐩村眳涓柟妗堣繖閲屽啓浜嗕釜 codepen demo锛岄厤鍚堢ず渚嬮槄璇绘晥鏋滄洿浣炽€?/p>

鍗曡鐨勬枃鏈€乮nline 鎴?inline-block 鍏冪礌

姘村钩灞呬腑

姝ょ被鍏冪礌闇€瑕佹按骞冲眳涓紝鍒欑埗绾у厓绱犲繀椤绘槸鍧楃骇鍏冪礌(block level)锛屼笖鐖剁骇鍏冪礌涓婇渶瑕佽繖鏍疯缃牱寮忥細

.parent {
    text-align: center;
}
澶嶅埗浠ｇ爜

鍨傜洿灞呬腑

鏂规硶涓€锛氶€氳繃璁剧疆涓婁笅鍐呴棿璺濅竴鑷磋揪鍒板瀭鐩村眳涓殑鏁堟灉锛?/p>

.single-line {
    padding-top: 10px;
    padding-bottom: 10px;
}
澶嶅埗浠ｇ爜

鏂规硶浜岋細閫氳繃璁剧疆 height 鍜?line-height 涓€鑷磋揪鍒板瀭鐩村眳涓細

.single-line {
    height: 100px;
    line-height: 100px;
}
澶嶅埗浠ｇ爜

鍥哄畾瀹介珮鐨勫潡绾х洅瀛?/h4>

鏂规硶涓€锛歛bsolute + 璐?margin

鏂规硶浜岋細absolute + margin auto

鏂规硶涓夛細absolute + calc

涓嶅浐瀹氬楂樼殑鍧楃骇鐩掑瓙

杩欓噷鍒椾簡 6 绉嶆柟娉曪紝鍙傝€冧簡棰滄捣闀?鍐欑殑鏂囩珷 锛屽叾涓殑涓ょ line-height 鍜?writing-mode 鏂规鐪嬪悗璁╂垜鎯婂懠锛氳繕鏈夎繖绉嶆搷浣滐紵瀛﹀埌浜嗗鍒颁簡銆?/p>

鏂规硶涓€锛歛bsolute + transform

鏂规硶浜岋細line-height + vertical-align

鏂规硶涓夛細writing-mode

鏂规硶鍥涳細table-cell

鏂规硶浜旓細flex

鏂规硶鍏細grid

甯哥敤甯冨眬

涓ゆ爮甯冨眬锛堣竟鏍忓畾瀹戒富鏍忚嚜閫傚簲锛?/h4>

閽堝浠ヤ笅杩欎簺鏂规鍐欎簡鍑犱釜绀轰緥锛?codepen demo

鏂规硶涓€锛歠loat + overflow锛圔FC 鍘熺悊锛?/strong>

鏂规硶浜岋細float + margin

鏂规硶涓夛細flex

鏂规硶鍥涳細grid

涓夋爮甯冨眬锛堜袱渚ф爮瀹氬涓绘爮鑷€傚簲锛?/h4>

閽堝浠ヤ笅杩欎簺鏂规鍐欎簡鍑犱釜绀轰緥锛?codepen demo

鏂规硶涓€锛氬湥鏉竷灞€

鏂规硶浜岋細鍙岄缈煎竷灞€

鏂规硶涓夛細float + overflow锛圔FC 鍘熺悊锛?/strong>

鏂规硶鍥涳細flex

鏂规硶浜旓細grid

澶氬垪绛夐珮甯冨眬

缁撳悎绀轰緥闃呰鏇翠匠锛歝odepen demo

鏂规硶涓€锛歱adding + 璐焟argin

鏂规硶浜岋細璁剧疆鐖剁骇鑳屾櫙鍥剧墖

涓夎甯冨眬锛堝ご灏惧畾楂樹富鏍忚嚜閫傚簲锛?/h4>

鍒椾簡 4 绉嶆柟娉曪紝閮芥槸鍩轰簬濡備笅鐨?HTML 鍜?CSS 鐨勶紝缁撳悎绀轰緥闃呰鏁堟灉鏇翠匠锛歝odepen demo

<div class="layout">
    <header></header>
    <main>
        <div class="inner"></div>
    </main>
    <footer></footer>
</div>
澶嶅埗浠ｇ爜

html,
body,
.layout {
    height: 100%;
}
body {
    margin: 0;
}
header, 
footer {
    height: 50px;
}
main {
    overflow-y: auto;
}
澶嶅埗浠ｇ爜

鏂规硶涓€锛歝alc

鏂规硶浜岋細absolute

鏂规硶涓夛細flex

鏂规硶鍥涳細grid

缁撲簡涓熬

杩欐槸鎴戞柇鏂画缁啓浜?2 鍛ㄥ畬鎴愮殑鏂囩珷锛岀畻鏄嚜宸卞 CSS 鐨勪竴涓€荤粨锛岃櫧鐒跺啓寰楀緢闀匡紝浣嗕笉瓒充互瑕嗙洊鎵€鏈?CSS 鐨勭煡璇嗭紝姣斿鍔ㄧ敾鍜屼竴浜?CSS3 鐨勬柊鐗规€у氨瀹屽叏娌℃秹鍙婏紝鍥犱负杩欒鍐欎笅鏉ヤ及璁″緱鏈夊ぇ鍑犱竾瀛楋紙鍏跺疄灏辨槸鎳?馃槤 锛夈€?/p> 浜嗚В鏇村鍔犲叆鎴戜滑鍓嶇瀛︿範鍦?/p>