Question

混淆为什么当悬停在边框底部时，边框可以很好地与内容一起播放，但是当更改为border-top时，它会按下内容。

这是代码......

  <ul class="nav">
      <li><a href="#peace">peace</a></li>
      <li><a href="#love">love</a></li>  
  </ul>

numpy.triu_indices

Answer 1

我会稍微改变结构以使用叠加而不是边框。而且无需使用固定的高度。

从我看到的边界问题实际上是预期的行为。 border-top和border-bottom都向下推送内容，但由于您使用的是box-sizing: border-box，并且底部边框已经位于文本下方，因此您看不到内容会下降。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;    
    width: auto;
    position: fixed;
    background-color: yellow; 
} 

li a{
    display: block;
    position: relative;
    color: red;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    padding: 20px;
    line-height: 1;
}

li a .overlay{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100%;
    transition: .2s all linear;
    background-color: rgba(0,0,0,0.3);
}

li a:hover .overlay {
    bottom: 0;
}

<ul class="nav">
    <li>
        <a href="#peace">
            <div class="overlay"></div>
            peace
        </a>
    </li>
    <li>
        <a href="#love">
            <div class="overlay"></div>
            love
        </a>
    </li>
</ul>

Answer 2

请参阅border-top从顶部向下添加元素中的高度，border-bottom从底部向下添加高度...因此应用border-top将始终推送文本下来

实际上，您已将box-sizing: border-box与height: 50px一起应用于该元素...这意味着如果指定了任何height值，则元素的边框不会影响该元素的高度... < / p>

正如MDN网络文档所说

border-box tells the browser to account for any border and padding in the values you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements

如果您从元素中删除height，您会看到border-bottom会在文字下方添加，因为没有定义height值...

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  position: fixed;
  background-color: yellow;
}

li a {
  display: block;
  color: red;
  /* height: 50px; */
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  line-height: 50px;
  transition: .2s all linear;
  box-sizing: border-box;
}

li a:hover {
  color: white;
  border-bottom: 50px solid lightskyblue;
}

<ul class="nav">
  <li><a href="#peace">peace</a></li>
</ul>

CSS边界混乱

2 个答案: