移动节点位置

保留原有位置情况

element {
  position: relative;
  left: 15px;
  /*
    * 支持 top/right/bottom/left 中单个属性
    * 水平和垂直方向各一个属性
  */
}

element {
  transform: translate(x, y);
  /*
    transform: translate3d(x, y, z);
  */
}

脱离原有位置情况

element {
  /*
    支持以下写法
    顺序有关, 后写的会覆盖前面的.
    ex:
    margin: 0;
    margin-left: 15px;
    以上相当于 margin: 0 0 0 15px;
    支持正/负值, 表示远离/靠近"附近"节点.
  */
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
  margin: 15px;
  margin: 10px 15px;
  margin: 10px 15px 20px;
  margin: 10px 15px 20px 25px;
}
element {
  position: absolute;
  /*
    相对于应用 aboslute 之前坐标位置(x, y)没变, 但离用户更近一层 - z 轴方向
    再使用 margin 向两个方向调整
  */
  margin: 15px;
}
element {
  position: absolute;
  left: 15px;
  /*
    只存在 top/right/bottom/left 中的一个时,
    比如, 应用 left, 那么在垂直方向保持原有坐标(同上)
    而离相对元素距离为 left.
  */
}

element {
  position: absolute;
  left: 15px;
  right: 15px;
  /*
    同方向存在两个属性时, 表示在相对元素内部,
    在设置方向分别计算过距, 然后占满剩余空间
  */
}
element {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 0;
  /* 在上面基础上, 单独对另外一个方向进行设置 */
}
element {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  /* 在两个方向上, 分别使用两个值时的方式计算 */
}
block {
  display: flex;
  /*
    align-items/justify-content
    水平/垂直方向对齐方式
  */
  element {
    margin: auto;
    /* 在剩余空间内, 对节点进行 margin 设置 */
  }
}
element {
  float: left;
  /* 支持 left/right */
}

inline 性质

element {
  text-indent: 2em;
  /* 对 inline 性质节点, 缩进 2em; 支持负值 */
  vertical-align: 3px;
  /* 对具有 inline 性质节点, 在垂直方向做调整 */
  text-align: left;
  /* 支持 left/center/right/justify */
}