CSS的margin负值以及top的百分比

margin的负值

• 与设置正值不一样，设置负值需要根据设置的方向以及元素是否浮动以及其定位方式来判断最终的行为。
• 具体按照以下几种情况说明：
  • 元素没有设置浮动并且没有设置定位或者position属性为static的情况下，对margin设置负值会有以下效果：
    • 设置margin的方向为top或者left；

  当设置margin的方向为top或者left的时候，元素会按照设置的方向移动相应的距离。

  当设置margin-left：-100px；，元素会往左移动100px;对于设置margin-top也是一样的道理

  - 设置margin的方向为bottom或者right 当设置负值的 margin 的方向为 bottom 或者 right 的时候，元素本身并不会移动，元素后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。

比如，设置 margin-right: -100px;。那么，元素本身并不会移动，后面的元素会向左移动 100px 到该元素上。对于设置 margin-bottom 也是同样的道理。

Top的用法

 top: 50%;
  left: 50%;

就是页面的上端起50%;页面的左端起50%。

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。