CSS深入理解之margin

前言

margin是css中非常常用的一个属性，也是非常难掌握的，这里只是记下现在能理解的，之后在慢慢补充。

百分比margin

一般在设置外边距的时候经常使用固定值px，但也有情况会用到百分比，不过百分比特性与固定值有所不同，水平方向和垂直方向上的百分比都是按照父容器的宽度乘以百分比来计算的。比如，父容器是一个500乘300的矩形，假如设置子容器的外边距值为margin：10%；那么他的外边距就是500*10%=50px。如果设置为margin：10% 20%；那么他的上下边距为500*10%=50px,左右边距为500*20%=100px。这个大家可以去测试一下，这里就不贴图啦

margin重叠

关于margin重叠也是一个很重要的特性，这并不是一个bug，具体可以查看w3c的资料。一般margin重叠只会发生在block元素之间，并且是发生在垂直元素上，而且中间不能有阻隔元素。最然条件很苛刻，但触发这种条件的布局很多，比如相邻兄弟block元素，父子div等等。这里的margin值可以是正值，也可以是负值。当两个margin发生重叠时怎么计算他们的最终的margin值呢，这里给大家一个口诀：正正取大值，正负值相加，负负最负值。

margin：auto

margin：auto又是另一个常用的属性值，大家都知道这是用来居中的，而且大家也知道这样写只能水平居中而不能垂直居中，但是大家考虑过为什么吗？下面写一下我自己的理解：这里扯到两个名词：可视区域和占据区域一个块元素从外到内是包含margin，border，padding，width/height的。其中border+padding+width/height之间的区域时可视区域，margin+border+padding+width/height之间的区域时占据区域。大家知道块元素是独占一行的，也就是说块元素的占据区域是一整行，但垂直方向的空间是有内容撑起来的，所以垂直方向上的占据区域与垂直方向上的可视区域是一样大的。这样就好理解了，块元素一整行都是他的，那他就可以随便改变可视区域的相对位置啦，从而实现自动居中。当然，这是需要设置子元素的宽度的，不然浏览器无法计算剩余宽度，也就无法实现自动居中。