【快速入门系列】CSS盒模型基础

引言

CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为“盒模型”。

一、什么是盒模型

我们首先来看一下在HTML中盒模型的样子：

我们可以清楚的看出，盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

二、W3C标准盒模型

IE8以上浏览器默认使用W3C标准盒模型
在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的高度值，因此有：
元素占据的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素占据的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
这里给大家举个栗子：

<style>
.box {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 5px solid grey;
  margin: 20px;
  background: red;
}
</style>

<div class="box">
  盒模型内部元素
</div>

最终呈现的效果如下图：

W3C盒模型各部分取值：

三、IE盒模型

IE8及以下的浏览器默认使用IE盒模型
IE盒模型又称“怪异盒模型”，在该标准下，我们定义元素的width值为盒模型中的border-left + padding-left + content的宽度值 + padding-right + border-right的总和，height值为盒模型中的border-top + padding-top + content的高度值 + padding-bottom + border-bottom的总和
元素占据的宽度 = margin-left + width + margin-right
元素占据的高度 = margin-top + height + margin-bottom
上述同样的代码，在IE盒模型下会有如下效果：

四、box-sizing

以下是MDN对 box-sizing 属性的说明：

box-sizing 属性可以被用来调整这些表现:
content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

我们可以简单的理解，当box-sizing为content-box时，我们使用的是W3C盒模型，当box-sizing为border-box时，我们使用的是IE盒模型。

更多关于box-sizing属性的使用，可以看这里：box-sizing | MDN

结束语

盒模型概念无论是在实战中或者面试中都是非常重要且基础的知识点，因此需要熟练掌握，此文章对盒模型概念做了基本介绍，希望能给你带来帮助。