在学习css的时候有些设定其实并不是很好用但是在css3下就极度舒适了

css3的盒子模型`box-sizing`属性

content-box（默认）

盒子大小等于 = boder+ padding+ content ,pading和border会改变盒子的大小 padding会撑大盒子导致，导致每次还得计算极度不舒服
boder-box

盒子的大小就是我们设置的content的大小，但是如果padding+border超过了padding 还是会改变盒子的大小的。

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #666;
            border: 10px solid red;
            padding: 15px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: #666;
            border: 10px solid red;
            padding: 15px;
            box-sizing: border-box;
        }
    </style>

<body>
    <div class="box1">content-box</div>
    <div class="box2">border-box</div>

我们可以给所有的元素加上这个属性，这样我们的盒子大小直接可以被width和height规定死了，padding不会撑开盒子了（不超过的情况下）