CSS模型框概述：CSS框模型规定了元素框处理元素内容、内边距、边框、外边距的方式；
图解：一般所指的Width、Height说的是元素内容的宽和高，外边距默认是透明的，不会遮挡其后面的元素，而一般所说的背景是指内容和内边距所形成的区域，
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，外边距可以是负值，而且在很多情况下都要使用负值的外边距；
一、Padding（内边距）属性：元素与边框之间的空白区域，padding 属性接受长度值或百分比值，但不允许使用负值；
<table style="border-style:solid; border-color:Black;">
<tr>
<td style=" border-style:solid; border-color:Black; border-1px; padding:1cm; ">
设置四个相同的内边距
</td>
<td style=" border-style:solid; border-color:Black; border-1px; padding:1cm 2cm 3cm 4cm; ">
设置四个不同的内边距1
</td>
<td style=" border-style:solid; border-color:Black; border-1px; padding-top:1cm; padding-right:2cm; padding-bottom:3cm; padding-left:4cm;">
设置四个不同的内边距2
</td>
</tr>
</table>
效果图：
二、border（边框）属性：border是围绕元素内容和内边距的一条或多条线，CSSborder属性允许你规定元素边框的样式，宽度和颜色；
2、边框样式：边框样式是边框最重要的一个属性，因为如果没有边框样式，就根本不会出现边框；
<table style="border-style:solid; border-color:Black;">
<tr>
<td style="border-1; border-color:blue; padding:1cm; background-color:Red; ">
没有设置边框样式或设置为none，边框就不会出现，
</td>
<td style=" border-style:solid; border-0.5cm; border-color:Black; padding:1cm; background-color:Red; ">
设置了边框样式，规定此边框颜色为黑色
</td>
</tr>
</table>
<table style="border-style:solid; border-color:Black; background-color:Blue;">
<tr >
<td style="border-style:solid; border-0.5cm; border-color:green; padding:1cm; background-color:Red; ">
设置边框色为绿色
</td>
<td style=" border-style:solid; border-0.5cm; border-color:transparent; padding:1cm; background-color:Red; ">
设置边框色为透明
</td>
</tr>
</table>
三、margin（外边距）属性：围绕在元素边框的空白区域，这个属性值可以接受任何长度单位，百分数，甚至负值；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
</head>
<body>
<p style="border-style:solid; margin:2cm;">
四个外边距为2cm
</p>
<p style="border-style:solid; margin:2cm; ">
四个外边距为2cm
</p>
</body>
</html>
效果图：
小结：
1、如果长度或宽度值为百分比，百分数是相对于父元素的宽度计算的，而元素的宽度是指元素内容的宽度；
2、没有边框样式就没有边框；
3、值复制：
- margin: top right bottom left
-
border:top right bottom left
-
padding:top right bottom left
这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
如果为指定了 3 个值，则第 4 个值会从第 2 个值复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值会从第 1 个值复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值复制得到。