当前位置:网站首页>长度以及颜色单位基本概念
长度以及颜色单位基本概念
2022-08-05 05:25:00 【Y-琼眸】
长度单位
1.像素 px
像素就是屏幕上的一个个小点,这小点正常情况看不到,放大到一定的倍数才能看到,一个小点就是1px。
物理像素:一开始开发商就设定好了,在pc端1px=一个物理像素
这也是我们最常用的单位,固定单位
2.百分比 %
相对其父元素的宽高进行设置的,是一个相对单位,多用于流体式布局
3.em
相对于当前字体大小(例如字体20px 5em=100px)如果不设置字体大小,字体默认16px
如果当前元素没有设置字体大小,则它会继承祖先元素的字体大小,直到继承根标签的字体大小(跟标签字体大小默认16px)
4.rem
r=根(root) 只相对于根标签的字体大小进行设置的
注意:相对单位一般多用于移动端布局
颜色单位
1.在css中可以直接用颜色单词表示不同颜色
但这种用法比较少,因为颜色单词太多,而且不好描述
2.使用RGB值来表示不同颜色
RGB(red,green,blue)
通过红绿蓝不同的颜色浓度调配出一种颜色
通过0-255之间的数值进行调皮
0 最小
255 最大
3.RGBA
a 表示透明度,数值为0-1,0是完全透明,1代表完全不透明
4.使用十六进制的rgb值来表示颜色,原理上和RGB一样
十六进制 0-9abcdef
通过十六进制分别表示红色,绿色,蓝色
语法:#+十六进制
如果十六进制是 #00ff00 这样的(两两重复)则可以写成 #0f0 简写
常用的:#fff白色 #000黑色 #f00红色 #0f0绿色 #f60橘色 #ccc灰色
5.HSL值 HSLA值
hsl 分别表示亮度,色相,颜色 (a代表透明度)
边栏推荐
- Email management Filter emails
- Introduction to Network Layer Protocols
- Writing OpenCV in VSCode
- Transformer interprets and predicts instance records in detail
- LeetCode practice and self-comprehension record (1)
- What is the website ICP record?
- Pytorch分布式并行处理
- DevOps process demo (practical record)
- Come, come, let you understand how Cocos Creator reads and writes JSON files
- 错误记录集锦(遇到则记下)
猜你喜欢

Nacos配置服务的源码解析(全)

disabledDate 日期选择器 datePicker

Autoware--Beike Tianhui rfans lidar uses the camera & lidar joint calibration file to verify the fusion effect of point cloud images

el-progress实现进度条颜色不同

LeetCode practice and self-comprehension record (1)

Error correction notes for the book Image Processing, Analysis and Machine Vision

单片机原理与应用复习

VLAN is introduced with the experiment

sql server duplicate values are counted after

Nacos集群的搭建过程详解
随机推荐
Dry!Teach you to use industrial raspberries pie combining CODESYS configuration EtherCAT master station
设置文本向两边居中展示
[Problem has been resolved]-Virtual machine error contains a file system with errors check forced
错误记录集锦(遇到则记下)
In-depth analysis if according to data authority @datascope (annotation + AOP + dynamic sql splicing) [step by step, with analysis process]
淘宝宝贝页面制作
Cloud Computing Basics - Study Notes
selenium学习
Take you in-depth understanding of cookies
vscode笔记
Detailed explanation of the construction process of Nacos cluster
NAT experiment
云计算基础-学习笔记
Next-Generation Parsing Technology - Cloud Parsing
BIO,NIO,AIO实践学习笔记(便于理解理论)
The use of three parameters of ref, out, and Params in Unity3D
uniapp打包次数限制怎么办?只需两步就能解决
多线程之传递参数
盒子模型中过度约束问题及其解决办法
docker部署完mysql无法连接