5.像素和百分比、em和rem、RGB和RGBA

原创已于 2023-10-13 09:52:45 修改 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

于 2023-10-12 16:45:11 首次发布

web前端同时被 2 个专栏收录

18 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

本文介绍了CSS布局中如何使用百分比使子元素适应父元素，以及em和rem单位的运用。同时详细讲解了颜色单位如RGB、RGBA、十六进制和HSL(HSLA)的使用方法。

在CSS的布局中应用百分比可以使子元素随着父元素的大小等比例变化。

<style>

        html{
            font-size: 30px;
        }

        .box1{

            /* 
                长度单位：
                    像素
                        - 屏幕（显示器）实际上是由一个一个的小点点构成的
                        - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
                        - 所以同样的200px在不同的设备下显示效果不一样

                    百分比
                        - 也可以将属性值设置为相对于其父元素属性的百分比
                        - 设置百分比可以使子元素跟随父元素的改变而改变

                    em
                        - em是相对于元素的字体大小来计算的
                        - 1em = 1font-size
                        - em会根据字体大小的改变而改变

                    rem
                        - rem是相对于根元素的字体大小来计算
                    
                    em和rem更多用在移动端

             */
            width:300px;
            height: 100px;
            background-color: orange;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color:aqua; 
        }

        .box3{
            /* width: 10em;
            height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
    </style>

颜色单位：

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

比如：red、orange、yellow、blue、green ... ...

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

RGB值：

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

- R red，G green ，B blue

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

- 语法：RGB(红色,绿色,蓝色)

RGBA:

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

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