CSS长度单位和颜色设置

最新推荐文章于 2023-03-10 22:19:58 发布

喜欢你笑⠀

最新推荐文章于 2023-03-10 22:19:58 发布

阅读量707

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/xh7531/article/details/122524904

版权

一、CSS长度单位

CSS支持多种长度单位，分为绝对长度单位和相对长度单位。

绝对单位有英寸、厘米、点等，相对长度单位有百分比等。

单位	描述	举例
em	相对于自身 font-size（字体大小）属性的值，如果自身没有设置，则继承父元素 font-size 属性的值，1em 等同于 font-size 属性值。	p{line-height:2em;}
rem	相对于根元素`<html>`的 font-size 属性的大小，比如根元素的 font-size 是 10px，那么 1.2rem 就相当于 12px。	p{font-size: 1.2rem;}
ex	相对于所用字体中小写英文字母 x 的高度，若无法确定 x 的高度则使用 0.5em 计算。	p{font-size: 1ex;}
ch	相对于所用字体中数字 0 的高度，若无法确定 0 的高度则使用 0.5em 计算。	p{line-height: 3ch}
vw	相对于浏览器窗口的宽度，1vw = 窗口宽度的 1%。	p{font-size: 5vw;}
vh	相对于浏览器窗口的高度，1vh = 窗口高度的 1%。	p{font-size: 5vh;}
vmin	vw 与 vh 中较小的值。	p{font-size: 5vmin;}
vmax	vw 与 vh 中较大的值。	p{font-size: 5vmax;}
%	相对于父元素宽度或字体大小的百分比。	div{width: 55%}

举个简单的例子：

<!DOCTYPE html>
<html>
    <head>
        <title>我眼里只有学习</title>
        <style>
            .box{
                width: 50vw;
                height: 80vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 1em;
            }
            .ex > span{
                font-size: 2ex;
            }
            .ch > span{
                font-size: 3ch;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            学习
            <p class="info">学习</p>
            <p class="ex">
                x：<span>学习</span>
            </p>
            <p class="ch">
                0：<span>这是 4学习</span>
            </p>
        </div>  
    </body>
</html>

运行结果如下：

二、CSS颜色设置

我么在显示屏上面看的是颜色是由红、绿、蓝三原色组合而成的，按不同的比例混合这三种颜色就可以得到其它颜色，通过调整红、绿、蓝三种颜色的数值可以最大限度的控制颜色。

XIANGQQIA

描述	实例
颜色名称	使用颜色名称来设置具体的颜色，比如 red、blue、brown、lightseagreen 等，颜色名称不区分大小写	color: blue;
十六进制码	使用十六进制码以 #RRGGBB 或 #RGB（比如 #ff0000）的形式设置具体颜色，"#" 后跟 6 位或 3 位十六进制字符（0-9, A-F）	color: #f03;
RGB	通过 rgb() 函数对 red、green、blue 三原色的强度进行控制，从而实现不同的颜色	color: rgb(255,0,51);
RGBA	RGBA 扩展了 RGB，在 RGB 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 rgba() 函数实现	color: rgba(255,0,0,0.1);
HSL	通过 hsl() 函数对颜色的色调、饱和度、亮度进行调节，从而实现不同的颜色	color: hsl(120,100%,25%);
HSLA	HSLA 扩展了 HSL，在 HSL 的基础上增加了 alpha 通道来设置颜色的透明度，需要使用 hsla() 函数实现	color: hsla(240,100%,50%,0.5);

详情如下：

喜欢你笑⠀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS长度单位和颜色设置

一、CSS长度单位CSS支持多种长度单位，分为绝对长度单位和相对长度单位。绝对单位有英寸、厘米、点等，相对长度单位有百分比等。单位描述举例 em 相对于自身 font-size（字体大小）属性的值，如果自身没有设置，则继承父元素 font-size 属性的值，1em 等同于 font-size 属性值。 p{line-height:2em;} rem 相对于根元素<html>的 font-size 属性的大小，比如根元素的 font-siz.
复制链接

扫一扫