盒子模型由内容区、边框和边距组成；
1.内容区
width
height
2.边框（border）
border不仅可以给盒子模型加，还可以给html所有标签加边框属性；
①上边框
border-top-color:red; --- 上边框的颜色；
border-top-style:solid; --- 上边框的线型，solid（实线），dashed（虚线），dotted（点状线）；
border-top-2px; --- 上边框线的宽度；
上边框线简写：border -top:2px solid blue; --- 表示 上边框线为2px宽的蓝色实线；
②右边框，border-right
③下边框，border-bottom
④左边框,border-left
注意：四条边框线属性一致的写法：border:2px solid blue;
3.边距
边距分为内边距和外边距；
①内边距（padding）
内边距指内容与边框之间的距离；
padding-top:10px; --- 内容与上边框之间的距离；
padding-right:10px; --- 内容与右边框之间的距离；
padding-bottom:10px; --- 内容与下边框之间的距离；
padding-left:10px; --- 内容与左边框之间的距离；
边距简写：
padding:10px 10px 10px 10px; --- 设置内容距离上右下左边框的距离；
padding:10px 20px 30px; --- 内容距离上边框10px，距左右边框20px，距下边框30px；
padding:10px; --- 设置内容距离上右下左边框10px；
②外边距（margin）
外边距是指盒子与盒子之间的距离，也可以说是边框往外的距离；
margin-top:10px; --- 上边框往外的距离；
margin-left:10px; --- 右边框往外的距离；
margin-bottom:10px; --- 下边框往外的距离；
margin-right:10px; --- 左边框往外的距离；
外边距简写：
margin:10px 10px 10px 10px; --- 设置上右下左边框往外的距离；
margin:10px 20px 30px; --- 上边框往外10px，左右边框往外20px，下边框往外30px；
margin:10px; --- 设置上右下左边框往外10px；
注意：
①如果是正常的文档流，且两个盒子的位置是上下的结构，那么它们之间的margin-top和margin-bottom是由属性值最大的那个决定的，例：
<div style="margin-bottom:40px"></div> <div style="margin-top:10px"></div>
两个盒子的上下外边距是40px；
②如果两个盒子的位置是左右结构，那么它们之间的外边距是margin-right和margin-left的和值；
③如果设置了浮动，就不属于正常的文档流；
4.内容溢出
内容溢出是指，当盒子里的内容超出了盒子的宽和高，该如何显示；
overflow:hidden; --- 盒子的内容溢出不显示；
overflow:auto; --- 如果盒子的内容溢出，就会在盒子里出现滚动条；
overflow:scroll; --- 无论盒子是否能装的下内容，都会出现滚动条；