ParsingCSSFormattingContext
时间：2023-03-31 13:23:07
CSS
瑙ｆ瀽CSSFormattingContext猸愶笍鏇村鍓嶇鎶€鏈拰鐭ヨ瘑鐐癸紝鎼滅储璁㈤槄鍙稪S缁嗚弻璁㈤槄鉁达笍BFCBlockFormattingContextBFC锛圔lockFormattingContexts锛夛紝鍧楁牸寮忓寲涓婁笅鏂囥€侭FC瀹為檯涓婃槸椤甸潰涓殑涓€涓覆鏌撳尯鍩燂紝涓庡叾浠栧尯鍩熼殧绂汇€傚鍣ㄥ唴鐨勫瓙鍏冪礌涓嶄細褰卞搷澶栭儴锛屽閮ㄥ厓绱犱笉浼氬奖鍝嶅鍣ㄥ唴鐨勫瓙鍏冪礌銆傪煢奡pecificationBFC鍐呯殑boxes浼氫粠涓婂埌涓嬩緷娆℃帓鍒椼€侭FC涓瀭鐩存鐨勮窛绂诲彈margin灞炴€у奖鍝嶏紝涓婁笅杈硅窛浼氬彔鍔犮€傛瘡涓厓绱犵殑鏈€宸﹀杈圭晫瑙﹀強鍖呭惈鍧桞FC鐨勫乏渚э紙瀵逛簬浠庡乏鍒板彸鐨勬牸寮忥紝鍙嶄箣浜︾劧锛夈€傚嵆浣垮瓨鍦ㄦ诞鍔ㄤ篃鏄姝ゃ€侭FC鐨勫尯鍩熶笉闅忔诞鍔ㄦ濉岄櫡銆侭FC鐨勯珮搴﹁繕鍙楁诞鍔ㄥ厓绱犵殑褰卞搷锛屾诞鍔ㄥ厓绱犲弬涓庤绠椼€傪煔╀富瑕佷綔鐢ㄦ槸鍒涘缓涓€涓嫭绔嬬殑娓叉煋鐜锛岄槻姝㈤珮搴﹀洜娴姩鑰屽闄凤紝闃叉涓婁笅鐩搁偦杈硅窛濉岄櫡銆傚浣曞垱寤轰竴涓狟FChtml鍏冪礌鏈韩灏辨槸涓€涓狟FCdisplay===flow-root/inline-block/table-cell/table-caption/table/table-row/table-row-group/table-header-group/table-footer-group/inline-table/flex/inline-flex/grid/inline-gridposition===absolute/fixedcontain===strict/layout/paint/contentfloat!==noneoverflow!==visible鉁旓笍鏈€甯哥敤鐨勫垪鏁帮紒==autocolumn-width!==autocolumn-span===alldisplayastable灏嗙敓鎴愪竴涓尶鍚嶈〃鏍煎崟鍏冩牸锛沝isplayasflow-rot鏄疌SS2涓紩鍏ョ殑娴佸紡甯冨眬銆俢ontain灞炴€у彲浠ユ洿楂樻晥鍦版覆鏌撳厓绱狅紝浣嗗吋瀹规€ц緝宸€傝鎯呭弬瑙侊細https://developers.google.com...锛沠lex甯冨眬鍜岀綉鏍煎竷灞€鐢熸垚鐨勬牸寮忓寲涓婁笅鏂囨湁鏃剁О涓篎FC/GFC闃叉姌鍙犵殑渚嬪瓙馃尠div{border:1pxsolidgray;/*婧㈠嚭锛氶殣钘忥紱*/}p{float:left;}
鍒涘缓BFC鍚庨伩鍏嶆姌鍙狆煂癲iv:nth-of-type(2){background:red;/*婧㈠嚭锛氶殣钘忥紱*/}.this{border:1pxsolidgray;margin:20px0;
1锔忊儯 鍒涘缓BFC鍚庘湷锔廔FC鍐呰仈鏍煎紡鍖栦笂涓嬫枃IFC(Inline鏍煎紡鍖栦笂涓嬫枃锛夛紝鍐呰仈鏍煎紡鍖栦笂涓嬫枃銆侷FC涓璴ine-box锛堜篃绉颁负linebox锛夌殑楂樺害鏄牴鎹寘鍚鍐呭厓绱犵殑鏈€楂樺疄闄呴珮搴﹁绠楃殑銆傦紙鍨傜洿鏂瑰悜涓嶅彈padding/margin褰卞搷锛夝煔哥浉鍏崇煡璇嗙偣vertex,centerline,baseline,bottomline,andlinespacing,halflinespacing,font-sizesize,line-heightsize瑙佸浘锛歩nline-boxinlinebox锛岄珮搴︾敱font-size鍐冲畾line-box绾挎锛岄珮搴︾敱lineboxcontentarea鍐呭鍖哄煙涓璴inebox鐨勬渶澶ч珮搴﹀喅瀹氾紝height鏄痜ont-size鍜宲addingandcontainingboxcontainingbox锛屾渶澶栭潰鐨勫寘瑁规璁＄畻鏂瑰紡锛氬浐瀹氬€硷紝濡傛灉璁剧疆鍥哄畾鍊硷紝姣斿20px锛岄偅涔堣楂樻槸20px鐨勭櫨鍒嗘瘮锛屽綋鍓峟ont-size*percentage锛屽嵆琛岄珮涓簄ormal鎴栨暟瀛楋紝normal涓烘祻瑙堝櫒榛樿璁剧疆鐨勫€笺€備竴鑸负1.2銆傚鏋滄槸鑷畾涔夊€硷紝姣斿1.5锛岄偅涔堣楂樺氨鏄痜ont-size*1.5銆俵ine-height鐨勮绠楁柟娉曡杩欑瘒鏂囩珷https://segmentfault.com/a/11...瑙勮寖鍐呰仈鍏冪礌浠庡寘鍚潡椤堕儴寮€濮嬫按骞虫帓鍒楋紝涓€涓帴涓€涓紝margin/border/姘村钩鏂瑰悜鐨勫～鍏呯敓鏁堛€傚唴鑱斿厓绱犲彲浠ユ寜椤堕儴銆佸簳閮ㄦ垨鍩虹嚎鍨傜洿瀵归綈銆傚綋澶氫釜鍐呰仈鍏冪礌涓嶈兘姘村钩鏀剧疆鍦ㄥ崟涓鐩掍腑鏃讹紝灏嗗畠浠垎閰嶇粰涓や釜鎴栧涓紙鍨傜洿鍫嗗彔鐨勮鐩掞級鍨傜洿鍫嗗彔涓婄殑琛岀洅锛岃繖鏍蜂竴涓钀藉氨鏄涓嚎鐩掑瀭鐩村爢鍙犮€傝繖浜涚嚎鐩掑湪鍨傜洿鏂瑰悜涓婃病鏈夊垎寮€锛堥櫎闈炲彟鏈夎鏄庯級锛屽苟涓斿畠浠笉閲嶅彔銆傚湪鍨傜洿鏂瑰悜涓婏紝褰撳唴鑱斿厓绱犵殑楂樺害浣庝簬琛屾鏃讹紝閭ｄ箞vertical-align灞炴€у喅瀹氫簡鍨傜洿瀵归綈鏂瑰紡銆傚湪姘村钩鏂瑰悜涓婏紝褰撹鍐呭厓绱犵殑鎬诲搴﹀皬浜庤妗嗘椂锛岃鍐呭厓绱犲湪姘村钩鏂瑰悜涓婄殑鍒掑垎鐢眛ext-align鍐冲畾銆傚湪姘村钩鏂瑰悜锛屽綋琛屽唴鍏冪礌鐨勬€诲搴﹁秴杩囪鐩掓椂锛岃鍐呭厓绱犱細琚垎閰嶅埌澶氫釜琛岀洅銆傚鏋滆缃簡涓嶅彲鎶樺彔绛夊睘鎬э紝鍐呰仈鍏冪礌浼氭孩鍑鸿妗嗐€俵inebox鐨勫乏鍙充袱杈归兘浼氭帴瑙﹀埌containingblock锛宖loat鍏冪礌浼氭斁鍦╨inebox鍜宑ontainingblock涔嬮棿銆傛姌鍙狅細
balabala...helloworld琛屽唴鏍煎紡鍖栦笂涓嬫枃
绌洪棿涓嶈冻鐨勬姌鍙狅細涓昏浣滅敤鏄牴鎹畉ext-align灏嗚鍐呭厓绱犳按骞冲眳涓睍寮€鐖跺厓绱犵殑楂樺害锛屽埄鐢╲ertical-align灞炴€ц繘琛屽瀭鐩村眳涓拰姘村钩鍨傜洿灞呬腑馃尠
helloworld鍐呰仈鏍煎紡鍖栦笂涓嬫枃
p{杈规锛?px绾伆鑹诧紱text-align:center;}.big{瀛椾綋澶у皬:60px;vertical-align:middle;}鍏朵粬杩樻湁GFC鍜孎FC锛屽垎鍒槸浜岀淮缃戞牸甯冨眬鍜岃嚜閫傚簲Flex甯冨眬銆備袱涓竷灞€鐢熸垚涓€涓綉鏍煎竷灞€鏍煎紡鍖栦笂涓嬫枃鍜屼竴涓嚜閫傚簲鏍煎紡鍖栦笂涓嬫枃銆傚弬鑰冿細https://developer.mozilla.org...https://segmentfault.com/a/11...https://www.w3.org/TR/CSS2/vi...璇峰叧娉ㄦ垜璁㈤槄鍙凤紝涓嶅畾鏈熸帹閫佸叧浜嶫S鐨勬妧鏈枃绔狅紝鍙皥鎶€鏈笉鍏崷馃槉
