HTML中长度和颜色的单位分别有哪些？

2024-06-03 02:33:27

目录

一、长度单位

二、颜色单位

一、长度单位

1、像素 px

实际上是屏幕上的一个个小点，100px就是100个小点，这个点正常情况我们是看不到的，

如果我们把一个内容放大很多倍，就可以看到了，在pc端（电脑端），一般情况下1px=1个

发光点，也是我们最常用的长度单位，它是固定单位；

2、百分比 %

相对单位，它是相对于其父元素内容区（width/height）宽高子元素的大小会随着父元素的大

小变化而变化，这种大小布局叫流式布局；

3、em

相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize，

如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，

就会继承根标签（html）的默认的字体大小，也就是16px；

4、rem

相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size

html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px；

5、vw

viewport width 视口的宽度

6、vh

viewport heigth 视口的高度

我们把视口划分为100个，宽度100vw，高度100vh。

二、颜色单位

1、在CSS可以直接使用颜色的单词来表示不同的颜色，red、green、yellow等，一些简单的颜

色可以用英文单词，但它不是很方便，一则单词太多，二则颜色也不好描述,三则太low；

2、使用RGB值来表示不同的颜色

rgb（red，green，blue）浓度0-255，这个具体数值不需要记，一般是设计师设计好，或者直

接吸取颜色；

3、RGBA rgba(red, green, blue, alpha)

alpha代表透明度，数值在0-1之间，0是透明，1是不透明；

4、使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样,只不过表示的方式不一样

0-9abcdef一共16个数字；

语法：#红色的浓度绿色浓度蓝色的浓度。例如：#7f2eaa

00 表示最小=0，ff 表示最大=255

红色、绿色、蓝色用两位十六进制表示，如果两位十六进制是一样的，可以省略一位

#ff0000 可简写#f00，但是#f0f0f0 不可简写；

常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#fff

5、HSL值 HSLA值（了解）

HSLA值（色度，饱和度，亮度，透明度）

HTML中长度和颜色的单位分别有哪些？相关推荐

css常用属性总结：颜色和单位
在css代码编写中,估计颜色和单位是必不可少的,然而在css中关于颜色和单位值的写法有很多种写法,所以有必要把它弄清楚. 颜色当初我在初学前端的时候,就会冒出一个疑问"我该如何设置网页颜色 ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
页面中color颜色值_HTML+CSS 基础知识-入门概括-颜色与单位
颜色与单位一.颜色 1.概述色调:很接近通俗意义上的颜色. 是指图像的相对明暗程度,在彩色图像上表现为颜色饱和度:是指颜色中灰色的含量. 饱和度最大时,颜色中灰色的含量为零:饱和度最小时,颜 ...
前端之文本、长度、颜色、字体、背景-36
前端之文本.长度.颜色.字体.背景-36 目录一.css三种引用方式 1.行间式 2.内联式 3.外联式 4.三种方式的优先级二.样式与长度颜色 1.基本样式 2.长度 3.颜色三.常用样式 1 ...
（半转载）光在介质中传播，颜色没有变，那到底是频率变了还是波长变了？为什么描述光的颜色时多用波长表示，而很少用频率表示呢？我们平时所说的光的波长到底指的是真空中的波长还是空气中的波长呢？
本文部分来源: 翁怡然, 翁羽翔. 关于"光在介质中传播是波长还是频率发生改变"的对话. 物理, 2013, (3): 284-285. http://www.wuli.ac.cn ...
【静态页面架构】CSS之颜色与单位
CSS架构一.颜色与单位颜色: 前景色与背景色:设置文本和背景颜色 <style>html,body{background-color: blue;/* 前景色 - 就是指字体颜色(c ...
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
端到端说话人验证系统中长度归一化的分析
Analysis of Length Normalization in End-to-End Speaker Verification System 端到端说话人验证系统中长度归一化的分析摘要经典 ...
python缩进在程序中长度统一且强制使用_Python习题纠错1
February, 1991 0.9.1 2.Python语言的缩进只要统一即可,不一定是4个空格(尽管这是惯例). Python缩进在程序中长度统一且强制使用. 3.IPO:Input Proces ...
iOS 改变字符串中数字的颜色
匹配中文字符 [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内) [^\x00-\xff] 匹配网址:[a-zA-z]+://[^\s]* 匹配国内电话 \d{3}-\d{8}|\d{4} ...

最新文章

热门文章