【单位、颜色学习-尚硅谷源代码】

最新推荐文章于 2024-10-04 00:46:18 发布

chenshuangzhi

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量43

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/chenshuangzhi/article/details/126091260

版权

文章目录

一、单位
二、颜色

一、单位

长度单位：

        像素

                -屏幕（显示器）实际上是由一个一个的小点点构成的

                -不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

                -所以同样的200px在不同的设备下显示效果不一样

        百分比

                -也可以将属性值设置为相对于其父元素属性的百分比

                -设置百分比可以使子元素跟随父元素的改变而改变

        em

                -em是相对于元素的字体大小来计算的

                -em会根据字体大小的变化而改变

                1em= 1font-size=16px (默认情况下是1个字体是16像素，但是你可以自己设置大小font-size,那么em也就跟着你的改动一起发生变化)

         rem

                -rem是相对于根元素的字体大小来计算（也就是根据html的字体来计算）

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单位</title>

    <style>
    
    html{
            font-size: 20px;
        }

        .box1{
            width: 400px;
            height: 400px;
            background-color: orange;
        }

        /* .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        } */

        /* 这里宽高都是160px */
        .box2{
            font-size: 16px;
            width: 10em;
            height: 10em;
            background-color: brown;
            
        }
        /* 因为设置html字体大小是20px,所有这里宽高的大小是20*20=400px */
        .box3{
            width: 20rem;
            height: 20rem;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

二、颜色

颜色单位:

        在css中可以直接使用颜色名来设置各种颜色

                比如: red、orange、yellow、green......

                但是在css中直接使用颜色名是非常的不方便

         RGB值:

                -RGB通过三种颜色的不同浓度来调配出不同的颜色

                -每一种颜色的范围在0~255(0%~100%)

                -语法:RGB(红色，绿色，蓝色)

        RGBA：

                -就是在rgb的基础上添加一个a表示不透明度

                -需要四个值，前三个和rgb一样，第四个表示不透明度

                1表示完全不透明 0表示完全透明 .5半透明

        十六进制的RGB值:

                -语法:#红色绿色蓝色

                -颜色浓度通过00-ff

                -如果颜色两位两位重复可以进行简写

        HSL值 HSLA值

                H 色相（0-360）

                S 饱和度颜色的浓度 0%-100%

                L 亮度颜色的亮度 0%-100%

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            background-color: rgb(100, 100, 155);
            background-color: rgb(0, 0, 0);
            background-color: rgba(155, 100, 155, .4);
            background-color: #ffff00;
            background-color: #ff0;/*如果颜色两位重复可以进行简写*/
            background-color: #aabbcd;/*像这样有两两不完全一样的就不能简写*/
            background-color: hsl(100, 10%, 10%);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习