盒子模型是由 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是左边