css盒边框

一，边框

常用的边框属性有7项：border-top,border-botton,border-left,border-right。其中border- width可以一次性设置所有的边框宽度，且需要按照(上右下左)的顺序。

border-color设置边框颜色，可以按照上右下左的顺序设置四个边框的颜色。

border-style(边框样式) ，border-style属性包括了多个边框样式的参数。
none:无边框。
dottoed:边框为点线
dashed:边框为长短线
solid:边框为实线
double:边框为双线，且两条线与其间隔的和 等于指定的border-width
groove:根据border-color的值画3D凹槽
ridge:根据border-color的值画菱形边框
inset:根据border-color的值画3D凹边
outset:根据border-color的值画3D凸边

**使用还属性之前必须先设置盒子的高度(height)或宽度(width)属性，或者设定position属性为absolute**  
可通过border-width设置，宽度，颜色以及样式，格式如下： 

```cssborder-width:2px red solid//边框宽度为2，红色，实线```

二，内边距

内边距也称为没补丁，位于对象边框和对象之间，用于设置边框与内容之间的距离。
内边距包括4项属性:paddingtop,borderright,borderbottom,border-left。
分别为(上右下左)内边距，内边距属性值不允许为负，且与在边距类似，内边距也可以用padding一次性设置所有属性样式。
另外：内边距是内容区和边框之间的距离是透明留白部分，所以没有修饰属性

三，盒模型的宽度与高度

1.盒模型的宽度
盒模型的宽度=左外边距+左边框+右外边距+右边框+左内边距+内容宽度+右内边距

2.盒模型的高度
盒模型的高度=上外边距+上内边距+上边框+内容区+下内边距+下边框+下外边距

3.在边距的叠加
在边距折叠问题非常重要，在使用时如果不能理解内涵就容易造成布局混乱。简单说就是，当两个元素的垂直在边距相遇时，这两个元素的在