CSS盒子模型

一、盒子模型

盒子模型是网页设计中经常用到的一种思维模型，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，内边距，和实际内容。

下面的图片说明了盒子模型(Box Model)：

盒模型的各个部分：

• Content box（内容区）: 这个区域是用来显示内容，大小可以通过设置 width和 height
• Padding box（内边距）: 包围在内容区域外部的空白区域;大小通过 padding相关属性设置
• Border box（边框）: 边框盒包裹内容和内边距。大小通过 border相关属性设置
• Margin box（外边距）: 这是最外面的区域，是盒子和其他元素之间的空白区域，大小通过 margin相关属性设置

下面我会分别描述这几个元素

二、内容区

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、h