从 html 元素继承 box-sizing

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

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

 

可以这样设置：

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

就不需要每次写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中引入

　　　　①styles/box.less

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

　　　　②main.js

import '@/styles/box.less'

 

 

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