盒子模型有四个元素组成
内容区（content） 边框（border） 内边距（padding） 外边距（margin）
而影响盒子大小的元素：内容区，边框，内边距 。外边距不影响盒子的大小
1.内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
height 设置内容区的高度
2.边框（border）：边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 分别是颜色，大小，样式
border-color: ; 设置边框的颜色
例如设置div的边框颜色为红色
效果如图所示：
（1）、有默认值，默认颜色是黑色
（2）、可以写多个颜色 以空格隔开
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
也可以设置边框某一边的颜色
border-xxx-color xxx指的是它的某一边，可选值有top right bottom left
border-width: ; 设置边框的大小
（1）、默认值 默认值大概1-3px
（2）、也可以跟多个值 以空格隔开
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
也可以设置边框某一边的大小
border-xxx-width xxx指的是它的某一边，可选值有top right bottom left
border-style: ; 设置边框的样式
(1)、默认值 none
（2）、solid 实线
dashed 虚线
dotted 点状虚线
double 双线
border简写：颜色 大小 样式 顺序随便排列 没有固定顺序
一般的，我们用到的简写形式最多
例如将div盒子的边框大小设为2px,颜色为red，线条样式为虚线
div{
width: 200px;
height: 200px;
border: 2px red dashed;
}效果如图所示：
3.内边距（padding）：内边距是内容区到边框的距离
其实内边距的形式和边框的形式属于异曲同工
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
但是一般情况下我i们还是喜欢简写
padding：
它的后面也可以跟多个值，规则和边框 border的规则一样，大家可以看上面有详细的介绍。
例如 我们在后面写4个值
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px 20px 30px 40px;
}
.box2{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>效果如图所示：
padding的值的顺序是上 右 下 左
如果是三个值的话，那他的顺序是上 左右 下（左右都用第二个值）
两个值的话顺序是 上下 左右
一个值就是四边都是
4.margin（外边距）
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。
margin 属性接受任何长度单位、百分数值甚至负值。
margin 属性可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
margin跟padding一样，也有简写方法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中，我们往往使用的是margin的这种高效简洁写法来编程。
例如我们想要盒子的左边距为10px
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px 20px 30px 40px;
margin-left: 10px;
}效果如图所示：
很明显的看到左边边距变成了10px。
其他写法和padding异曲同工哦！