文章目录
CSS复习篇
一、简介
下图是一张框模型的示意图：
在上图中，可以看到，元素框的最内部分是实际的内容，他有width和height两个基本属性，直接包围内容的是内边距padding，内边距呈现了元素的背景，它的边缘就是边框border，边框以外就是外边距margin，外边距默认是透明的，因此不会遮挡后面的任何元素。
二、外边距（margin）
外边距就是元素与元素之间的距离，主要由四部分组成，分别是：margin-top（上外边距）、margin-right（右外边距）、margin-botton（下外边距）、margin-left（左外边距），可以用这些语句设置其中一个属性，也可以使用margin将四个属性一起设置。当需要单独设置某一个外边距时：
margin-top:<length> | auto | ;
1、只设置一个外边距的值
margin: 5px;
上述语句中，5px就代表上、下、左、右这四个外边距的值都为5像素
2、设置两个外边距的值
margin: 5px 10px;
上述语句中，两个属性值中间用空格隔开，其含义代表该元素的上下外边距为5像素，左右外边距为10像素
3、设置三个外边距的值
margin: 5px 10; 15px;
三个属性值中间用空格隔开，含义为该元素的上外边距为5像素，左右外边距为10像素，下外边距为15像素
4、设置四个外边距的值
margin: 5px 10px 15px 20px;
从顶端开始，按照顺时针的顺序，依次描述各个外边距的值。
三、内边距（padding）
内边距就是元素的内容与对象边框之间的距离，通过padding属性进行设置，和上个部分几乎一模一样
四、边框（border）
边框的属性，主要通过设置边框颜色（border-color）、边框宽度（border-width）以及边框样式（border-style）完成的
1、边框的颜色属性border-color
border-color:color;
使用下面代码，分别设置上、右、下以及左边框的颜色：
border-color:#f00 #0f0 #00f #0ff;
使用下面代码，可以设置上边框颜色：
border-top-color:#f00;
2、边框的样式属性border-style
主要来设置边框的样式，语法如下：
border-style: dashed|dotted|double|groove|hidden|inset|outset|ridge|solid|none;
属性值含义如下表所示：
| 属性 | 含义 |
|---|---|
dashed |
虚线 |
dotted |
点线 |
double |
双线 |
groove |
3D凹槽 |
hidden |
隐藏边框 |
inset |
3D凹边 |
outset |
3D凸边 |
ridge |
菱形边框 |
solid |
实线 |
none |
没有边框 |
3、边框的宽度属性border-width
border-width:medium|thin|thick|length
medium：默认边框宽度thin：比默认边框宽度窄thick：比默认边框宽度宽length：指定具体的线条的宽度