前端盒子点击后增加边框页面样式会发生改变 如何解决

要在点击一个盒子时，使其增加2px的边框，而不导致页面布局改变，你可以使用CSS的box-sizing属性。通过将box-sizing设置为border-box，元素的边框宽度会包含在元素的总宽度和高度内，防止元素大小发生变化。下面是一个示例代码：

<template>
  <div class="container">
    <div v-for="(box, index) in boxes" :key="index"
         class="box" :style="{ backgroundColor: box.color }"
         @click="selectBox(index)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxes: [
        // 这里填入你的盒子数组
        // 示例: { color: '#ff0000' }, { color: '#00ff00' }, { color: '#0000ff' }
      ]
    };
  },
  methods: {
    selectBox(index) {
      this.boxes[index].selected = true;
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: calc(20% - 20px);
  height: calc(25% - 20px);
  margin: 10px;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.box.selected {
  border-color: #ffcc00;
}
</style>

在上述代码中，我们给每个盒子（.box）添加了一个初始状态的边框样式，并将box-sizing属性设置为border-box。

当点击盒子时，通过selectBox方法给对应的盒子添加一个.selected类名，这个类名的样式会使其边框颜色变为黄色（示例中是#ffcc00）。

由于使用了border-box，增加边框并不会导致元素的大小发生变化，因此页面布局不会改变。