一。盒子模型
盒子模型是由 margin + border + padding + 网页元素（content）组成的。
二。边框的颜色（border也是一个复合属性）
边框的粗细 border-width: 边框的颜色 border-color: 边框的类型 solid 实线 border-style:
①。border-top-color(设置边框顶部颜色）
②。 border-right-color（设置边框右部颜色）
③。border-bottom-color（设置边框底部颜色）
④。border-left-color（设置边框左边颜色）
⑤。border-color:red yellow（第一个值red表示上下边框的颜色 第二个值表示左右边框的颜色）
⑥。border-color:red green blue（第一个值表示上边框的颜色 第二个值表示左右边框的颜色 第三个值表示下边框的颜色）
⑦。border-color:red green blue yellow（按照顺时针的顺序 第一个值表示上边框的颜色 第二个值表示右边框的颜色 第三个值表示下边框的颜色 第四个值表示左边框的颜色）
三。边框的粗细
①。border-style:solid（边框的类型 solid 实线）
border-width: thick;粗的边框 系统会设置为5像素
border-width: medium; medium是中等的粗细 系统会默认设置为3像素
border-width: thin; thin是最细的 系统会默认设置为1像素
②。border-width: 10px 20px（设置边框 上下为10px 左右为20px）
③。border-width: 10px 20px 50px（设置边框的粗细为 上边框10px 左右边框粗细为20px 下边框粗细为30px）
④。border-width:red green blue yellow(顺时针的顺序 设置边框的粗细 上边框 右边框 下边框 左边框)
🔺设置边框的粗细 可以改变盒子的看上去的宽高
四。边框的样式
①。border-style:none（边框没有任何样式 也就显示不了） border-style:hidden（隐藏边框的样式 也显示不了）
②。border-style:dotted（边框的样式变成点状）
③。border-style:dashed（边框的样式变成虚线状）
④。border-style:solid（边框的样式变成实线）
⑤。border-style: double（边框变成两条实线）
⑥。border-style: dotted dashed（两个值 表示上下是点状 左右是线状）
⑦。border-style: dotted dashed double（上边框为点状 左右为虚线 下边框是双实线）
同时设置边框的颜色、粗细和样式
border-style必须加 因为 其他不加有默认值 而border-style没有 颜色的默认是黑色 粗细的默认值是3px border:red solid 5px;
五。外边距
①。*{margin:0;padding:0;}（去除所有元素的内外边距）
②。margin:10px（margin只设置一个值 上右下左都会设置10px的外边距）
③。margin:10px 50px（margin设置两个值 是上下外边距都是10px 左右外边距都是50px）
④。margin:10px 30px 20px（设置三个值表示 上边距是10px 左右是30px 下边距是20px）
⑤。因为元素是默认靠着左上角 所以设置margin-left有效果 那么为什么设置margin-right没效果过呢？ 需要设置浮动为float:right;
