15.画盒子,文字修饰属性,行高

最新推荐文章于 2024-10-17 21:06:48 发布

Little_Green1

最新推荐文章于 2024-10-17 21:06:48 发布

阅读量562

点赞数 17

分类专栏：前端文章标签：前端 css html css3

本文链接：https://blog.csdn.net/Little_Green1/article/details/141194341

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一.画盒子

顾名思义就是在浏览器插入一个四方形,宽高随意,那这个要如何操作呢,记得之前学过的无语义标签不,我们可以用<div>标签来画盒子,具体如何操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .orange {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="red">div1</div>
    <div class="orange">div2</div>
</body>
</html>

其实本质就是,div标签独占一行,有自己的宽高:,我们所做的,就是把这个标签的宽高改变,然后加上背景颜色,这样就是一个盒子了涉及到的属性为width,height,background-color,宽高背景色.width是盒子的宽,单位是px,height是盒子的高单位也是px,background-color是背景色,直接写颜色名字就好了.

二.文字修饰属性

通过CSS,我们也可以对文字进行修饰,有font-size,font-weight,font-style.

1.font-size就是文字的大小,浏览器默认文字大小是16px,我们可以通过font-size来改变大小,记得单位用px.

2.font-weight是字体粗细,有两种表示方法,一种是数字一种是关键字,用数字为400是正常文字粗细,700就是文字加粗,关键字这是normal跟bold.一般都是用数字,在这里不用加单位px.

3.font-style是字体样式,用来设置文字是否倾斜,属性值有normal就是不倾斜,还有italic就是倾斜,可以用来清除文字默认的倾斜效果.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 谷歌浏览器字体大小默认16px */
        .size {
            font-size: 30px;
        }

        .h3 {
            font-weight: 400;
        }

        .div {
            font-weight: 700;
        }

        .em {
            font-style: normal;
        }

        .div1 {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="size">测试字体大小</p>
    <br><br>
    <h3 class="h3">h3 标题</h3>

    <div class="div">div标签</div>
    <br><br>

    <em class="em">em 标签</em>
    <div class="div1">div 标签</div>
</body>
</html>

三.行高

行高用来设置多行文本的间距,属性名是line-height属性值可以有两种写法,直接数字加px,就正常设置,或者直接写数字,就是当前font-size属性值的倍数,比如你现在字体大小30px,你行高写2,那你的行高就相当于60px.如果要测算行高,我们可以计算第一行文字的顶部,到第二行文字的顶部,这就是这个文段的行高了,还有一个小技巧,文字垂直居中,就是把行高属性值等于盒子高度属性值,这样就可以实现垂直居中效果了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 20px;
            /* line-height: 30px; */
            /* 行高值是数字,表示是当前标签字体大小的倍数 */
            line-height: 2;
        }
        /* 行高-垂直居中 */
        div {
            height: 100px;
            background-color: skyblue;

            line-height: 100px;
        }
    </style>
</head>
<body>
    <p>你发艾欧唯分内外哦安慰法人挖法分为一般一个冰与火虎流弊uv禹vviuvui预计宾语uui那句i呢i干部iv禹iv怒iiv粗盐提纯一天陈婷婷一次粗盐提纯</p>
    <div>文字</div>
</body>
</html>

如有错误,欢迎指正