ccs框模型與視覺化格式模型

視覺化格式模型

margin對於table相關型別 ( 除了table-caption,table,inline-table這3類 ) 的元素是不起作用的，如td,tr,th等。另外對於行內非替換元素 ( 如span元素 ), 垂直方向的margin是不起作用的。

padding屬性也有一定的限制，它可以使用在除display值是table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column之外的所有的元素

在框模型中，外邊距摺疊是乙個非常容易使人迷惑的地方，簡單來說，外邊距摺疊指的是相鄰的兩個或三個

外邊距會合併成乙個外邊距。注意此處說的相鄰是外邊距相鄰，而不是元素相鄰。

判斷外邊距是否相鄰，可以總結為以下兩點：

所謂視覺化格式型別，指的是瀏覽器在顯示器上處理文件樹。在這個模型中，每個文件中的元素都會根據框模型產生零個或多個框，這些框的布局受控於下面的幾個因素：

包含塊是乙個很重要的概念，視覺化格式模型中很多行為的理論都和他有關：寬高為auto時的計算，絕對定位元素和浮動元素的定位等等

某個元素的包含塊不一定是這個元素的父元素，流程如下：

常規流中的box都會存在於乙個格式化上下文（formattig context）中，不同的格式化上下文決定了其內部子元素該如何排列。具體來說，塊級元素會參與到塊格式化上下文的布局中，行內元素會參與到行內格式化上下文的布局中。

1. 塊格式化上下文bfc（block formatting context）

在block formatting context中，框會乙個接乙個地被垂直放置，它們的起點是乙個包含塊的頂部。兩個兄弟框之間的垂直距離取決於margin屬性。在block formatting context中相鄰的塊級元素的垂直邊距會摺疊。

你可以將塊級格式化上下文想象成乙個密封的大箱子，箱子外面的元素將不與箱子內的元素產生作用，此時在該div中將會呈現出如下的特徵：

觸發塊級格式化上下文的方式：