CSS 盒模型详解

本文由 简悦 SimpRead 转码， 原文地址 juejin.cn

CSS 的盒模型是 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，然后把右边栏的滚动条拉到最下面你就会看到一个东西：

这里写图片描述

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

1
2
3
4
5

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

这里写图片描述

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

1
2
3
4
5
6

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

这里写图片描述 这里写图片描述

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

1
2
3
4
5
6
7

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

这里写图片描述 这里写图片描述

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.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。如下

1
2
3
4
5
6
7

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

这里写图片描述

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

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