css第十二课：盒子模型

学盒子模型的目的是：让盒子与盒子之间有一段距离，页面布局更好看，

看下面这个百度上的文本，最外面是背景盒子，盒子里面有内容，内容和盒子之间有空隙，我们接下来学习认识盒子模型，并学会怎么去设置这个空隙

盒子模型特指的就是我们的div标签，

官方介绍：

通俗的解释：

我们拿一个快递的案例来解释这个盒子模型

 如图所示：我们最外面这个黑色的边框代表一个快递，快递里面放着一个电脑，蓝色部分代表电脑，这个电脑和快递盒之间有泡沫保护，快递盒也有一定的厚度，这时候电脑就代表盒子的内容，

这个泡沫就是内边距，也就是从内容到快递盒的距离，快递箱的厚度就是边框，外边距是指一个快递距离另一个快递的之间的距离

1.内边距的介绍

代码演示：设置内边距

 结果：

百度后台盒子显示：

 刚开始设置的div的宽和高是400*400指的是电脑的宽和高，内边距加上以后，整个盒子的大小又变大了。而且我们可以通过结果发现我们的背景色是可以蔓延到内边距的，刚开始我们只设置了400*400大小的背景色，但是发现没有当设置了内边距，内边距部分也变成了黄绿色，amazing😀😎

padding的属性值可以设置1-4个，

padding：30px；设置一个值代表上下左右内边距都是30px；

padding：20px 30px；设置两个值代表上下为20px，左右为30px；

paddi