解决在网页前段开发中盒子模型的宽度包含padding和border的问题

      在网页前段开发中，由于各大浏览器厂商核心技术不一样，出现了浏览器兼容性的问题，经常会出现在盒子模型中包含padding和border的问题，遇到这样的问题我们该如何解决呢？

       首先，我们先看一下标准的盒子模型：

    盒子模型由四部分组成：content（width、height）、padding、border、margin

    以上盒子模型中，210*26便是盒子的width和height，不包括padding和border，但是在某些情况下，盒子模型的宽度width包含了padding和border，为了解决这个问题，我们可以引入css3中box-sizing属性

     box-sizing的作用：指定盒子模型宽度width属性是否包含padding和border，常用属性值有两个：

                      content-box：盒子宽度width不包含padding和border；

                      border-box：盒子宽度width包含padding和border，实际内容的宽度和高度为width的值减去各自边框和填充的宽度；

    即：如果想让实现标准盒子模型，只需要设置：box-sizing:content-box;