不要影响其他元素在边框宽度更改时的定位答案

【问题标题】：Don't affect positioning of other elements on border-width changes不要影响其他元素在边框宽度更改时的定位
【发布时间】：2021-09-24 03:13:15
【问题描述】：

我想在不影响其他元素定位的情况下更改悬停时圆圈的边框宽度。

this jsFiddle 会更清楚。

HTML

<span class="menu"><i class="cercle"></i>Foo</span>
<span class="menu"><i class="cercle"></i>Bar</span>

CSS

.menu{
    margin-right: 10px;
    cursor: pointer
}

.cercle{
    border-radius: 16px;
    margin-right: 5px;
    vertical-align: middle;
    width: 16px;
    height:16px;
    display:inline-block;
    border: 5px solid #ff9c08
}

.menu:hover i{
    border-width: 3px;
    transition:border-width .1s
}

【问题讨论】：

How to add padding or border to a DIV and keep width and height?的可能重复

标签： css

【解决方案1】：

有几种不同的方法可以达到你想要的效果。

1.使用box-sizing: border-box：

通常，相邻元素会受到更改元素的border-width 属性的影响，因为元素是相对定位的，并且每个元素占用的空间会随着border-width 的变化而变化。使用box-sizing: border-box 确保边框的宽度包含在元素的尺寸中。

.cercle {
    box-sizing: border-box;
}

2。使用box-shadow：

另一种方法是使用box-shadow 属性来模拟边框的视觉外观，但没有其特定行为。元素的阴影在修改时不会影响相邻元素，因此在尝试实现您想要的效果时，这是另一个不错的选择。

.cercle {
    box-shadow: inset 0 0 0 4px #ff9c08;
}

.menu:hover > .cercle {
    box-shadow: inset 0 0 0 2px #ff9c08;
}

详细了解box-sizing 和box-shadow 的浏览器兼容性，看看哪个更适合您。您的 jsfiddle 的更新版本可以在 here 和下面找到一个 sn-p。

片段：

.menu {
  margin-right: 10px;
  cursor: pointer;
}

.cercle {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 16px;
  
}

#ex1 .cercle {
  border: 4px solid #ff9c08;
  box-sizing: border-box;
}

#ex1 .menu:hover i {
  border-width: 2px;
  transition: border-width .1s;
}

#ex2 .cercle {
  box-shadow: inset 0 0 0 4px #ff9c08;
}

#ex2 .menu:hover .cercle {
  box-shadow: inset 0 0 0 2px #ff9c08;
  transition: box-shadow .1s;
}

<div id = "ex1">
  <span class="menu"><i class="cercle"></i>Foo</span>
  <span class="menu"><i class="cercle"></i>Bar</span>
</div>
<br>
<div id = "ex2">
  <span class="menu"><i class="cercle"></i>Foo</span>
  <span class="menu"><i class="cercle"></i>Bar</span>
</div>

【讨论】：

您的答案正在meta讨论中
感谢您告诉我@Andy

【解决方案2】：

如果元素上没有边框，这是不可能的，因为添加边框会增加元素的宽度和高度。我更喜欢的技术是在非悬停状态开始时有一个透明边框并在悬停时更改颜色。

.menu {
  border: 3px solid rgba(0,0,0,0);
}

.menu:hover {
  border-color: black;
}

【讨论】：

【解决方案3】：

这实际上是可能的，box-sizing。

设置.cercle { box-sizing: border-box; }意味着.cercle元素的width和height包括边框的大小。

因此，.cercles 的大小将随着box-sizing: border-box 而缩小，但这是一个简单的解决方法：只需将height 和width 从16px 增加到21px（@ 的变化987654333@，因为5px 是边框的大小）。

希望我解释了这是如何工作的！

查看此 jsfiddle 以了解功能代码： https://jsfiddle.net/xhanrkzy/3/

【讨论】：

【解决方案4】：

我假设你想缩小它。
我使用transform 属性来做到这一点：

.menu:hover i {
    /* border-width: 3px; */
    transform: scale(0.95);
    transition: border-width .1s
}

【讨论】：

【解决方案5】：

一般来说，“box-sizing:border-box”是一个非常简单的解决方案。请注意，您可以将其设置为默认应用于样式表中的每个元素。这是一篇关于它的好文章：https://css-tricks.com/box-sizing/。

请注意，使用边框框并更改边框宽度意味着圆圈内的空间较小等。这是因为使用边框框时边框“向内增长”。因此，更改边框宽度会影响您正在更改边框宽度的 DOM 元素内元素的位置。您是否将这些视为“其他元素”（根据您的问题）是语义问题。

【讨论】：