CSS 框模型 (Box Model) 规定了元素框处理元素内容(element)、内边距(padding)、边框(border ) 和 外边距(margin ) 的方式。
CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的，默认值是零。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，
请看下图：#box { width: 70px; margin: 10px; padding: 5px;}提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
1.边框borber
边框风格 border-style
style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>定义多种样式
您可以为一个边框定义多个样式，例如：
p.aside {border-style: solid dotted dashed double;}上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的：
p {border-style: solid solid solid none;} == p {border-style: solid; border-left-style: none;}
注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。
2.边框颜色
属性：border-color 命名颜色，也可以是十六进制和 RGB 值。
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
border-top-color
border-right-color
border-bottom-color
border-left-color
要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：
<style>
h1 {
border-style: solid;
border-color: black;
border-right-color: red;
}
</style>3.边框宽度
属性：border-width 值： 两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
比如:border-width:2px;
定义单边宽度同边框。
没有边框
在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况：
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
4.有交界的边都有边框
比如上和左就是有交界的，而上和下就没有交界,当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
<style>
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>