边框和边距属性

1. 边框属性

   1.什么边框?

   边框就是环绕在标签宽度和高度周围的线条

2.边框属性的格式

2.1连写(同时设置四条边的边框)

border: 边框的宽度 边框的样式 边框的颜色;

快捷键:

bd+ border: 1px solid #000;

注意点:

1.连写格式中颜色属性可以省略, 省略之后默认就是黑色

2.连写格式中样式不能省略, 省略之后就看不到边框了

3.连写格式中宽度可以省略, 省略之后还是可以看到边框

2.2连写(分别设置四条边的边框)

border-top: 边框的宽度 边框的样式 边框的颜色;

border-right: 边框的宽度 边框的样式 边框的颜色;

border-bottom: 边框的宽度 边框的样式 边框的颜色;

border-left: 边框的宽度 边框的样式 边框的颜色;

快捷键:

bt+ border-top: 1px solid #000;

br+

bb+

bl+

2.3连写(分别设置四条边的边框)

border-width: 上 右 下 左;

border-style: 上 右 下 左;

border-color: 上 右 下 左;

注意点:

1.这三个属性的取值是按照顺时针来赋值, 也就是按照上右下左来赋值, 而不是按照日常生活中的上下左右

2.这三个属性的取值省略时的规律

2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 > 上 > 右下左边取值和上边一样

3.非连写(方向+要素)

border-left-width: 20px;

border-left-style: double;

border-left-color: pink;

1. 内边距属性

   1.什么是内边距?

   边框和内容之间的距离就是内边距

2.格式

2.1非连写

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

2.2连写

padding: 上 右 下 左;

2.这三个属性的取值省略时的规律

2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 > 上 > 右下左边取值和上边一样

注意点:

1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化

2.给标签设置内边距之后, 内边距也会有背景颜色

1. 外边距属性

   1.什么是外边距?

   标签和标签之间的距离就是外边距

2.格式

2.1非连写

margin-top: ;

margin-right: ;

margin-bottom: ;

margin-left: ;

2.2连写

margin: 上 右 下 左;

2.这三个属性的取值省略时的规律

2.1上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

2.2上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

2.3上 右 下 左 > 上 > 右下左边取值和上边一样