css 为什么和之间不保持父子关系< body>< nav>

9rbhqvlz 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(103)

nav {
  height: 10em;
}

.some_text {
  top: 50%;
  left: 40%;
  position: relative;
}

<nav>
  <a class="some_text">ABC</a>
</nav>

body css标签没有定义属性，所以nav不应该（作为body的子元素，默认为不确定属性，意味着浏览器不能使用的值），因此不将<a>文本向下移动？
参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#percentages

2条答案

这是因为你给nav元素的高度是50em。把它拿掉。

目前来看，至少有两个原因可以预见：
1.块高度太高（CSS → height: 50em）;
1.文本从块的中间水平放置（CSS → top: 50%）。

解决方案/提示：

1.尝试减小其中一个值（或两个值）。
1.为了清楚起见，尝试将CSS代码border: 1px solid #0ff;添加到height: 50em;行下。