Css 盒子模型

1.那什么是盒模型呢？

简单的理解为，你可以把每个html标签当成一个小方块，然后这个小方块又包着几个小方块，如同盒子一层一层包着，这就是所谓的盒模型。

盒模型分为IE盒模型和W3C标准盒模型。

IE盒模型和W3C标准盒模型有什么区别呢？

1.W3C标准盒模型

属性width,height只包含内容content，不包含border和padding

width = 内容的宽度

height = 内容的高度

2.IE盒模型

属性width，height包含border和padding，指的是content+padding+border.

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

我们来通过代码对其进行理解更直观，如下：

.item{

    width: 200px; 

    height: 200px;

    background-color: cornflowerblue;

}

.item{

    width: 200px; 

    height: 200px;

    background-color: cornflowerblue;

    padding:20px

}

那么此时，你可以看到下面的宽高都比上图多40px，也就说设置了padding以后，盒子的大小等于content+padding，接下来再看看border。

.item{

    width: 200px; 

    height: 200px;

    background-color: cornflowerblue;

    padding:20px；

  border: lavender 10px solid;

}

此时可以发现此时的宽高比上面的一幅图多20px,那么也就是说在设置了border以后，盒子的大小等于content + padding + border.那么margin呢， margin和宽高有关系嘛?

.item{

    width: 200px; 

    height: 200px;

    background-color: cornflowerblue;

    padding:20px；

    border: lavender 10px solid;

    margin-bottom:20px;

}

如图所示，盒子的长宽还是260*260，也就是说大小没有变化，但是盒子底部与下面的方块产生了20px的空白间隙，所以可以得出对于IE盒模型来说，盒子的大小等于content + padding + border决定的，margin是不会改变盒子的大小，所以说margin代表的是盒子所占据的位置。

刚刚我们说的是在IE盒模型的情况下盒子大小的计算，那么此时我们把box-size属性设置成border-box，会发现什么呢？

你会发现盒子的padding、border仍在，但是盒子的大小却变成了200*200，然后你会发现无论我们怎么设置padding、border，盒子的大小始终不会变。这个时候我们要介绍下box-size这个属性了。

box-size： border-box | content-box | inherit

content-box（默认）:在宽度和高度之外绘制元素的内边距以及边框

border-box:在已设定好的宽度和高度内绘制元素的内边距以及边框

inherit:继承父元素box-sizing属性的值

根据不同的属性值进行不同的绘制，现在都明白了嘛？

我们在编写页面代码的时候尽量使用标准的W3C盒模型（需在页面中声明DOCTYPE模型），这样可以避免多个浏览器对同一界面的不兼容。

注意，这里若不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒模型，FireFox等将会解释为W3C盒模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

具体的使用哪种模式视使用场景决定。