? ? ? ? 初看到css的這幾個名詞的時候覺得很神奇慨丐，用了這么久的css了竟然還有這么高深，這么神奇的概念泄私。然后搜了一部分文章房揭，有些文章就是連這幾個名詞的全稱都不寫，看完了通篇的一連串的講解晌端，覺得沒啥內(nèi)容捅暴，反而把自己搞的一頭霧水了。
? ? ? ? 首先咧纠，先說明下這幾個的概念蓬痒。其實這幾個都是一個布局的概念而已。
? ? ? ? FC（Formatting Contexts）格式化內(nèi)容漆羔，其實就是利用css添加樣式布局而已梧奢。前面的B,I,G,F分別就是B（Block）塊級狱掂，I(Inline)行內(nèi)，G（GridLayout）網(wǎng)格亲轨，F(xiàn)（Flex）趋惨，這樣的話就明白多了。一個BFC也就是獨立的一個塊級元素瓶埋，不會對其他元素內(nèi)部的內(nèi)容布局造成影響希柿。
? ? ? ? 可以參考W3C說明（https://www.w3.org/TR/CSS2/visuren.html#block-formatting）。
? ? ? ? FC也就是我們布局時候遵循的一些原則养筒，一套渲染規(guī)則，一套決定這些布局元素端姚，子元素晕粪，內(nèi)容以及與其他元素相互作用的一些原則而已。其實布局我一直認為的首先渐裸，盒子模型是必須的巫湘，然后掌握浮動和定位來說，布局基本問題就不大了昏鹃，當然現(xiàn)在又有了flex尚氛。具體的布局原則這里就不提了，
? ? ? ? 這里只提一下BFC也就是塊級布局里的一個margin合并原則洞渤。
? ? ? ? W3C里對margin合并的說明（CSS 外邊距合并）阅嘶，說簡單點就是在垂直相鄰的元素之間會存在margin合并問題，符合合并原則的margin合并后是使用大的margin载迄，如果不注意這個的話可能會在布局的時候發(fā)現(xiàn)自己寫的一些margin不起作用讯柔，實際是合并了，如果不想合并的話就是在兩個margin之間產(chǎn)生一些分隔就不會再合并了护昧。
? ? ? ? ?當然從根本上解決的話就是理解margin和padding魂迄，使用正確的屬性也能避免合并的發(fā)生。下面這篇文章里對這個問題還是說的比較清楚的惋耙。
? ? ? ? 不要告訴我你懂margin? ? ?
? ? ? ? ??margin是用來隔開元素與元素的間距捣炬；padding是用來隔開元素與內(nèi)容的間隔。margin用于布局分開元素使元素與元素互不相干绽榛；padding用于元素與內(nèi)容之間的間隔湿酸，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。
