宽度的默认行为和高度的默认行为

在前端代码中常常遇到有一些属性有他自己的默认行为，这里我们写一个例子

以下是源码

<div class="fix" id="login_wrap">
    <div class="login">
    </div>
  </div>

.fix{
  position: relative;
  background-color: aqua;
  .login{
  width: 500px;
  height: 400px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}
}

下面是实现的效果

可以看到，页面并没有按照我们写的top: 50%; left: 50%;实现，只实现了left效果，top是没有效果的

为什么会这样呢？

解释：-
宽度：块级元素（如 .fix）默认宽度为父容器的 100%，即使未显示设置 width

高度：块级元素默认高度由内容决定。若内容为空（如案例），高度会塌陷为 0，

以上这是默认高度和宽度的默认行为不同引起的