CSS盒模型详解

CSS的盒模型是CSS的基础，同时也是难点，这个问题常常在面试中会被问到，属于经典问题了。不少博客里讲得也很模糊不清，因而，我在这里从新整理一下。

能够认为每一个html标签都是一个方块，而后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。

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

IE盒模型和W3C标准盒模型的区别是什么？

1. W3C 标准盒模型：

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

2. IE 盒模型：

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

在ie8+浏览器中使用哪一个盒模型能够由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；若是将box-sizing设为border-box则用的是IE盒模型。若是在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是能够经过box-sizing自由的进行切换的。

content-box（标准盒模型）

width = 内容的宽度

height = 内容的高度

border-box（IE盒模型）

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

谷歌浏览器，按下F12，而后把右边栏的滚动条拉到最下面你就会看到一个东西：

这里写图片描述

经过代码来对其进行理解，更直观，以下

.box{
        width:200px;
        height:200px;
        background-color:pink;
}复制代码

这里写图片描述

此时，盒子大小就是content的大小。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
}复制代码

这里写图片描述

这里写图片描述

此时，盒子的长宽变成了240x240，显然，padding是可以改变盒子的大小的，这时盒子大小就等于content+padding。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
}复制代码

这里写图片描述

这里写图片描述

此时，盒子的长宽变成了260x260，因此这时盒子大小就等于content+padding+border。

.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
        margin-bottom:10px;
}
.box1{
        width: 100px;
        height: 100px;
        background: green;
}复制代码

效果图以下：

这里写图片描述

此时，盒子的长宽仍为260x260，即盒子的大小并未发生变化。

这里写图片描述

这里写图片描述

能够看到，盒子的底部产生了10px的空白。

因此说，盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框，而不加上margin。不少时候，咱们会错误地把margin算入，若那样的话，上面这种情形盒子的大小应该是260x270，但实际状况并非这样的。

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的那是盒子占据的位置，而不是盒子的大小！

咱们能够试着给上面的粉色方块设置box-sizing属性为border-box发现，会发现：不管咱们怎么改border和padding盒子大小始终是定义的width和height。以下

.box{
        width:200px;
        height:200px;
        background-color:pink;
        box-sizing:border-box;
        padding:20px;
}复制代码

这里写图片描述

咱们在编写页面代码时应尽可能使用标准的W3C模型(需在页面中声明DOCTYPE类型)，这样能够避免多个浏览器对同一页面的不兼容。

由于若不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒子模型，FireFox等会将其解释为W3C盒子模型；若在页面中声明了DOCTYPE类型，全部的浏览器都会把盒模型解释为W3C盒模型。