为什么当鼠标悬停后出现边框时 <div> 大小会增加？ CSS

Question

我正在构建一个导航栏并尝试像在 bbc.com 站点中那样做 - 当鼠标悬停在某个项目上时，会出现一个彩色边框。我是用

之类的东西做的

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
         }
    
    .cont {
        display:flex;
        border: 1px solid gray;
        background-color: black;
    }
    
    a {
        margin-right:0.1em;
        border: 1px gray;
        border-style: none none none solid;
        padding: 0.5em;
        color: white;
    }

    #nav2:hover {
        border-bottom: 3px solid red;
        cursor:pointer;
    }
    
    #nav4 {
        border-style: none solid none solid;
        margin-right: 5em;
    }

        <div class="cont">
        <a id="nav1">Home</a>
        <a id="nav2">News</a>
        <a id="nav3">Contact</a>
        <a id="nav4">About</a>
        <button id="button1">Sign in</button>
        </div>

但是当您将鼠标放在#nav4 项目上时，整个黑色背景会拉伸以显示红色边框。为什么会这样？我以为 'box-sizing: border-box;' 应该阻止它。

（关于第二个问题，我怎样才能将按钮放在页面的右上角，使其在任何尺寸的屏幕上都能正常工作？）

Answer 1

我在伪元素后使用绝对定位，而不是使用border。

记住 Box model 边框在内容之外。

codepen

Answer 2

添加边框时，您会添加元素的高度。

有两种方法可以避免这种情况：

给每个元素添加一个 3px 的黑色边框，只改变它的颜色当 :hover
指定box-sizing: border-box;和高度，所以元素的高度包括边框（和填充）

Answer 3

这是一个只使用边框的方法 css:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cont {
  display: flex;
  border: 1px solid gray;
  background-color: black;
  /* font-family: Arial, Helvetica, sans-serif; */
  /* height: 2em; */
  /* border-radius:5px; */
}

a {
  margin-right: 0.1em;
  border: 1px gray;
  /* border-style: none none none solid; */
  border-bottom: 3px solid black;
  border-top: 3px solid black;
  padding: 0.5em;
  color: white;
}


/* #nav1 {
        border-style: none none none solid;
        margin-left: 3em;
    } */

#nav2:hover {
  /* border: 3px solid red; */
  border-bottom: 3px solid red;
  cursor: pointer;
}

#nav4 {
  /* border-style: none solid none solid; */
  margin-right: 5em;
}

<div class="cont">
  <a id="nav1">Home</a>
  <a id="nav2">News</a>
  <a id="nav3">Contact</a>
  <a id="nav4">About</a>
  <button id="button1">Sign in</button>
</div>

为什么当鼠标悬停后出现边框时 <div> 大小会增加？ CSS

Why would a <div> inscrease in size when a border shows up after the mouse hovers it? CSS

html

css

hover

navbar