css- margin詳解

margin的特性

1. margin始終是透明的，因此設置 margin 來用來控制元素空間的間隔。
2. 提供了缺省數值的縮寫（這裏就不介紹了），因此在實戰中我通常都採用此種寫法，一來方便修改，二來節省字符。
3. 垂直外邊據合併：當兩個盒子垂直外邊距相遇時，只有數值大的那個外邊據的值纔是起做用的（這跟padding有明顯的區別，若是垂直方向設置了padding且相遇，則兩個盒子之間的空白等於二者之和）。
4. 一個盒子若是沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。
5. margin 屬性能夠應用於幾乎全部的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，並且垂直外邊距對非置換內聯元素不起做用。

 

由於沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

對於垂直外邊距合併的解決方案就是，爲父元素例子中的middle元素增長一個border-top或者padding-top便可解決這個問題。

產生以上狀況的根本緣由，也能夠換句話這麼說：子元素的父元素的的若是沒設置border-top或者padding-top，父元素的第一個子元素就會不斷一層一層的找本身祖先元素。因此只要給父元素設置border-top或者padding-top，就能解決這個問題。由此咱們下次應該注意何時用 margin 何時用padding。不能由於這個bug，而給父元素增長不必的border-top或者padding-top。解決這個問題的另一個方法就是：分別設置_zoom:1;overflow:hidden分別觸發 ie的layout和建立CSS 2.1的Block Formatting Contexts來避免margin的重疊。

 

而究其根本緣由，是由於：在margin屬性中一共有兩類參考線，top和left的參考線屬於一類，right和bottom的參考線屬於另外一類。top和left是之外元素爲參考，而 right和bottom是以元素自己爲參考。所謂外元素就是本元素的邊界元素（再白話點的解釋就是元素的緊鄰元素，父元素或者兄弟元素），而元素自己呢，確切含義是指以自身爲參考來影響周圍元素的位置（實質即爲影響下邊和右邊相鄰元素的參考線）。因此纔會出現以上事例中 父元素中的第一個子元素越級將本身的margin-top當成父元素的margin-top執行的狀況。

 

當margin四個值都爲正數值的話，那麼margin按照正常邏輯同周圍元素產生邊距。當元素margin的top和left是負值時會引發元素的向上和向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線。

margin 和 padding 的區別

1. margin會重疊，而padding也不會重疊，而是相加。
2. margin能夠有正值和負值，而padding則只容許正值。
3. margin是outside the border；而padding則是inside the border

什麼是BFC（Block formatting contexts）

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣）。

 

BFC的通俗理解：

首先BFC是一個名詞，是一個獨立的佈局環境，咱們能夠理解爲一個箱子（其實是看不見摸不着的），箱子裏面物品的擺放是不受外界的影響的。轉換爲BFC的理解則是：BFC中的元素的佈局是不受外界的影響（咱們每每利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。