前端里面box-sizing：border-box作用是啥？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端里面box-sizing：border-box作用是啥？相关的知识，希望对你有一定的参考价值。

参考技术A 把内边距和边框，都算在一个盒子模型内，总宽度内，如果没有这个，宽度=内边距+边框

box-sizing重置

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

所有元素使用border-box, 并且允许元素修改其box-sizing

 

 

 

 

 出处:https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

以上是关于前端里面box-sizing：border-box作用是啥？的主要内容，如果未能解决你的问题，请参考以下文章

关于盒子大小

为啥 Bootstrap 3 切换到 box-sizing:border-box？

* { box-sizing: border-box; } 的作用

box-sizing属性中的border-box学习分享

css box-sizing：border-box

css box-sizing：border-box