9-2 margin负值之美

1). 负边距+定位：水平垂直居中

原理：一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。

 

2). 压住盒子相邻边框

原理：在盒子float浮动的同时，加上margin-left: -1px; 可以压住盒子相邻的边框。

　

3). 压住盒子相邻边框，并且浮动的盒子共用一条边框(  基于第2点的进阶用法 ）

原理：先利用margin负值，使得相邻盒子的边框被压住；

再使用方法让鼠标经过时候的盒子层级提升到最高级。如果不提升到最高级，那么只有三条边框。

分析：关键是盒子层级不能用z-index，因为z-index只对绝对定位、固定定位、相对定位有效果；

 那既然不能用z-index，从普通流、浮动、定位来说，只有定位是等级最高的，那就对它使用相对定位就可以了。

4). 压住盒子相邻边框，并且浮动的盒子共用一条边框，同时在浮动的盒子里添加绝对定位元素，而且不影响布局(  基于第3点的进阶用法 ）（没放图）

原理：

先利用margin负值，使得相邻盒子的边框被压住；

再使用方法让鼠标经过时候的盒子层级提升到最高级。如果不提升到最高级，那么只有三条边框；

然后由于给浮动的盒子里添加绝对定位元素，又要不影响布局，势必浮动盒子要设置相对定位；

然后再在这基础上鼠标经过提高层级。

分析：

如果不写其他方法还是按照第3点的方法，那么所有浮动盒子都成相对定位了，那么就只有两条边框；

既然有相对定位了，那么不就能写z-index了？于是鼠标经过时候提升层级就能用上之前不能用的z-index了。