目录
CSS Margin 边距详解
开发实例
CSS 实现水平垂直居中
纯absolute
absolute 加 calc
absolute 加transform
absolute加 margin
overflow 兼容 Safari 浏览器
CSS Margin 边距详解
1、简写属性语法：margin：[<length>|<percentage>| auto ]{1,4}
2、适用于：所有元素，除table | inline-table | table-caption的表格类元素之外、继承性：无
3、动画性：看每个独立属性、计算值：看每个独立属性、媒体：视觉
4、分拆纵向独立属性语法：
vertical-margin：<length>|<percentage>| auto
vertical-margin=margin-top,margin-bottom
5、默认值：0、适用于：所有元素，除table | inline-table | table-caption的表格类元素和非替代行内元素之外
6、动画性：当取值为<length>|<percentage>时、计算值：指定的百分比或绝对长度值
7、分拆横向独立属性语法：
horizontal-margin：<length>|<percentage>| auto
horizontal-margin=margin-right,margin-left
取值：
1）auto：水平（默认）书写模式下，vertical-margin计算值为0，horizontal-margin取决于包含块的剩余可用空间。详见：margin系列之keyword auto
2）<length>：用长度值来定义外补白。可以为负值
3）<percentage>：用百分比来定义外补白。水平（默认）书写模式下，参照其包含块的width进行计算，其它情况参照height，可以为负值
说明：简写属性。为元素设置所有四个方向（上右下左）的外边距。
1）margin属性接受1~4个参数值。如果提供四个参数值，将按上、右、下、左的顺序作用于四边；提供三个，第一个用于上，第二个用于左、右，第三个用于下；提供两个，第一个用于上、下，第二个用于左、右；只提供一个，同时用于四边。
2）非替代(non-replaced)行内元素可以使用该属性定义horizontal-margin；若要定义vertical-margin，必须改变元素为块级或行内块级。
3）外延边距始终透明，即不可见也无法设置背景等任何样式。
4）某些相邻的margin会发生合并，我们称之为margin折叠：
h2{margin:10px 0;}div{margin:20px 0;}......<h2>这是一个标题</h2><div><h2>这是又一个标题</h2></div>
本例中，第1个h2的margin-bottom，div的margin-top，第2个h2的margin-top是相邻的，三者会被合并取其中最大的那个值作为最后的间隙，所以它们之间的margin间隙最后是（20px）。
如果给上例中的div加上border的话：
h2{margin:10px 0;}div{margin:20px 0;border:1px solid #aaa;}......<h2>这是一个标题</h2><div><h2>这是又一个标题</h2></div>
本例中，第一个h2的margin-bottom（10px），div的margin-top（20px）将被合并，但第二个h2的margin-top不与它们合并，因为它被border分隔，不与它们相邻。
margin折叠常规认知：
分拆纵向独立属性。为元素设置上、下外边距。margin折叠只发生在块级元素上；
浮动元素的margin不与任何margin发生折叠；
设置了属性overflow且值为
非visible的块级元素，将不与它的子元素发生margin折叠；绝对定位元素的margin不与任何margin发生折叠；
根元素的margin不与其它任何margin发生折叠；
对应的脚本特性为：margin。
分拆横向独立属性。为元素设置上、下外边距。替代(Replaced)行内元素可以应用该属性；非替代(non-Replaced)行内元素要使用该属性必须改变元素为块级或行内块级。
水平（默认）书写模式下，margin 合并只发生在vertical-margin上。
对应的脚本特性分别为：marginTop, marginBottom。
所有的行内元素均可以应用该属性。
默认情况下，horizontal-margin不会发生 margin 折叠，除非将书写模式改变为纵向。
对应的脚本特性分别为：marginRight, marginLeft。
开发实例
负值逆向移动
Html
<div class="commonEvenRowDiv"><span class="commonOddColumnDiv">81</span><span class="commonEvenColumnDiv">82</span><span class="commonOddColumnDiv">83</span><span class="commonEvenColumnDiv"><a href="javascript:ajaxToUdp('J32')" class="forcedLeftShift30 forcedTopShift30"><img src="image/area/futian_1.png"></a></span><span class="commonOddColumnDiv">85</span><span class="commonEvenColumnDiv">86</span><span class="commonOddColumnDiv">87</span><span class="commonEvenColumnDiv">88</span><span class="commonOddColumnDiv">89</span></div>
CSS
/*强制元素反向左移30*/.forcedLeftShift30 {float: left;margin-left: -30px;}/*强制元素反向上移30*/.forcedTopShift30 {float: left;margin-top: -20px;}
页面效果
CSS 实现水平垂直居中
纯absolute
这种方式比较好理解，兼容性也很好，但是需要知道子元素的固定宽高值。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;width: 100px;height: 100px;/*子元素使用绝对定位*/position: absolute;;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;}</style></head><body><div class="out"><div class="inner">万里长城</div></div></body></html>
父元素 out 使用相对定位，子元素 inner 使用绝对定位
子元素相对顶部偏移 50%，相对左边偏移 50%
根据子元素 inner 自己的宽高，然后减去自己宽高的一半
1）绝对定位的百分比是相对于父元素的宽高，但绝对定位是基于子元素的左上角
2）借助外边距的负值让元素向相反方向定位，通过指定子元素的外边距为子元素宽/高一半的负值，让子元素居中
absolute 加 calc
方式一虽然好理解，但是要求被居中的子元素必须是固定宽高，而现在通常都是自适应的页面，所以需要优化。
css3 的 calc() 函数允许在属性值中执行数学计算操作(加减乘除)，如下所示使用 calc() 指定一个元素宽的固定像素值为多个数值的和：
.foo {width: calc(100px + 50px);}
从而引出了本方法，本方式子元素宽高值即可以固定的，也可以是相对的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 200px;height: 100px;/*子元素使用绝对定位,父元素的宽高的50% 减去自己宽高的一半*/position: absolute;;left: calc(50% - 100px);top: calc(50% - 50px);}</style></head><body><div class="out"><div class="inner">万里长城</div></div></body></html>
如上所示子元素宽高为固定值。如下所示子元素宽高为相对值时，同理也是在自己的基础上再去掉一半即可。
.inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 80%;height: 60%;/*子元素使用绝对定位,父元素的宽高的50% 减去自己宽高的一半*/position: absolute;;left: calc(50% - 40%);top: calc(50% - 30%);}
absolute 加transform
仍然是绝对定位，可以使用 css3 新增的 transform，transform 的 translate 属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate 设置为 -50%，就可以做到居中了。《CSS3 transform 属性》
这种方式子元素宽高可以是固定的，也可以是相对的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/*子元素宽高可以是固定值，也可以是相对值*//*width: 200px;height: 150px;*/width: 80%;height: 60%;/*子元素使用绝对定位*/position: absolute;;/**相对父元素距离顶部和左边偏移50%*/top: 50%;left: 50%;/*相对自己再向上和向左偏移自己的一半*/transform: translate(-50%, -50%);}</style></head><body><div class="out"><div class="inner">万里长城</div></div></body></html>
absolute加 margin
这种方式也是非常常用的方式，被居中的子元素宽高可以是固定值，也可以是相对值，兼容性也很好。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.out {border: 1px solid red;width: 300px;height: 200px;/*父元素使用相对定位*/position: relative;}.inner {background: green;/**子元素宽高可以是固定值，也可以是相对值*/width: 60%;height: 60%;/*子元素使用绝对定位*/position: absolute;;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style></head><body><div class="out"><div class="inner">万里长城</div></div></body></html>
通过设置各个方向的距离都是 0，再将 margin 设为 auto，就可以在各个方向上居中了。
overflow 兼容 Safari 浏览器
1、overflow 属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
2、overflow 设置的滚动条在PC 上正常，有时候却在 Safari 上没有效果，此时加上-webkit-overflow-scrolling: touch; 即可
.rightDiv {width: 80%;height: 90%;/*border: 1px #ff0000 solid;*/overflow: auto;/*兼容 Safari 浏览器*/-webkit-overflow-scrolling: touch;background-color: #344861;float: left;}
