一、概述
接下来我们来研究一下css的边框,以及其他的常用的样式
二、css边框以及其他常用样式
2.1、css边框
作用:设置标签周围的边框的,具体使用方法:board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的
注:这边不仅有border,还有 border-top,border-left,border-right,border-bottom,分别是边框顶部,边框左边,边框右边,边框底部
2.2、高度
作用:设置标签的高度的,使用方法:height: 高度大小 ,可以是具体的数字大小比如说:20px,也可以是百分比:50%,但是这个是高度是无限大的,所以只能在某个边框里面再设置百分比,不然就没有意义了。
2.3、宽度
作用:设置标签的宽度,使用方法:width:宽度大小,这个跟上面的height是一样的,可以是具体大小:50px,也可以是整个屏幕宽度的百分比:50%
注意了:虽然div有了高度和宽度,但是它仍然是一个块级标签。
2.4、字体大小
作用:设置标签内的字体大小,使用方法:font-size:字体大小,示例:font-size:20px
2.5、水平居中
作用:能把标签内的字体,进行水平居中。使用方法:text-align:center
效果图:
2.6、垂直居中
作用:能把标签内的字体,进行水平居中。使用方法:line-height:标签高度值。这个值是根据你的div值有多高,给你居中一下。
效果图:
2.7、字体加粗
作用:给你标签内的字体加粗。使用方式:font-weight:bold
效果图:
三、总结
3.1、边框
- 宽度、样式、颜色 (border:4px dotted red;)
- border-top,border-left,border-right,border-bottom,分别是边框顶部,边框左边,边框右边,边框底部
3.2、其他样式
- height:高度 像素,百分比
- width:宽度 像素,百分比
- text-align:center 水平方向居中
- line-height 垂直方向居中,这个需要根据标签的高度
- color 字体颜色
- font-size 字体大小
- font-weight 字体加粗