目录
一、边框粗细
二、边框样式
1、border-style:
2、设置多边样式
三、边距
一、边框粗细
1、border-width: thick 粗边框 系统设置为5px
medium 中等粗细 系统设置为5px
thin 最细的边框 系统设置为5px
2、设置单独一边的粗细
border-top-width 设置上边框的粗细
border-right-width 设置右边框的粗细
border-bottom-width 设置下边框的粗细
border-left-width 设置左边框的粗细
3、设置多边边框的粗细
border-width: 10px 20px; 设置边框 上下为10px 左右为20px
10px 20px 50px;
设置边框的粗细为 上边框10px 左右边框粗细为20px 下边框粗细为30px
10px 15px 5px 20px;
顺时针的顺序 设置边框的粗细 上边框为10px 右边框为15px 下边框为5px 左边框为20px
★单独设置颜色或者边框的粗细的时候 必须要把border-style设置好
二、边框样式
1、border-style:none 没有样式
hidden 隐藏边框,不显示
dotted 边框样式为点状
dashed 边框样式为虚线状
solid 边框样式为实线
double 边框样式为双实线
2、设置多边样式
①border-style:dotted solid
设置两个值 ,第一个值表示上下的样式,第二个值表示左右的样式
dotted solid double
设置三个值 ,第一个值表示上的样式,第二个值表示左右的样式 第三个值表示下的样式
dotted solid double dashed
按顺时针, 按照上右下左的顺序
★border也是一个复合属性,同时设置边框的颜色、粗细和样式
border-style必须加,其他都有默认值,而border-style没有
颜色的默认是黑色 粗细的默认值是3px
三、边距
1、margin 只设置一个值,上右下左都会设置同样的外边距
2、margin 设置两个值,第一个值表示上下边距,第二个值表示左右边距
3、margin 设置两个值,第一个值表示上边距,第二个值表示左右边距,第三个值表示下边距
4、margin-top: 单独设置上边距
margin-left : 单独设置左边距
margin-bottom: 单独设置下边距
margin-right: 单独设置右边距
因为元素是默认靠着左上角 , 所以设置margin-left有效果
要想设置margin-right有效果 ,需要设置浮动为float:right;
* 去除所有元素的内外边距
*{margin:0;padding:0;}
① 设置上边距
② 设置左边距
② 设置下边距
③ 设置右边距