Skip to main content

CSS 盒模型详解

作者：哆来咪 er

链接：https://juejin.im/post/6844903505983963143

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

盒子模型​

首先盒模型分为 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自由的进行切换的

box-sizing : content-box || border-box || inherit;

在 css3 中新增了 box-sizing 属性，具备了以上知识后，我们已经理解：

  1. 当为 content-box 时，将采取标准模式进行解析计算
  2. 当为 border-box 时，将采取怪异模式解析计算
  3. 当为 inherit 时，将从父元素来继承 box-sizing 属性的值

content-box（标准盒模型）

width = 内容的宽度

height = 内容的高度

border-box（IE 盒模型）

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

实践​

案例 1​

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

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

普通 context​

.box{
        width:200px;
        height:200px;
        background-color:pink;
}

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

添加 padding​

如果添加了 padding 的话

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

在浏览器上会显示

box 的图如下

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

加 border​

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

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

案例 2​

代码：

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

案例图如下：

盒子模型如下：

可以看到盒子在原来的 200+20x2+10x2 = 260 的基础上，还加了 10px 的空白

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

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

我们可以试着给上面的粉色方块设置 box-sizing 属性为 content-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 盒模型。