1、 盒模型的属性简介
1.1、 CSS盒模型本质上是一个盒子，封装周围的HTML元素。这个盒子包括：内容区（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
不同部分的说明：
- Content(内容) - 盒子的内容，显示文本和图像。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
1.2、 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处：
- 标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
- 标准盒模型下盒子的大小 = content + border + padding + margin
- 怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
- 怪异盒模型下盒子的大小=width（content + border + padding） + margin
在html代码中，默认是w3c标准的盒子，可以使用box-sizing来切换成怪异盒子
box-sizing: border-box;
下面用一段html代码来演示盒模型中一些常用的属性：
<html><head><meta charset="utf-8" /><title>盒模型的基本属性与em的使用</title><style>.box1,.box2 {width: 15em;height: 15em;background-color: sandybrown;box-sizing: border-box;background-clip: content-box;}.box1 {/* 每个盒子都有4条边框，每条边框都可以单独拿出来进行设置它的“宽度，样式和颜色”border-top-width: 5px;border-top-color: red;border-top-style: solid; */border: 5px solid red;border-radius: 2em;}.box1 {/* padding为内边距的意思，每个盒子有4条内边距，内边距只能设置宽度，无法设置颜色和样式 */padding: 1em 2em 3em;}.box2 {/* margin为外边距的意思，每个盒子同样有4条外边距，外边距只能设置宽度，无法设置颜色和样式 *//* margin一般被用来设置两个盒子之间的间隙 */margin-top: 1em;}</style></head><body><div class="box1">box1</div><div class="box2">box2</div></body></html>
2、相对单位em
em表示相对于父元素的字体大小，是相对单位，没有一个固定的度量值，如果父系元素没有设置字号大小，它就是继承html默认值1em=16px，如果父系元素设置了字号大小，它将根据父系元素的字号大小等比列去改变。
举例：
1.1 当父系没有设置字号大小，此时1em=16px。
<div><span style="width: 1em">em的使用</span></div>
1.2 当父系设置了字号大小,此时1em=50px。
<div style="font-size: 50px"><span style="width: 1em">em的使用</span></div>