CSS单位分析及CSS颜色表示法、颜色表（调色板）

CSS单位主要分析em、rem、fr这三个较难理解的单位吧，平常的px、%、cm那些就不谈了嘛。

px在不同场景之下为同样的值，我们把它称作绝对单位，而em和rem受外部因素的影响下而改变，因此称作相对单位。

我们需要了解到为什么要拓展em，rem这样的相对单位呢？

比如我就特爱用px，感觉所有的东西都能用px来表现距离，而事实上这种做法早已跟不上时代的步伐了，随着更高分辨率的显示器出现，则需要原本的多栏定宽布局，则需要更加灵活多变的响应式布局。

em是最常见的相对长度单位，这是排版中使用的一种度量方式，基准值是当前元素的字号大小。在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。

以px为单位的基础字号大小，但希望把它改用em声明，下面有个简单的计算公式：目标em值 = 目标像素值 / 父元素（被继承元素）像素值。

重点就是以父级字号小心进行相对子级的大小变换，但这需要注意到的是不仔细的人还是少采用em为好，当em遇上font-size，事情会变得很复杂。

rem-“font size of the root element”，w3c对于rem的一句描述，rem比em多的一个r也就是root。

前面我们知道em这单位是相对于父级设置字体大小，而rem是相对于根html设置字体大小。

总的来说做响应式布局em和rem是不错的选择，不过我更倾向于rem，给html设置好字体大小，后面的元素可以使用确定的rem了。

fr，这个单位主要运用于grid布局中。

而我在学习grid布局的过程中，就一直不明白fr这单位到底是个怎样的单位？它有什么样的作用？

fr单位可以帮助我们创建一个弹列的网格轨道，它代表了网格容器中可用的空间（就像Flexbox中无单位的值）。

当fr与其他单位结合一起用时，fr是基于网格容器可用空间来计算。

注意是剩余可用空间，fr的好处也是帮助我们省去了一部分计算的麻烦。

举个例子：

grid-template-columns: 1fr 1fr 2fr;

就如这串代码，网格列，它就将剩余的空间分成了4部分，其中前两列占1份，后两列占2份。

再如：

grid-template-columns：2em 1fr 24% 1fr;这里的1fr=（网格宽度-2em-网格宽度*24%）/2

总的来说，fr运用于grid布局中是一个非常方便的单位。

CSS颜色表示法及调色板

1.直接采用颜色的名字，例：color:red;

2.十六进制方式，例：color：#191d11；所有#开头的都是16进制；

3.rgb（十进制，十进制，十进制）表示方法，每个值的取值范围是0~255，一共256个，为三原色（品红、黄、青）的配比，例：color:rgb(40,50,60);

4.rgba（十进制，十进制，十进制，小数0~1）：最后的a是alpha通道，表示透明度，取值范围在0~1，例：color:rgba(40,45,60,0.5);

5.hsla（色相，饱和度，亮度，透明度）；例：color:hsla(80%,80%,80%,0.6);

a：和上面的rgba一样，表示透明度

h：色相，表示范围0~360，如下如色环

s：饱和度，取值范围是0.0%~100%

l：亮度：取值范围0.0%~100%

6.transparent：透明的，表示方法为：color：transparent。

转载于:https://www.cnblogs.com/ceneasy/p/9762751.html

CSS单位分析及CSS颜色表示法、颜色表（调色板）相关推荐

HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
Android 最全颜色对应的颜色表
Android 最全颜色对应的颜色表 : 1.看图识别颜色: RGB在线颜色取色器:https://link.fobshanghai.com/rgbcolor.htm 极念王根据文件直接取色:http ...
Android 字体颜色设置及颜色表
1.在android中经常看到设置的颜色为八位的十六进制的颜色值,例如: public static final class color { public static final int light ...
页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
颜色与单位一.颜色 1.概述色调:很接近通俗意义上的颜色. 是指图像的相对明暗程度,在彩色图像上表现为颜色饱和度:是指颜色中灰色的含量. 饱和度最大时,颜色中灰色的含量为零:饱和度最小时,颜 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
CSS day_04(6.15)背景颜色图片、修饰元素、浮动
一.背景颜色和背景图片 1.背景颜色 backgroud-color:#fff; 背景颜色会在元素的最底层颜色可以使用任何色值(十六进制 rgb rgba 单词) 一般这个值都需要我们重新设置 2. ...
weex css单位,weex 踩坑
1. 用weex实现页面跳转? 1.1 使用vue-router position: fixed/sticky 的元素,在切换页面后不会消失 image.png 1.2 使用navigator 作为跳 ...
html 自适应单位vw,CSS单位em、rem、vh和vw等及CSS3的calc()以及line-height百分比
css单位我们常用的是px,也即是像素.随着网页开发自适应的要求,css3新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等. em 做前端的应该对em不陌生,不是什么罕见的单位,是 ...

CSS单位分析及CSS颜色表示法、颜色表（调色板）

CSS单位分析及CSS颜色表示法、颜色表（调色板）相关推荐

最新文章

热门文章