本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一、盒子模型基本概念
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
1）Margin(外边距) - 清除边框外的区域，外边距是透明的。
2）Border(边框) - 围绕在内边距和内容外的边框。
3）Padding(内边距) - 清除内容周围的区域，内边距是透明的。
4）Content(内容) - 盒子的内容，显示文本和图像。
盒子模型简介：
1.盒子模型边框：border
盒子模型边框样式：
1）复合样式：border
2）边框颜色：border-color
3）边框宽度：border-width
4）边框样式：border-style
5）左边框：border-left
6）右边框：border-right
7）上边框：border-top
8）下边框：border-bottom
具体使用方法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orangered;
/*1.复合样式：直接写复合样式更方便*/
/*border: 10px solid black;*/
/*2.盒子边框颜色 2，3，4要同时存在才能显示盒子边框*/
border-color: #63c7f9;
/*3.盒子边框宽度*/
border-width: 1px;
/*4.盒子边框样式*/
/*1)ridge:3D垄状边框*/
/*2）solid:实线*/
/*3）dotted:点状边框*/
/*4）none:定义无边框*/
/*5）double:定义双线*/
/*6）dashed:定义虚线*/
border-style: dashed;
/*5.盒子边框弧度*/
border-radius: 10px;
/*6.上边框*/
border-top: 5px skyblue ridge;
/*7.左边框*/
border-left: 5px skyblue double;
/*8.右边框*/
border-right: 5px skyblue dashed;
/*9.下边框*/
border-bottom: 5px skyblue solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2.盒子模型内边距：padding
内边距样式：
1）复合样式：padding
2）上内边距：padding-top
3）下内边距：padding-bottom
4）右内边距：padding-right
5）左内边距：padding-left
具体使用方法如下所示：
上下左右方法一致，就不一一举例，需要注意的就是复合样式的参数设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div{*/
/* width: 100px;*/
/* height: 100px;*/
/* background-color: orangered;*/
/* border: 5px skyblue solid;*/
/* !*1.内边距复合样式*!*/
/* !*1)一个参数：上下左右都加上内边距*!*/
/* !*2）两个参数： 上下 左右*!*/
/* !*3）三个参数：第一个：上 第二个：左右 第三个：下*!*/
/* !*4）四个参数：上 右 下 左 顺时针方向*!*/
/* !*padding: 20px 30px;*!*/
/* !*2.上内边距*!*/
/* padding-top: 50px;*/
/* !*3.右内边距*!*/
/* padding-right: 30px;*/
/*}*/
.box{
width: 100px;
/*height: 100px;*/
padding: 50px;
background-color: red;
}
.div1{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
</div>
</body>
</html>
3.盒子模型外边距：margin
外边距样式：
1）复合样式：margin
2）上外边距：margin-top
3）下外边距：margin-bottom
4）右外边距：margin-right
5）左外边距：margin-left
具体使用方法如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: skyblue;
/*1.margin复合样式*/
/* !*1)一个参数：上下左右都加上内边距*!*/
/* !*2）两个参数： 上下 左右*!*/
/* !*3）三个参数：第一个：上 第二个：左右 第三个：下*!*/
/* !*4）四个参数：上 右 下 左 顺时针方向*!*/
/* margin: 50px;*/
display: inline-block;
/*2.左外边距*/
margin-left: 50px;
}
span{
background-color: orangered;
}
</style>
</head>
<body>
<div></div>
<span>111</span>
</body>
</html>
<!--注：元素与元素之间的距离设置可以用外边距-->
<!--如：margin-bottom：20px；就会与下面那个元素距离20像素-->
