机制和原理——盒子模型

每个可视的HTML元素在页面上都会被渲染成一个矩形区域，通常被称为盒子模型。

区域组成

盒子模型主要定义四个区域：

• 内容(content)、
• 内边距(padding)、
• 边框(border)
• 外边距(margin)。

容器元素的客户区域包含内边距(padding)和内容(content)，但不包含边框(border)。因此在position=absolute的情况下，left和top属性指定的是子元素的外边距(margin)的左上角相对于父元素的内边距(padding)左上角的位置。

类型

盒子模型有两种类型：传统的content-box和CSS3之后才导入的border-box，由box-sizing属性定义。虽然border-box更位直观，但因为兼容的原因，缺省值仍然是传统的content-box。

• content-box width和height定义的是内容(Content)部分的宽度和高度而不是整个盒子的高度，内边距(padding)、边框(border)和外边距(margin)依次加在外面。背景会填充padding和content部分。

• border-box width和height定义包含边框(border)，内边距(padding)和内容(content)，但不包含外边距(margin)