盒子的概念
我的的HTML的网页布局是使用一种矩形的方式来作为基础，先设立一段矩形，然后往这个矩形中添加我们所需的内容，从而达到我们对网页的布局。
边框的构成
在后面的内容中，我们会对边框的大小，内边距，外边距大小的控制进行讲解
我们来用<div></div>来查看一下
我们可以发现<div></div>所占用的边框和<html></html>占有的边框不同，<html></html>包含了<div></div>的边框，这种边框在CSS里面称为盒子
盒子的控制
我们可以通过<style></style>来控制盒子的大小，位置，风格
一般我们的盒子我们是看不到的，但是我们可以通过修改参数来使盒子更加直观
边框大小的控制
border-style
border-style用于定义盒子的边框，一般默认是不会显示的。
使用格式
border-style:solid;border-style常用参数有以下几种
| 模式 | 作用 |
| soild | 边框实线 |
| dotted | 边框点线 |
| dashed | 边框虚线 |
| groose | 边框细线 |
这里的border-style还有其它的参数，我们就不一 一演示了
border-color
border-color用于定义边框的颜色，一般默认是黑色。
使用格式
border-color: red;border-color参数没有什么特别的，就是颜色，会懂得每个颜色的英文名是什么就可以直接用了
border-width
border-width用于定义边框的粗细。单位是px，一般默认单位是2px
使用格式
border-width: 2px;border
border用于对边框设置的简写，有三个参数，书写必须有序
使用格式
border: 2px black solid;这里我们缩短篇幅只演示一下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>.One{border: 2px black solid;}</style>
</head>
<body><div class="One">!!!Hello,World!!!!!!Hello,World!!!</div>
</body>
</html>演示结果
内边距大小的控制
内边距就是文本内容和边框在边框内部间隔的距离
使用格式
padding: 2px;
padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;其中下面四个格式是用来修改某个方向的内边框距，padding是修改所有方向的内边框距离
浏览器提供了用于我们观察盒子数据的调试
在这张图中，我们可以看到内边距全都为'-'也就是零 ，而这里的本文和边框的距离是零
当我们将所有内边框距离修改为10px时，演示结果如下
这里的内边距被修改成了10，但是修改的代价时边框变大了，文本是不会变小的
CSS盒子类型content-box和border-box
改变盒子类型格式
box-sizing: border-box;content-box：保持文本部分的盒子大小不变，更改内边距的大小时，通过改变整体边框的大小来给改变内边距提供空间
border-box：保持整体边框大小不变，通过改变本文边框的大小来给改变内边框大小提供条件
注意，使用border-box模式时，必须设置好边框的大小，否则还是content-box模式
外边距大小控制
外边距大小控制使用到的是margin，控制单位为px
使用格式
margin:2px这里我们就来展示一下margin的使用示例就可以了吧
这里当我们将margin的参数调大时，文本边框的间距也会跟着调大，而且它们互相之前还会发生嵌套
嵌套块元素垂直外边距塌陷
当我们定义全局外边距时，是非常容易有这种嵌套发生的，往往这种情况容易出现错误
演示代码
<!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>.One{height: 200px;width: 200px;background-color: aqua;margin: 40px;}.two{height: 50px;width: 50px;background-color: black;margin: 20px;}</style>
</head>
<body><div class="One"><div class="two"></div></div>
</body>
</html>演示结果
这里面的黑色区域并没有和外面的蓝色区域保持外边距为20px 这就是塌陷的情况
对于两个嵌套的父子块元素，当他们都有上外边距时，父块元素会选择它们两其中一个最大的值作为它的上外边距，而子块元素的上外边距为0
遇到这种问题有两种解决方式
1.删除字块元素的上外边距，父块元素设置边框大小
2.删除子块元素的上外边距，父块元素设置内边距大小
演示代码
<!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>.One{height: 180px;width: 180px;background-color: aqua;border: 20px aqua solid;}.two{height: 50px;width: 50px;background-color: black;}</style>
</head>
<body><div class="One"><div class="two"></div></div>
</body>
</html>演示结果
演示代码
<!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>.One{height: 200px;width: 200px;background-color: aqua;padding: 20px;}.two{height: 50px;width: 50px;background-color: black;}</style>
</head>
<body><div class="One"><div class="two"></div></div>
</body>
</html>演示结果
盒子相关属性
border-radius
border-radius可以修改盒子的弧度，
使用格式
border-radius: 10%;有两种参数，分别是数值型和百分数型
百分数型范围0%~50%
数值型范围为0~120
演示代码
<!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>.One{height: 200px;width: 200px;border-radius: 50%;background-color: aqua;padding: 20px;display: inline-block;}</style>
</head>
<body><div class="One"></div>
</body>
</html>演示结果
border-shadow
border-shadow可以用来给盒子添加阴影，并且修改阴影的属性
使用格式
box-shadow:h-shadow v-shadow blur spread color/insert- h-shadow：阴影的横向位置
- v-shadow：阴影的纵向位置
- blur：阴影的模糊程度
- spread：阴影的扩散范围
- color：阴影的颜色
- inset：向内阴影
演示代码
<!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>.One{height: 200px;width: 200px;border-radius: 50%;background-color: aqua;padding: 20px;display: inline-block;box-shadow: 20px 10px 3px -1px red;}</style>
</head>
<body><div class="One"></div>
</body>
</html>演示结果
内部阴影演示代码
<!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>.One{height: 200px;width: 200px;border-radius: 50%;background-color: aqua;padding: 20px;display: inline-block;box-shadow: 20px 10px 10px -10px red inset;}</style>
</head>
<body><div class="One"></div>
</body>
</html>演示结果
