談談CSS可視化格式模型的一些概念

1.有哪些概念

1.塊級元素（block-level element）和行內級元素（inline-level element）
2.塊級盒(blcok-level box)和行內級盒(inline-level box)
3.塊容器盒(block containing box)
4.塊盒（block box）和 行內盒(inline box)
5.包含塊(containing block)
6.塊級格式化上下文(bfc)和行內級格式化上下文（ifc）

2.元素類型

主要有塊元素和行內級元素，塊級元素表現為獨占一行，縱向排列，寬度自適應容器，display為block,list-item，table。
行內級元素表現為包裹性，對寬高不起作用，橫向排列，display為inline,inline-block,inline-table等，以及可替換元素，如img,button。

3.什么是塊級盒和行內級盒。

塊元素生成的盒，稱為主要塊級盒，參與bfc，行內級元素生成的盒為行內級盒，參與ifc。

4.什么是塊容器盒

塊容器盒，只包含塊級盒，或產生ifc，只包含行內級盒。但不能同時既有塊級盒又有行內級盒，如果有至少一個塊級盒，將只包含塊級盒，行內級盒將包含在生成的匿名塊盒中。
塊容器盒常見有p,div等塊級元素。非替換行內元素inline-block,table-cell也是塊容器。

5.什么是塊盒和行內盒

塊盒是哪些既是塊級盒同時又是塊容器盒的盒。如div,p。想display:table，雖然是塊級盒，但它不是快容器盒。可替換元素也不是塊容器盒，即使display為block。
行內盒指參與ifc的同時，也產生ifc的行內級盒。所有display:inline的非替換元素。
不產生ifc的行內級盒，一般稱為原子行內級盒(atomic inline-level box)，主要有可替換行內元素或display為inline-block或inline-table。

6.什么是包含塊

不管什么盒，定位由包含塊決定。

7.bfc和ifc

bfc觸發方式有：
1.float不為none;
2.position為absolute或fixed.
3.display為inline-block、table-cell、table-caption、flex或inline-flex.
4.overflow不為visible.

bfc中塊級盒從包含塊頂部自上到下排列，在同一個bfc中相鄰的元素垂直方向會有margin collapse問題。
所謂相鄰指的是：

這兩個或多個外邊距沒有被非空內容、padding、border或clear分隔開。
注意例外情況：
1.浮動元素、inline-block元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊

浮動元素的 margin 在垂直方向上也不會發生 margin 折疊，即使和它相鄰的子元素也不會。

<div style="margin-bottom:50px; width:50px; height:50px; background-color:green;">A</div>
    <div style="margin-top:50px; width:100px; height:100px; background-color:green; float:left;">
    <div style="margin-top:50px; background-color:gold;">B</div>
</div>

<div style="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;">
   <div style="margin-top:50px; background-color:gold;">B</div>
   </div>
</div>