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中，块盒与行盒（行盒由一行中全部的内联元素所组成）都会垂直的沿着其父元素的边框排列。