一、为什么要从 html 元素中继承 box-sizing

box-sizing默认值为 content-box，设置border和padding时会改变width和height

并且默认不具有继承性，每次设置border或padding时都需要设置一遍box-sizing: border-box;比较麻烦

二、如何设置全局的box-sizing

      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

此时，html中的元素在设置padding和border时，会默认设置上box-sizing: border-box;

三、vue中如何设置

方式一：App.vue中

    #app {
      /* start-将box-sizing默认改为border-box，如果需要设置为content-box需要手动加box-sizing: content-box; */
      box-sizing: border-box;
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
      /* end */
    }

方式二：public/index.html

  <style>
    html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
  </style>

方式三：main.js中引入

1. styles/box.less

    html {
      box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

2. main.js

    import '@/styles/box.less'

四、接手的项目中，不好全局设置box-sizing的继承，只好在单个的组件中设置

    .ceiling {
      box-sizing: border-box;
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }
    }

五、还可以这样设置

1、App.vue（如果没有设置scoped，可以去掉 /deep/）

/deep/ div,
header,
ul {
  box-sizing: border-box;
}

2、Ceiling组件中

.ceiling {
  div,
  header,
  ul {
    box-sizing: border-box;
  }
}

怕麻烦可以将 div,header,ul... 换成 *，但不建议这么做