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

引言

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

1、什么是盒模型

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

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

2、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盒模型各部分取值：

3、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盒模型下会有以下效果：

4、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

结束语

盒模型概念不管是在实战中或者面试中都是很是重要且基础的知识点，所以须要熟练掌握，此文章对盒模型概念作了基本介绍，但愿能给你带来帮助。