day14-CSS边框及其他常用样式

一、CSS边框及其他常用样式

2.1、CSS边框

作用：设置标签周围的边框的，具体使用方法：border：宽度 样式 颜色，一般情况下样式使用 solid实体的，和dotted虚线的

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .c1{
 8             border: 2px solid red;
 9     }
10     </style>
11 
12 </head>
13 <body>
14     <div class="c1">
15         我要个框框
16     </div>
17 
18 </body>
19 </html>

注：这边不仅有border，还有 border-top,border-left,border-right，border-bottom,分别是边框顶部，边框左边，边框右边，边框底部

2.2、高度

作用：设置标签的高度的，使用方法：height： 高度大小 ，可以是具体的数字大小比如说：20px，也可以是百分比：50%，但是这个是高度是无限大的，所以只能在某个边框里面再设置百分比，不然就没有意义了。

2.3、宽度

作用：设置标签的宽度，使用方法：width：宽度大小，这个跟上面的height是一样的，可以是具体大小：50px，也可以是整个屏幕宽度的百分比：50%

2.4、字体大小

作用：设置标签内的字体大小，使用方法：font-size:字体大小，示例：font-size:20px

2.5、水平居中

作用：能把标签内的字体，进行水平居中。使用方法：text-align:center

2.6、垂直居中

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

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6
<style>
    .c1{
        /*加边框*/
        border: 2px solid red; 
        /*设置高度*/
        height: 28px;
        /*设置宽度 可以是 60% */
        width: 400px;
        /*设置字体大小*/
        font-size: 20px;
        /*设置水平居中*/
        text-align: center;
        /*设置垂直居中 配合高度使用*/
        line-height: 28px;
        /*字体加粗*/
        font-weight: bolder;
}
</style>
17 18 </head> 19 <body> 20 <div class="c1"> 21  我要个框框 22 </div> 23 24 </body> 25 </html>

 

posted @ 2018-05-17 13:30  东郭仔  阅读(98)  评论(0)    收藏  举报