CSS——（2）长度、颜色、文档流-优快云博客

本文链接：https://blog.youkuaiyun.com/ileopard/article/details/108044552

本文深入探讨了CSS中的长度单位和颜色表示方法，包括像素、百分比、em、rem等长度单位的应用，以及RGB、RGBA、十六进制、HSL和HSLA等颜色单位的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、长度单位

<body>
     <div class="box1">
         <div class="box2"></div>
     </div>
     <div class="box3"></div>
     <div class="box4"></div>
</body>

/* 
    长度单位
        - 像素
            - 屏幕（显示器）实际上是由一个一个的小点点构成的
            - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
            - 所以同样的200px在不同的设备下显示效果不同
        - 百分比
            - 可以将其属性值设置为相对于其父元素属性的百分比
            - 设置百分比可以使子元素随父元素的改变而改变
        - em
            - em是相对于元素的字体大小来计算的
            - 1em = 1font-size
            - em 会跟随字体的大小而改变
        - rem
            - rem是相对于根元素(html)的字体大小来计算
*/
.box1{
    width: 200px;
    height: 200px;
    background-color: orange;
}

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

.box3{
    width: 10em;
    height: 10em;
    background-color: springgreen;
    font-size: 20px;
}

.box4{
    width: 10rem;
    height: 10rem;
    background-color: yellowgreen;
    /* font-size: 20px; 此时的字体大小不会影响到box4的大小*/
}
html{
    font-size: 20px;
}

二、颜色

/* 
    颜色单位
        - 在css中可以直接使用颜色名来设置各种颜色
            比如：red、yellow...这种方式很不方便
        - RGB值
            - RGB通过三种颜色的不同浓度来调配出不同的颜色
            - RGB：red green blue
            - 每一种颜色的范围在0-255（0% ~ 100%）之间
            - 语法：RGB(R,G,B)
        - RGBA
            - 在RGB的基础上增加了一个A表示不透明度
            - 需要四个值，前三个和RGB一样，第四个表示不透明度
                1 表示完全不透明  0 表示完全透明  .5 表示半透明
        - 十六进制的RGB值
            - 语法：#RGB
            - 颜色浓度通过 00-ff
            - 如果颜色两位两位重复可以进行简写
                如：#aabbcc -> #abc
        - HSL值 HSLA值
            H 色相（0 - 360）
            S 饱和度（0% - 100%）  
            L 亮度（0% - 100%）

        
*/
.box1{
    width: 200px;
    height: 200px;
    background-color: RGB(150, 150, 150);   
    background-color: RGBA(150, 150, 150, 1);   
    background-color: #ff0000;   
}

三、文档流

/* 
    文档流
        - 网页是一个多层的结构
        - 通过css可以分别为每一层来设置样式
        - 作为用户只能看到最顶上一层
        - 这些层中，最底下一层称为文档流，文档流是网页的基础
            我们所创建的元素默认都是在文档流中进行排列
        - 对于元素主要有两个状态
            - 在文档流
            - 不在文档流（脱离文档流）

        元素在文档流中的特点
            - 块元素
                - 块元素会在页面中独占一行（自上而下垂直排列）
                - 默认宽度是父元素的全部（会把父元素撑满）
                - 默认高度：被内容撑开
            - 行内元素
                - 行内元素不会独占页面的一行，只占自身的大小
                - 行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素
                    则元素会换到第二行继续自左向右水平排列（书写习惯一致）
                - 行内元素的默认宽度和高度都是被内容撑开
*/