理解box-sizing属性box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，b

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

box-sizing: content-box|border-box|inherit:

content-box 使得元素的宽高即为内容区的宽高

<style>
    * {
        padding:0;
        margin:0
    }
    #app{
        height: 100px;
        width: 200px;
        background: green;
        margin:10px;
        padding:5px;
        box-sizing: content-box
        border:2px solid red;
    }
    .box{
        display: inline-block;
        border:1px solid red;
        width:50%
       
    }
</style>
<body>
   <div id="app">
       <span class="box">左</span>
       <span class="box">右</span>
   </div> 
</body>

上图红色箭头即宽200px,不难理解，想象你有个div 现在你要定义它的宽为200px,此时头脑中想象这个div,就是纯粹的200px，无任何修饰。此时你觉得太单调了，想要添加一个宽2px的边框，那么在设置成content-box规则下，你需要往这个div外边围绕一个边框，此时你这个div实际上要比原来div要稍微大。

border-box 与上面相反，如果你需要在一个宽200px的div上围绕2px的边框，那么你的边框是在这个div容器内壁围绕，即content+padding+border=200px

可见你的内容区实际上偏小了一点。

inherit 指定box-sizing属性的值，应该从父元素继承