一、盒子
盒子的模型的组成：边框（border），内容，内边距（padding），外边距（margin）
1、边框
（1）边框的组成：
边框宽度：border-width
边框的颜色： border-color
边框的样式： border-style
（2）盒子的样式：可以单独设置每一条边线的样式
border-style :solid； 实线 常用值
border-top-style:dotted； 点线
border-bottom-style:dashed； 虚线
border-style :none； 没有样式
边框可能的值
（3）同时设置四个边的颜色 样式 和宽
border-width: 5px; 设置盒子边框粗细为5px
border-color: red; 盒子边框颜色为红色
border-style: solid; 盒子边框线为实线
简写（没有顺序）：
border：1px（粗细） solid（实线） pink（颜色）；
（4） 单独设置每一条边的颜色
border-top-color：red； 设置盒子顶部颜色
border-right-color:pink； 设置盒子右边颜色
border-bottom-color： bule； 设置盒子底部颜色
border-left-color:green； 设置盒子左边颜色
简写（顺序为 上 右 下 左）：
border-color：red pink bule green；
二、内边距（padding）
1、内边距：边框与内容之间的距离
html中的代码
css样式
效果图
设置内边距需先设置盒子宽高
2、分别单独设置盒子每条边的的内边框：
padding-left：____px
padding-right：____px
padding-top：____px
padding-bottom：____px
简写（顺序：上右下左）：
padding：____px ____px ____px ____px；
三、外边距（margin）
1、 外边距：盒子距离四周的边距
2、分别单独设置盒子每条边的的外边框
margin-left：____px
margin-right：____px
margin-top：____px
margin-bottom：____px
简写（顺序：上右下左）：
margin：____px ____px ____px ____px；
3、通过调整margin可以调整盒子的位置，使盒子水平居中
margin ：0 auto；
0 代表上边距为0
auto 代表左右自动适应
4、如果相邻的兄弟元素同时设置外边距，生效的是最大的那个外边距 而不是外边距的和
四、盒子模型尺寸
1、box-sizing：content-box;
border-box：设定以后代表盒子的所有尺寸包含在我设置的宽高里
2、盒子模型的尺寸组成（默认尺寸）
宽：padding-left + border-left+盒子奔上的宽度 + padding-right + border-right
高：padding-top +border-top + 盒子本身的高度 + padding-bottom + border-bottom
五、清除默认样式
1、使用通配符
通配符清除默认样式
解析：使用通配符清除
1、margin外面距为0
2、padding内边距为0
3、list-style列表样式为没有
2、 清除a标签的样式
text-decoration: none;
文本样式为没有