CSS盒子模型

边框：环绕在标签周围的边条

设置边框一：
-连写格式：同时设置4条边框
{border:边框宽度 边框样式 边框颜色;}
{border:5px dashed green;}

-分别设置：可单独设置某一条边的边框
{border-top:边框宽度 边框样式 边框颜色;}
{border-bottom:边框宽度 边框样式 边框颜色;}
{border-left:边框宽度 边框样式 边框颜色;}
{border-right:边框宽度 边框样式 边框颜色;}

Paste_Image.png Paste_Image.png

边框样式：
solid 实线边框样式
dashed 虚线边框样式

注意：
颜色省略，默认有黑色
样式省略，则无边框
宽度省略，默认有

设置边框二：按照要素来，这三个属性的赋值，是按照上、右、下、左的方式来取值的，不是按照上下左右的方式来赋值。
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
border-width: 10px 10px 10px 10px;
border-style: dashed solid dotted double;
border-color: red orange yellow green;
}

内边距padding：第一个容器都有边框，边框和容器内容的距离就叫内边距，给标签设置内边距后，容器的大小会发生变化。

-内边距格式：有连写和非连写两种
内边距的背景颜色和容器背景颜色一样

Paste_Image.png

注意：在写HTML代码时，有回车行的标签时，回车会被当作一个空格来处理在页面显示一个空格的宽度。

外边距margin：标签与标签之间的距离
-内边距格式：有连写和非连写两种