盒模型介绍

通过一段时间在“逆战班”的学习,对盒模型有了一定的了解。
盒模型主要是有由以下几个部分组成:内容(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的值了。
盒模型介绍