盒子模型介绍及操作

一、属性介绍

• margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
• padding: 用于控制内容与边框之间的距离；
• Border(边框): 围绕在内边距和内容外的边框。
• Content(内容): 盒子的内容，显示文本和图像。

以快递盒为例：

margin 两个不同的快递之间的距离（标签与标签的距离）

Border 快递盒的厚度（标签的边框）

padding 快递盒内部的物体到盒子边框的距离（标签内容到边框的距离）

Content 快递内的物体

二、margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

顺序：上右下左

.margin-test {
  margin: 5px 10px 15px 20px;
}

注意：两个标签的外边距并不会叠加，而是取大的那一个

常见居中：

只能做到左右居中，不能上下居中

.mycenter {
  margin: 0 auto;
}

三、padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

• 提供一个，用于四边；
• 提供两个，第一个用于上－下，第二个用于左－右；
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
• 提供四个参数值，将按上－右－下－左的顺序作用于四边；