前端之CSS边框以及其他常用样式

一、概述

 

接下来我们来研究一下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

 text-align: center;

2.6、垂直居中

作用：能把标签内的字体，进行水平居中。使用方法：line-height：标签高度值。这个值是根据你的div值有多高，给你居中一下。

 

2.7、字体加粗

作用：给你标签内的字体加粗。使用方式：font-weight：bold

三、总结

 

3.1、边框

1. 宽度、样式、颜色  (border:4px dotted red;)
2. border-top,border-left,border-right，border-bottom,分别是边框顶部，边框左边，边框右边，边框底部

3.2、其他样式

1. height：高度  像素，百分比
2. width：宽度  像素，百分比
3. text-align:center   水平方向居中
4. line-height  垂直方向居中，这个需要根据标签的高度
5. color  字体颜色
6. font-size 字体大小
7. font-weight 字体加粗