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布局中是一个非常方便的单位。

还会有补充,未完待续。

原文地址:https://www.cnblogs.com/ceneasy/p/9762751.html

时间: 2024-08-15 03:01:29

CSS单位分析及CSS颜色表示法、颜色表(调色板)的相关文章

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列举出来,估计做完上面这个颜色表,估计人都废了. 为了解决这个重复性的问题,我们必须引入另一种语言:JavaScript 为何学习 JavaScript? JavaScript 是 web 开发者必学的三种语言之一: HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7:最后,我们需要将表头插入到表格中.基于上一个例子,我们再加入一些 JavaScript 代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 01

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简介 HTML <!DOCTYPE> 标签 HTML <html> 标签 HTML <head> 标签 HTML <meta> 标签 HTML <title> 标签 HTML <body> 标签 例 1:一个简单的 HTML 表格,包含三行

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 02

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子,对表格的内容做一些修改. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>颜色表</title> 6 </head>

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表(目录)

HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04 最终实现的效果: 原文地址:https://www.cnblogs.com/Satu/p/11115545.html

CSS颜色表示法和颜色表

颜色表示法 color name:颜色的名称: color:red:   直接用英文意思来写,但是数量有限,不支持透明颜色   十六进制方式: color:#191d11:所有#开头的都是16进制   rgb(十进制,十进制,十进制)表示方法: 每个值的取值范围是0~255,一共256个   rgba(十进制,十进制,十进制,小数0~1): 最后的a是alpha通道,表示透明度,取值范围在0~1   hsl(色相,饱和度,亮度): h:色相,表示范围0~360,如下如色环 s:饱和度,取值范围是

6st 关于颜色使用方法和颜色表

CSS中表示颜色有三种方法:     1.使用十六进制值设置的颜色  <对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).十六进制值使用三个双位数来编写,并以 # 符号开头.>     2.使用 rgb 值(红绿蓝颜色值)设置的颜色.RGB 颜色值是这样规定的:rgb(red, green, blue).每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%).rgb

css颜色表示法及颜色表

颜色表示法 一.直接输入CSS颜色的关键词,如red blue等. 二.十六进制值,如#0000. 三.RGB: rgb(255,0,0),这是给定的三个参数表示的红色,绿色和蓝色通道的颜色值每个通道不是由两个十六进制数字表示的,而是由0到255之间的十进制数表示的. 四.HSL:该hsl( )函数接受色相.饱和度以及明度值 色调:颜色的底色调.这个值在0到360之间,表示色轮周围的角度. 饱和度:饱和度是多少?这需要一个价值从0-100%,其中0是没有颜色(它将显示为灰色),100%是全彩色饱

CSS中的长度单位及颜色表示

   CSS中的长度单位及颜色表示 长度单位: px:像素,绝对单位 em:相对单位,如果用于font-size属性本身,则是相对于父元素的font-size.若用于其他属性(width,height),则是相对于本身元素的font-size.所有未经调整的浏览器都符合: 1em=16px. rem:相对字体长度单位,只相对根元素即html元素字体大小. fr:自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配. 颜色表示: 十