前端入门part13边框和边距

边框

• 边框就是环绕在标签宽度和高度周围的线条；
• ①同时设置四条边的边框
• border：边框的宽度 边框的样式 边框的颜色
• ② 分别设置边框
• border-top: 边框的宽度 边框的样式 边框的颜色
• border-right: 边框的宽度 边框的样式 边框的颜色
• border-left: 边框的宽度 边框的样式 边框的颜色
• border-bottom: 边框的宽度 边框的样式 边框的颜色

连写格式下的注意点：

• 颜色可以省略，默认是黑色；

• 样式不可以省略，看不到边框啦；

• 宽度可以省略，可以看得到；

• ③同时设置四条边同一属性

• border-width：上 右 下 左

• border-style：上 右 下 左

• border-color：上 右 下 左

注意：

• ① 属性赋值是严格按照顺序来的；
• ②当赋值数小于4个该怎么赋值？
• 如：上 右 下 左>上 右 下；左边的取值和右边的一样；
• 如：上 右 下 左>上 右 ；左边的取值和右边的一样；下面和上面一样
• 如：上 右 下 左>上 ；右下左的取值和上边一样；

内边距属性

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

格式连写

• padding: 上 右 下 左;

格式非连写

• padding-bottom: ; padding-top: ;
• padding-left: ; padding-right: ;

注意

• ① 设置内边距后，标签占有的宽度和高度也会发生变化；
• ②设置内边距后，内边距也会有背景颜色；

外边距属性

• 单元格和单元格之间的距离
• 注意

连写格式

• margin: 上 右 下 左

非连写格式

• margin-top:;等