border-box

box-sizing: border-box叫做标准盒子模型

border-box意味着子容器的padding和border的厚度都算在50%之内

这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆

border-box兼容性非常好，可支持IE8及以上浏览器

现在最著名的CSS框架几乎都采用了border-box

但假如在全局上加上border-box，是没必要加的

事实上：你只需要在必须使用border-box的元素身上使用border-box，其他所有元素都保持content-box就好了

为什么？

因为：box-sizing属性本来就应该是灵活使用的，全局设定为border-box或者全局设定为content-box都有弊端

【使用场合】

子元素有padding和border，或者至少有其一

并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box

<div class="wrapper">

    <div id="header"><span>页眉</span></div>

    <div class="sidebar">侧边栏</div>

    <div class="content">主内容</div>

    <div id="footer">页脚</div>

</div>

*{

    margin:0;

    padding:0;

}

.wrapper{

    width: 960px;

    margin-left: auto;

    margin-right: auto;

    color:#fff;

    font-size: 30px;

    text-align: center;

    background-color: #ccc;

}

#header{

    height: 100px;

    background-color: #38382e;

    margin-bottom: 10px;

    padding:10px;

    width: 100%;

    box-sizing: border-box;

}

#header span{display: block;}

.sidebar{

    float:left;

    width: 220px;

    margin-right: 20px;

    margin-bottom: 10px;

    height: 300px;

    background-color: #5d33cf;

    box-sizing: border-box;

    padding:10px;

}

.content{

    float:left;

    width: 720px;

    height: 300px;

    background-color: #c8ca30;

    margin-bottom: 10px;

    box-sizing: border-box;

    padding:10px;

}

#footer{

    background-color: #cc4ad5;

    height: 100px;

    clear: both;

    box-sizing: border-box;

    padding:10px;

}