CSS单位分析

px:单位代表像素,1px代表一个像素点。

%:设置子元素为父容器的占比。

em:代表该元素中一个字体所占字符,常用在文字首行缩进。其具有继承性。

rem:始终代表html中的字符所在位置。

vm:1vm代表占据视窗宽度的百分之1.

vh:1vh代表占据视窗高度的百分之1.

vmax:选取vh和vm中最大的哪一个。

vmin:选取vh和vw中最小的哪一个。

fr:并没有具体的值,代表一个均分单位,例如:在水平上只分出1fr,则1fr代表整个视窗宽度,

  如分成3个1fr,则1fr代表视窗宽度的1/3.

颜色设置与调色板

1.CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。

2.十六进制值使用三个双位数来编写,并以 # 符号开头。

3.RGB 颜色值表示:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

4.RGBA 表示:RGBA颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

5.HSL 颜色表示:hsl(hue, saturation, lightness)。HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

6.HSLA 颜色表示:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

css单位分析、颜色设置与调色板的更多相关文章

  1. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  2. CSS单位分析

    px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在位置. vm:1 ...

  3. CSS学习摘要-数值和单位及颜色

    在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...

  4. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  5. 前端基础-CSS的属性相关设置

    一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 ...

  6. CSS单位计算总结

    CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div& ...

  7. 你可能没注意的CSS单位

    扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单位,参考物是父元素的font-size,具有继承的特点 如果字体大小是16px(浏览器的默认值),那 ...

  8. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  9. [转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置

    保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置  长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜 ...

随机推荐

  1. BZOJ5479: tree

    Description 给出一棵树,根节点为1 给出两个集合,集合由树上节点组成 从两个集合分别选出一个元素,求其LCA 问LCA的最大深度是多少 Input 第一行给出数据组数T 对于每组数据 第一 ...

  2. AT2442 フェーン現象 (Foehn Phenomena)

    题目地址 原题地址 题解 其实就是一个区间加,单点查询的问题 当然可以线段树/树状数组做,但是这两个做法要分类讨论所以代码会比较多 我们考虑一种更简便的做法 差分! 因为温度只和海拔差有关,这相当于题 ...

  3. P4313 文理分科

    思路 遇到这种利益冲突的最终利益最大化问题 考虑转化为最小割,使得损失的价值最小 相当于文科是S,理科是T,选出最小割就是确定损失代价最小的方案 然后就把S向每个点连一条cap=art[i][j]的边 ...

  4. CF981D Bookshelves

    按位贪心+DP的好题qwq 首先看到题目的要求,统计价值的时候的操作是按位与,就要有按位分别计算的意识 开始没意识到结果想了好久还是看了题解才想到 由于统计价值的方式不是加和,所以可能会出现两个较大的 ...

  5. js,jq获取父,兄弟,子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  6. Java一次性读取文件的内容

    我们做文本处理的时候的最常用的就是读写文件了,尤其是读取文件,不论是什么文件,我都倾向于一次性将文本的原始内容直接读取到内存中再做处理,当然,这需要你有一台大内存的机器,内存不够者……可以一次读取少部 ...

  7. L1-047. 装睡

    水题直接上代码: #include<iostream> #include<algorithm> using namespace std; int main() { int n; ...

  8. file类中,命令记录

    file的长度>>4096当前盘符总空间字节数>>>151200460800当前盘符的可用空间字节数>>>143769821184 long a = f ...

  9. 关于在pycharm下提示ModuleNotFoundError: No module named 'XXX' 的一种可能

    在pycharm下出现“ModuleNotFoundError: No module named 'XXX' ”提示时, 在网上找大部分的解决方案是重新在pycharm里安装对应的模块,但是这不是我要 ...

  10. 整数m去掉n位后剩下最大(小)值

    题目描述 给定一个正整数(<=255位),从中删去n位后,使得剩下的数字组成的新数最小(大): 思路:从左到右开始扫描,两两比较,如果是前一位比后一位大,则删去前大的一位,直到删完所有的n位: ...