单位和值

痛定思痛。 2022-06-14 02:24 159阅读 0赞

## 1 颜色值 ##

在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

(1) 英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

(2) RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

(3) 十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表：

[![54c5b4120001f20808000902.jpg][]][54c5b4120001f20808000902.jpg]

（单击图片可放大）

## 2 长度值 ##

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

(1) 像素

像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

(2) em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
    span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 \* 0.8 = 11.2px）。

(3) 百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 \* 1.3 = 15.6px）。

[54c5b4120001f20808000902.jpg]: /images/20220614/bec98972e45e482393a68ef6300b6c81.png

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是rem单位和em单位？它们有什么区别？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ \`rem\` 和 \`em\` 单位 ⭐ \`rem\` 单位（Root Em） ⭐ \`em\`

悠悠/ 2023年10月15日 15:53/ 0 赞/ 66 阅读

相关绝对单位&相对单位

像素px是一种长度单位，来告诉浏览器应该如何调整元素大小和空间大小。其实除了像素，CSS 也有其他不同的长度单位供我们使用。单位长度的类型可以分成 2 种，一种是相

- 日理万妓/ 2023年09月24日 18:10/ 0 赞/ 34 阅读

相关 CSS 学习笔记 - 值和单位

CSS 学习笔记 - 值和单位参考资料参考资料 [MDN：CSS 属性值定义语法][MDN_CSS] [MDN：CSS 值和单位][

矫情吗；*/ 2022年12月03日 13:18/ 0 赞/ 13 阅读

相关 css rem 单位_了解和使用CSS中的rem单位

css rem 单位 Gain an in-depth understanding of rem units in CSS, a relative sizing unit w

叁歲伎倆/ 2022年12月03日 01:39/ 0 赞/ 304 阅读

相关前端CSS，长度单位，颜色单位

CSS中的长度单位： px，像素，主要和屏幕相关，1920\1080 百分比，大小与父元素相关 em，与当前元素的字体相关，一个字体大小=1em

梦里梦外;/ 2022年08月31日 12:21/ 0 赞/ 231 阅读

相关 CSS权威指南(第三版)_04_第4章_值和单位

1. 相关资源 1. [04\_值和单位.xmind][04_.xmind] 2. [CSS权威指南(第3版中文版).pdf][CSS_3_ _.p

末蓝、/ 2022年07月14日 01:47/ 0 赞/ 230 阅读

相关单位和值

1 颜色值在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：

痛定思痛。/ 2022年06月14日 02:24/ 0 赞/ 160 阅读

相关 rem 单位和 em 单位

首先要知道：rem 和 em 是相对单位；我们通过代码来看 rem 和 em的使用和区别： em:相对于父级 <!doctype html>

灰太狼/ 2022年05月30日 10:45/ 0 赞/ 286 阅读

相关 GDAL读取图像波长和单位

对于有波长和单位信息的影像可用调用某一栅格波段的GetMetadataItem函数打开： dataSet->GetRasterBand(1)->GetMetadataItem

拼搏现实的明天。/ 2022年05月11日 04:16/ 0 赞/ 301 阅读

相关 Solidity 货币单位，时间单位

![20190402093254990.png][] demo.sol（货币单位）： pragma solidity ^0.4.0; con

逃离我推掉我的手/ 2022年02月25日 13:35/ 0 赞/ 346 阅读