为什么按钮限制宽度后还会被其他DOM挤压

这可能是由于CSS中的盒模型引起的问题。当你限制按钮的宽度时，它的内容可能会溢出并影响其他DOM元素的布局。你可以尝试使用CSS中的box-sizing属性来解决这个问题。将box-sizing设置为border-box可以确保元素的宽度包括边框和内边距，而不是仅仅包括内容。这样可以避免元素的内容溢出并影响其他DOM元素的布局。

相关问题

为什么给dom设置宽度100%或者高度100%会出现无效的情况

给DOM设置宽度或高度为100%时，元素的宽度或高度会相对于其父元素计算。如果父元素没有设置具体的宽度或高度，那么子元素也就无法准确地计算自己的宽度或高度。此时，子元素的宽度或高度将默认为0，从而出现无效的情况。为了解决这个问题，可以给父元素设置具体的宽度或高度，或者使用其他的布局方式，如flex布局或网格布局。

vue 获取dom加载后的宽度

在Vue中，我们可以通过以下两种方式获取DOM元素的宽度：

1. 通过ref获取dom节点并获取宽度：

我们可以在需要获取宽度的元素上使用ref属性，然后在mounted钩子函数中通过$refs来获取该元素的DOM节点。然后再通过offsetWidth属性获取宽度，最后把获取到的宽度存入data中。

示例代码如下：

<template>
  <div ref="box"></div>
</template>

<script>
  export default {
    data () {
      return {
        width: 0,
      }
    },
    mounted () {
      this.width = this.$refs.box.offsetWidth;
    }
  }
</script>

2. 使用$nextTick获取dom宽度：

我们可以在mounted钩子函数中使用$nextTick方法，在DOM更新之后获取元素的宽度。

示例代码如下：

<template>
  <div ref="box"></div>
</template>

<script>
  export default {
    data () {
      return {
        width: 0,
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.width = this.$refs.box.offsetWidth;
      });
    }
  }
</script>

这两种方法都可以获取DOM元素的宽度，具体使用哪种方式可以根据实际情况选择。