前端入门part13边框和边距
程序员文章站
2022-03-25 11:41:11
边框边框就是环绕在标签宽度和高度周围的线条;①同时设置四条边的边框border:边框的宽度 边框的样式 边框的颜色② 分别设置边框border-top: 边框的宽度 边框的样式 边框的颜色border-right: 边框的宽度 边框的样式 边框的颜色border-left: 边框的宽度 边框的样式 边框的颜色border-bottom: 边框的宽度 边框的样式 边框的颜色连写格式下的注意点:颜色可以省略,默认是黑色;样式不可以省略,看不到边框啦;宽度可以省略,可以看得...
边框
- 边框就是环绕在标签宽度和高度周围的线条;
- ①同时设置四条边的边框
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:;
等
本文地址:https://blog.csdn.net/lyp3171790866/article/details/112531822