在css中摊册，為每個元素生成了包含元素的盒子。盒子由 內(nèi)容區(qū)域 + 內(nèi)邊距 + 邊框 + 外邊距組成
注：css中box-sizing屬性值可用于設(shè)定其盒子模型健芭。默認值為 content-box （width = 內(nèi)容區(qū)域?qū)挾龋┚苎福籦order-box（width = content + padding + border）
css在執(zhí)行渲染的過程中颤练，將由元素轉(zhuǎn)化為的盒子，由左至右柠座，有上而下的排列形成文檔流邑雅。在正常的文檔流中，根據(jù)盒子的不同類型進行布局妈经。
盒子的類型：
主要分為塊級盒子和行內(nèi)級盒子淮野。
塊級盒子：不與其余盒子共享一行，垂直排列吹泡。在同一個BFC中骤星，會有上下邊距重疊現(xiàn)象。
行內(nèi)級盒子：由左向右排列爆哑，由行內(nèi)元素構(gòu)成洞难，組成IFC。行內(nèi)元素分為可替換元素和不可替換元素揭朝《蛹可替換元素，是指瀏覽器根據(jù)元素的屬性來判斷顯示的元素潭袱，例如input柱嫌，select，img...屯换，這類元素布局時 可設(shè)置寬高编丘，padding，border趟径，margin計入計算瘪吏。
相關(guān)基礎(chǔ)概念：
? ? visual formatting model 視覺格式化模型：將文檔樹根據(jù)css盒模型轉(zhuǎn)化為一個個盒子
????塊（block 垂直方向上依次堆疊），包含塊（包含其他盒子的塊）蜗巧，盒子（box）
? ??塊級元素（block-level element 元素本身的屬性）掌眠，塊級盒子（由塊級元素生成）,塊盒子（是塊容器的塊級盒子），匿名塊盒子（Anonymous block box 不能用CSS選擇符選中）幕屹，塊容器盒子（用于確定子元素的定位）
? ? 行內(nèi)級元素（inline-level element display?為?inline蓝丙、inline-block级遭、inline-table?的元素）,行內(nèi)級盒子（由行內(nèi)級元素生成），行內(nèi)盒子渺尘，具名行內(nèi)盒子挫鸽，匿名行內(nèi)盒子，原子行內(nèi)級盒子（不參與行內(nèi)格式化上下文創(chuàng)建的行內(nèi)級盒子鸥跟，原子行內(nèi)級盒子的內(nèi)容不會拆分成多行顯示）?
? ??Formatting Context 格式化上下文：擁有一套渲染規(guī)則的渲染區(qū)域
????替代元素：瀏覽器通過標簽的元素以及屬性來判斷顯示的內(nèi)容丢郊，比如<input> <img> ...
解析：
? ? 1 diaplay:block|list-item|table 的元素為塊級元素? ? 被格式化為至少一個 塊級盒子（參與BFC的創(chuàng)建）
? ? 2?匿名塊盒子：
? ? ?塊包含盒子中的塊級盒子時，在相鄰的行內(nèi)級盒子外創(chuàng)建匿名塊盒子? 該盒子的樣式從父元素繼承能被繼承的屬性医咨，不能繼承的被設(shè)置為initial
? ? 行內(nèi)級盒子內(nèi)包含塊級盒子時
3 display:inline|inline-block|inline-tabel 的元素為行內(nèi)元素 參與IFC的創(chuàng)建
格式化上下文
BFC 塊格式化上下文
? ? ? ? 根元素 html? |? 浮動元素 | 絕對定位元素 | overflow不為visible | dispaly：inline-block枫匾，tabel-*| 父元素display:flow-root
? ? ? ? 外邊距疊加只會出現(xiàn)在在同一BFC內(nèi)的塊級元素之間
IFC 行內(nèi)格式化上下文
? ? 行框：包含來自同一行的盒子的矩形區(qū)域，并不實際渲染(計算行高時拟淮，非替換元素的內(nèi)外邊距和邊框不計入計算干茉，而替換元素以及display:inline-block按照margin box參與計算)
? ? 行內(nèi)級盒寬<行寬? 水平分布按照text-align
? ??行內(nèi)級盒寬>行寬? 可分割情況下，分為多行展示 ,內(nèi)外邊距很泊，邊框在分割處沒有效果角虫；無法分割（inline-block，white-space）委造，溢出
注： 行框的baseline是由匿名行內(nèi)框的x底部的位置決定的
? ? ? ? 行內(nèi)框vertical為baseline時? 代表其基線與行框的基線對齊
? ? ? ? ?inline-block中有內(nèi)容時戳鹅，以內(nèi)容的基線對齊
