盒子模型

盒子模型是由 margin + border + padding + 网页元素（content）组成的

1.边框的颜色

上边框的颜色：border-top-color

右边框的颜色 ：border-right-color:red

下边框的颜色：border-bottom-color

左边框的颜色：border-left-color

border-left-color: red blue

第一个red表示上下边框的颜色 第二个表示左右边框的颜色

border-color:red yellow green

第一个值表示上边框的颜色 第二个值表示左右边框的颜色 第三个值表示下边框的颜色

border-color:red green blue;

按照顺时针的顺序 第一个值表示上边框的颜色 第二个值表示右边框的颜色第三个值表示下边框的颜色 第四个值表示左边框的颜色

2.边框的粗细和样式

边框的类型 solid 实线

border-style:solid border-color:red;

设置上边框的粗细 border-top-width

设置右边框的粗细 border-right-width

设置下边框的粗细 border-bottom-width

设置左边框的粗细 border-left-width

设置边框 border-width: 10px 20px 上下为10px 左右为20px

设置边框的粗细为 上边框10px 左右边框粗细为20px 下边框粗细为30px border-width: 10px 20px 50px

border-width: 10px 30px 50px 70px;

边框没有任何样式 也就显示不了

border-style:none

边框的样式变成点状 border-style:dotted

边框的样式变成虚线状border-style:dashedb

边框的样式变成实线order-styble:solid

3.内外边距

去除所有元素的内外边距*{margin:0;padding:0;}

margin只设置一个值 上右下左都会设置10px的外边距 margin:10px

margin设置两个值 是上下外边距都是10px 左右外边距都是50px：margin:10px 50px;、

设置三个值表示 上边距是10px 左右是30px 下边距是20px ：margin:10px 30px 20px;

单独设置：margin-top是上 margin-right是右 margin-bottom是下 margin-left是左边