CSS盒模型之外边距margin

CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）。内边距呈现了元素的背景。内边距的边缘是边框（border）。边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

一、① margin与可视尺寸：

1、适用于没有设定width和height的普通block水平元素。（float、absolute、fixed…不适用）
2、只适用于水平方向尺寸。
运用：
一侧定宽的自适应布局：
①图片左浮动，跟随文字自然环绕效果：

  <img src=" " width="150px";style="float:left;">
    <p>图片左浮…</p>

②图片与文字分立两侧：

  <img src=" " width="150px";style="float:left;">
        <p style=margin-left:170px;>图片左浮…</p>

②margin与占据尺寸：

1、block/inline-block水平元素均适用；
2、与有没有设定width/height值无关；
3、适用于水平方向和垂直方向。
运用：
滚动容器内上下留白：

margin:50px 0;

然而padding在非chrome浏览器底部无留白：

padding:50px 0;

二、margin与百分比单位:

①百分比margin的计算规则：
普通元素的百分百margin都是相对于容器宽度计算的。

②绝对定位元素的百分比margin：
绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative、absolute、fixed）的宽度计算的。

三、CSS的margin重叠：

1、相邻的兄弟元素；
2、父级的第一个元素和子级的最后一个元素；
3、空的block元素。
解决重叠的方法：
1、正正取大值；
2、正负取差值；
3、负负取最负。

四、margin：auto

1、距右100px，距左剩余空间自动填充。

.demo{width:500px;margin-right: 100px; margin-left:auto;background:blue;}

2、距左100px，距右剩余空间自动填充。

.demo{width:500px;margin-left: 100px; margin-right:auto;background:blue;}

3、左右均auto，平分剩余空间，居中显示。

.demo{width:500px;margin-left: auto; margin-right:auto;background:blue;}

*运用：（重点）
图片设置img{width:200px;margin:0 auto;}后依然不居中！！！
因为此时图片是inline水平，就算没有width也不会占据整个浏览器，因为没有撑满整个浏览器，所以就不符合auto用来计算剩余空间的这个设定，因为此时根本就谈不上剩余空间。

居中方法：img{display：block；width:200px;margin:0 auto;}

此时图片是block水平，就算没有width也会占据整个浏览器，其他任何元素都不能和其一行显示。

垂直方向margin居中方法：

①用writing-mode更改流为垂直方向，实现垂直方向的margin居中，但随之带来的是此时水平宽度的居中就实效了。

.father{height: 200px;width: 100%;writing-mode:vertical-lr;}
.son{height: 100px;width: 500px;margin:auto;}

②用weight/height限制absolute元素自动填满容器，被强制更改的尺寸就是margin:0 auto;用来分配的尺寸空间，此时，元素水平垂直都居中。（注意：此特性只适用于IE8+浏览器）

.father{height: 200px;position: relative;}
.son{position: absolute;top: 0;right: 0;bottom: 0;left: 0; height: 100px;width: 500px;margin:0 auto;}

五、CSS margin无效的情形：

1、inline水平元素的垂直margin是没有效果的。前提：①非替换元素；eg：不是img元素；②正常书写模式。
2、margin重叠。
3、dispiay：table-cell/display：table-row等声明的margin无效！
4、绝对定位元素的非定位方向的margin值“无效”。（设置的方向更改其margin值才会有效）
5鞭长莫及导致的margin无效：例如文字左边有张图片，当调整文字的margin-left值小于图片宽度将会导致文字看起来没有移动，实则是因为margin-left是相对于浏览器左边框而言的。
6、内联特性导致的margin值无效。例如当margin-top：-20px；当-20调的太小如-300元素就不向上移动了，这是由于内联元素的性质导致的。