神奇的margin

大家都了解盒模型吧，content+padding+border+margin组成的盒模型，今天主要讲的就是其中的margin（元素的外边距）

1. 先来了解下margin和容器尺寸之间的关系

　　　　盒子的容器从不能的角度分析，有两种不同的定称，一种是只有content和padding，border组成的，我们称之为可视尺寸（clientWidth、clientHeight）；还有一种就是在前面的基础上加上margin值的，我们称之为占据尺寸

　　　　特性一：margin值可以改变的是元素可视尺寸，它有以下前提需要满足：适用于没有设置宽高（width、height）的块状（block）元素；只适用于水平方向尺寸

　　　　使用案例：可以运用于一侧定宽的自适应布局

　　　　特性二：margin可以改变元素的占据尺寸，它有以下前提需要满足：block、inline-block均可以使用；有无设置width、height无关；可以试用于水平和垂直方向

　　　　使用案例：滚动容器的上下留白

　　　2.margin和百分比单位

　　　　在移动端布局的时候，我们一般会使用相对单位，百分比、em、rem，而此时如果使用margin的单位是相对单位会有不同的计算方式

　　　　特性：普通元素的margin是相对于容器的宽度计算的

　　　　　　　绝对定位元素的margin是相对于第一个定位元（absolute、relative、fixed）素的宽度计算的

　　　3.margin在垂直方向的高度塌陷问题

　　　　高度塌陷的情况只会存在于垂直方向

　　　　存在高度塌陷的情况：父与子之间存在高度塌陷、相邻子元素之间存在高度塌陷

　　　　在父元素没有给padding、border，或者父元素是非块状格式化的上下文元素、或者父和子元素之间没有inline元素分离，此时如果给子盒子加margin值，在界面上并不会显示出来，如果需要显示，只要破坏上述条件之一即可

　　　　相邻元素之间会存在高度塌陷情况：当两个元素有同正数的margin的时候，他们之间的距离是最大的margin值；当两个元素有一正一负的margin的时候，他们之间的距离是两数之和；当两个元素的margin都是负数的时候，则他们之间的距离，是绝对值较大的那个数值

　　　　技巧：我们在写列表的时候，一般会写间距的时候，只会给上间距或者下间距，其实我们可以利用高度塌陷这个特性，上下间距都写上，这样即使页面有一点变动，也不会影响整体的效果

　　 4.margin里面的取值为auto分析

　　　我们在使用margin的时候，一般会使用auto取值，你知道auto取值，在浏览器来来讲，是怎么解析的吗

　　　一般我们写一个块状元素的时候，即使不写width值，他会自动的充满容器，而一旦写了值（不论是固定值还是相对值），那么就会按照所写尺寸按照标准文档流去解析，此时元素的右边就会出现空白区域，写上margin：0 auto即可以左右均分空白区域即可。还有一种应用是，你可以写上margin-right:30px;左边剩余的部分，你写上margin-left：auto也会自动的去解析，使其均分空白区域

注意：上述的情况只会出现在block元素的水平方向上，像img、input都是不可以的，因为他在不写宽度的时候，是没有办法自动填充盒子的，且标准文档流的块状元素在不写高度的时候，是不会自动填充盒子的高度的。

　　 5.元素在垂直方向居中

　　　　元素在垂直方向上的居中，我们可以通过多种方式实现

　　　　第一种：可以改变流的渲染方式，从而来实现垂直居中

　　　　　　　　普通流的渲染的时候，都是自左向右，自动填充，我们可以通过writing-mode属性来改变元素的渲染，然后对子元素设置固定的高，使用margin值即可。　　　

<div class="father">
            <div class="son">我是子盒子</div>
</div>
样式如下：

.father{height:200px;background:#f2f2f2;writing-mode: vertical-lr;}
.son{height:100px;width:200px;margin:auto;background-color:red;}

 

扩展：wrting-mode改变的是元素的渲染方向

最新的取值有以下三种：writing-mode:horizontal-tb      ===>自上而下，从左到右的横排书写方式

　　　　　　　　　　　writing-mode:vertical-rl          ===>从右到左，自上而下的竖排书写方式（典型的汉字竖排排版方式）

　　　　　　　　　　　writing-mode:vertical-lr          ===>从左到右，自上而下的竖排书写方式

　　　　第二种：绝对定位元素的居中

　　　　　　　　绝对定位的元素，使用margin是没有办法实现居中的