盒模型介绍

通过一段时间在“逆战班”的学习，对盒模型有了一定的了解。
盒模型主要是有由以下几个部分组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。其中内容区是用来放置文本，图片等给用户看的东西。内容区的大小可以通过width和height值来设定。内边距指内容区到内边框的距离，我们可以通过设置padding-left，padding-right，padding-top，padding-bottom的值来改变。边框就是包裹内容区和内边距的边界线，也就是在内边距padding和外边距margin之间。边框也分为border-left，border-right，border-top，border-bottom，边框可以设置多种属性值，经常用到的有宽度，颜色，样式，可以简写在一起，例如 border：1px solid red；外边距指边框外边向外延伸的区域，也分为margin-top、margin-bottom、margin- left、margin-right，我们可以通过外边距来设置元素之间的距离。

盒模型又可以分为标准盒模型和怪异盒模型，他们的主要区别就是总宽度的定义不一样。在标准盒模型中，我们设置的width为内容区（content）的大小，而盒子总宽度为content+padding+border+margin的值。

在怪异盒模型中，我们设置的width值为content+padding+border之和，那么盒子总宽度变为width+margin的值了。