CSS3盒子模型

CSS3盒子模型

  我们知道盒子的大小是由border,padding,content三者的大小共同决定的，有时候如果我们确定了盒子的大小，之后我们改变padding值时，将会改变盒子的大小，为了不影响布局，我们会回过头去改变width和height以使得盒子的大小不变。

  假设有如下的盒子

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 0 auto;
}

当我们设置padding值后

padding: 10px

我们发现盒子被撑开了，这个时候我们要重新设置width和height才可以使得盒子变为原来的大小

width: 80px;
height: 80px;

  在CSS3中，可以通过设置box-sizing来设置盒子的模型，默认为content-box,也就是上面那种情况，当设置为border-box时，使用padding值不会使盒子的大小发生改变，他会自动的向内减少content的大小，如下

div {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}