CSS - 值和单位

最新推荐文章于 2025-04-20 14:46:35 发布

原创最新推荐文章于 2025-04-20 14:46:35 发布 · 922 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS - 值和单位 #CSS 单位

CSS 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了CSS中的数值、单位和颜色的基础知识。涵盖了数字类型、百分数的应用场景、颜色的表示方式，以及长度单位的种类和使用方法。

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

CSS的所有工作中，基础都是单位。本章介绍数值，单位，颜色的相关知识。

数字

cssz中有两类数字：整数和实数。这些数字主要作为其他值类型的基础。

html {
    width: 2000px;
}

百分数

百分数值是一个计算得出的实数。其后跟一个百分比。百分数值几乎总是相对于另一个值。可能是同一个元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。

(1) 参照父元素宽度的元素

margin, padding, text-indent, width, max-width, min-width

(2) 参照父元素高度的元素

height, max-height, min-height;

(3) 参照父元素属性

line-height, font-size, background-size

position: relative (left, top, right, bottom)

(4) 参照自身其他属性的值

vertical-align: 参照line-height的值

background-position：参照自身的长宽(默认内容长宽加上padding)

(5) 参照最近的定位元素

position: absolute (left, top, right, bottom)

(6) 参照浏览器窗口进行定位。

position: fixed (left, top, right, bottom)

颜色

命名颜色

用颜色关键字来指定颜色。详情访问（http://www.css88.com/book/css/appendix/color-keywords.htm）。

函数式RGB

以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。
超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析为rgb(255,0,0)
正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF
RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。

十六进制RGB
将三个介于00-FF的十六进制数连起来，设置一种颜色。语法为#RRGGBB。详情访问文章。

长度单位

长度单位包括包括：相对单位和绝对单位。
绝对长度单位包括有： cm, mm, q, in, pt, pc, px
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin

绝对长度单位

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

cm 厘米（Centimeters）
1cm = 10mm = 96px/2.54 = 37.8px

mm 毫米（Millimeters）
1mm = 0.1cm = 3.78px

q 1/4毫米 (quarter-millimeters)
1q = 1/4mm = 0.945px

in 英寸 (inches)
1in = 2.54cm = 96px

pt 点 (points)
1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

pc 派卡 (picas)
1pc = 12pt = 1/6in = 1/6*96px = 16px

px 像素 (pixels)
在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。

相对长度单位

em 相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            body { 
                font-size: 14px; 
            }

            h1 { 
                font-size: 16px; 
            }

            span { 
                font-size: 2em; 
            }
        </style>
    </head>  
    <body>  
        <h1>假定当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍：</h1>
        <span>2em大小的文字</span>
    </body>  
</html>

ex 相对于字符“x”的高度。通常为字体高度的一半

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

ch 被定义为数字0的宽度

当无法确定数字0宽度时，取em值的一半作为ch值兼容性: IE8-不支持数字“0”的宽度

rem 相对于根元素html的font-size属性的计算值

视口长度值
视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。也就是当对于网页的可视窗口的大小

vh 布局视口高度的 1/100
vw 布局视口宽度的 1/100
vmin 布局视口高度和宽度之间的最小值的 1/100
vmax 布局视口高度和宽度之间的最大值的 1/100

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style>
            html {
                width: 2000px;
            }

            body {
                padding: 0px;
                margin: 0px;
                width: 1200px;
            }

            .box{
                /* 实现与屏幕等高的效果 */
                width: 100vw;
                height: 100vh;
                background-color: lightblue;
            }    
        </style>
    </head>  
    <body>  
        <div class="box"></div>
    </body>  
</html>

视口的位置就是当前浏览器窗口的大小，如图，尽管当前的html的宽度为2000px，但是视口大小的宽度为456px，所以我们的div.box的宽度为100vw还是456px。