在开发需求需要兼容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有效
