box-sizing:border-box使用记录

在开发需求需要兼容IE8-IE10时,为了使盒模型计算更加方便大多都选择使用了box-sizing

<div class="sidebar"></div>

.sidebar{
  min-width:1200px;
  padding:5px 10px;
  height:60px;
  margin:0 auto;
}

在没有使用box-sizing:border-box时,sidebar的高度比设定的高度要高,反之其最大高度为最初设定的高度,但这是有条件的,如下:

• 当padding的值大于设定的值,则box-sizing无效
• 当padding的值小于或等于设定的值,则box-sizing有效