前言：
当我们打开一个网页使用F12进行调试时，经常可以看到如下图片，这便是一个盒子。
什么是盒子：
所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。或者说，每一个可见的 HTML 元素都是一个盒子。
———来自知乎
常规盒子的基本构造组成：
图解：
结构简说：
英文名 中文名 说明 margin 外边距
清除边框外的区域，外边距是透明的。 border 边框
围绕在内边距和内容外的边框。 padding 内边距 清除内容周围的区域，内边距是透明的。 content 内容 盒子的内容，显示文本和图像。
盒子模型各部分详解：
margin(外边距)：
用于将各个板块区别开来的组件，在此不过多解释。
可以查看此篇文章浏览：点此跳转
border(边框)：
解释：
围绕元素内容和内边距的一条或多条线，，可用于区别不同区域的内容，可以直接定义他们的样式，宽度，颜色等，border是一个复合属性。
边框样式：
border-style
设置的属性解释：
属性 解释 border-style
对四边同时进行操作 border-top-style
只对上边框进行操作 border-bottom-style
只对下边框进行操作 order-left-style
只对左边框进行操作 border-right-style
只对右边框进行操作 常见的属性值：
属性值 解释 none 默认值，无边框 dotted
定义一个点线框
dashed
定义一个虚线框
solid
定义实线边界
double
定义两个边界,两个边界的宽度和boder-width的值相同
groove
定义3D沟槽边界,效果取决于边界的颜色值
rigde
定义3D脊边界,效果取决于边界的颜色值
inset
定义一个3D的嵌入边框,效果取决于边界的颜色值
outset
定义一个3D的突出边框,效果取决于边界的颜色值
边界宽度：
border-width
设置属性解释：
属性 解释 border-width
对四边同时进行操作 border-top-width
只对上边框进行操作 border-bottom-width
只对下边框进行操作 order-left-width
只对左边框进行操作 border-right-width
只对右边框进行操作 常见的属性值：
与字体大小的设置方法相似。
边界颜色：
border-color
设置属性解释：
属性 解释 border-color
对四边同时进行操作 border-top-color
只对上边框进行操作 border-bottom-color
只对下边框进行操作 order-left-color
只对左边框进行操作 border-right-color
只对右边框进行操作 常见的属性值：
与颜色的设置方法一致。
四角边框的设置：
border-radius
设置值解释：
属性值个数/样式 解释 1
四只角同时进行操作 2
只对上边框进行操作【左上+右下 左下+右上】 3
分三处进行操作【左上 右上+左下 右下】 4
对四只角分别操作进行操作【按顺时针的顺序】 x/y 将其分为水平和数值方向操作 总说：
由于border是一个复合属性，所以写上述几方面时（除border-radius外），可以写在同一个border中。
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ border: 10px ridge red; } </style> </head> <body> <div> 这是一个div标签 </div> </body> </html>
padding(内边距)：
解释：
padding表示盒子的内边距，意思是填充，与外边距不同的是，padding可以设置背景图片和颜色。
设置属性解释：
属性 解释 padding
对四边同时进行操作 padding-top
只对上边框进行操作 padding-bottom
只对下边框进行操作 padding-left
只对左边框进行操作 padding-right
只对右边框进行操作 属性值以及用法：
其属性值以及用法与border类似，参考上方border的说明。
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ background-color: aquamarine; } div.div1{ padding: 20px; } </style> </head> <body> <div> 这是一个div标签，正常情况 </div> <br> <div class="div1"> 这是一个div标签,通过padding设置 </div> </body> </html>
图像类使用说明（简说）：
具体使用方法见此篇文章：点此跳转
举例：
属性 说明 border-image
设置图形边界，简写属性
border-image-source
图形的来源（路径），可以接收一个URL函数或一个渐变作为值。
border-image-slice
图形的切片大小
border-image-width
图形边界的宽度
border-image-repeat
定义图片如何填充边框
border-image-outset
定义边界内部和内边距之间的额外空间的大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span{ border-image-width: 200px; border-image-outset: 100px; border-image-repeat: 100px; border-image-source: url(../img/4.jpg); } </style> </head> <body> <span> </span> </body> </html>
content(内容)：
用于存放我们内容的属性，body内的内容
