用 HTML 在页面上放置了一个按钮
<button class="btn">点击按钮</button>如果想要实现当鼠标悬停在按钮上时，按钮文字加粗，在 CSS 里这样设置
.btn:hover {
font-weight: bolder;
}但是这样做了之后，当文字加粗后，势必会将按钮的尺寸撑的更大。那么有可能会影响到按钮周围其他 HTML 元素的位置，如果你的页面内容比较多，而且比较紧凑的话，撑大的按钮会将周围的元素推开，这很有可能会扰乱页面的布局。
如果既要保留按钮的鼠标悬停文字加粗的效果，还不能影响到周围元素的位置，可以再给按钮设定一个固定的尺寸。
.btn {
padding: 1rem;
width: 4rem;
}
.btn:hover {
font-weight: bolder;
}这样按钮的尺寸就不会变化，但是文字在鼠标悬停时会加粗，按钮周围的元素也不会受到影响。
以上这种情况一般在页面顶部的导航条上最为常见，请大家注意。