为页面元素添加高亮内边距效果时如何避免移动其他元素？

这个问题在flex布局里太常见了——我之前用Angular Flex的时候也踩过同样的坑！核心原因是默认的box-sizing: content-box会让padding/border额外增加元素的总尺寸，而fxFlex元素的宽度是flex容器自动分配的，一旦某个元素尺寸变大，其他元素就会被挤移位。给你几个靠谱的解决方案，按推荐程度排序：

1. 用box-sizing: border-box让padding“不占额外空间” #

这是最直接、最符合CSS标准的解决办法。border-box会把padding和border的尺寸计算在元素的指定宽度/高度内，而不是在外面额外添加。这样添加padding后，元素的总尺寸完全不变，自然不会影响其他flex元素的布局。

.highlight {
  box-sizing: border-box; /* 关键属性，强制把padding算在元素内部 */
  background-color: red;
  padding: 2px;
  /* 如果需要边框，也可以加，同样不会增加元素总尺寸 */
  /* border: 1px solid darkred; */
}

如果你的项目已经全局设置了box-sizing: border-box（很多现代项目都会这么做，比如通过* { box-sizing: border-box; }），那可能只需要调整highlight类的padding值，或者确保它的优先级足够覆盖默认样式。

2. 用outline + 内阴影模拟无布局影响的高亮 #

如果不想改变元素内部的内容布局（比如不想让内容因为padding而被压缩），可以用outline（完全不占布局空间）配合inset阴影来模拟内边距的视觉效果：

.highlight {
  background-color: red;
  /* outline不参与布局计算，不会导致移位 */
  outline: 2px solid transparent;
  /* 用inset阴影模拟内容和红色背景之间的空白内边距，颜色要和父元素背景一致 */
  box-shadow: inset 0 0 0 2px #fff; /* 这里假设父背景是白色，根据实际情况调整 */
}

这个方法的唯一小缺点是依赖父元素的背景色，因为阴影是用父背景色来填充“内边距”区域的。

3. 绝对定位伪元素实现完全无侵入的高亮 #

如果需要彻底不影响原元素的尺寸和内部布局，甚至连内容的位置都不想变，可以用伪元素来生成高亮背景：

.highlight {
  position: relative;
  /* 保留原元素的padding和布局，完全不动 */
}

.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  /* 向内缩2px，模拟内边距效果 */
  transform: translate(2px, 2px);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  z-index: -1; /* 把背景放在内容下面，不遮挡文字 */
}

这个方法的好处是完全不修改原元素的任何布局属性，伪元素是绝对定位的，不会参与文档流计算，所以其他元素完全不会受到影响。

为什么fxFlex元素会移位？ #

再补充一下原理：Angular Flex Layout的fxFlex指令会给元素设置类似flex: 1 1 auto的属性，元素的宽度会根据flex容器的剩余空间自动分配。当你添加padding/border且box-sizing为默认的content-box时，元素的总宽度会变成「内容宽度 + padding + border」，导致flex容器内的总宽度超过容器本身的宽度，其他flex元素就会被挤压移位。

内容的提问来源于stack exchange，提问作者cucuru