border-box和content-box

先上理论

 box-sizing属性可以为三个值之一：
　　content-box（default），border-box，padding-box。
　　content-box，border和padding不计算入width之内
　　padding-box，padding计算入width内
　　border-box，border和padding计算入width之内，其实就是怪异模式了~ 

 

 再是代码

CSS

.content-box{
    width: 100px;
    height: 100px;
    border: 1px solid;
    padding: 0px 10px;
    box-sizing: content-box;
}
.border-box{
    box-sizing: border-box;
}

html

<div class="content-box">content-box</div>
<div class="content-box border-box">border-box</div>

• content-box截图 
• 盒子宽度：1×2（border×2）+10×2（padding×2）+100(content-width)=122 
  盒子高度：1×2（border×2）+0×2（padding×2）+100(content-height)=102

 

 border-box的原理

• border-box截图 
  盒子宽度：1×2（border×2）+10×2（padding×2）+78(content-width)=100 
  盒子高度：1×2（border×2）+0×2（padding×2）+98(content-height)=100