CSS基础-长度单位

news/2024/12/25 21:11:57/文章来源:https://www.cnblogs.com/zktww/p/18628515

💖简介

CSS中,长度单位分为绝对长度单位相对长度单位。这些单位用于定义元素的尺寸、边距、填充、字体大小等属性值

vminvmaxCSS中的相对长度单位,它们基于视口(viewport)尺寸来定义元素的宽度或高度。这些单位使得元素的尺寸可以根据视口的大小进行缩放,从而有助于创建响应式设计。特别是当涉及到屏幕方向的变化时,如从竖屏切换到横屏。

⭐绝对长度单位

绝对长度单位指的是那些无论环境如何变化,其值都是固定不变的单位。它们通常适用于需要精确控制尺寸的情况,例如打印样式表中的页面布局

  • cm(厘米):1cm = 96px / 2.54 ≈ 37.8px
  • mm(毫米):1mm = 1/10th of 1cm = 3.78px
  • Q(四分之一毫米):1Q = 1/40th of 1cm = 0.945px
  • in(英寸):1in = 2.54cm = 96px
  • pc(派卡):1pc = 1/6th of 1in = 16px
  • pt(磅):1pt = 1/72th of 1in = 1.33px (对于Windows系统) 或 1px (对于Apple系统)。
  • px(像素):1px = 1/96th of 1in,是Web开发中最常用的单位,代表屏幕上的一个点 1。

⭐相对长度单位

相对长度单位则取决于其他因素,如父元素的尺寸、根元素的字体大小或视窗尺寸。这类单位非常适合响应式设计,因为它们可以根据不同的设备和屏幕尺寸自动调整

  • em:相对于当前对象内本的字体大小,如果当前对象内的字体大小未被设置,则相对于浏览器的默认字体大小。起初排版度量时是基于当前字体写字母M的宽度的,但现在的定义为相对于当前元素的字体大小。
  • rem:相对于根元素 (<html>) 的字体大小,避免了嵌套累积的问题,使得整个页面的比例缩放更加容易管理 。
  • ex:相对于字符 "x" 的高度,这个高度通常为字体大小的一半左右。
  • ch:基于字符 "0" 的宽度,主要用于等宽字体中。
  • vwvh:分别表示视口宽度和高度的百分比,1vw 等于视口宽度的1%1vh等于视口高度的1%
  • vminvmax:分别是vwvh中较小的一个和较大的一个,有助于确保元素尺寸适应不同方向的屏幕比例变化。
  • %:百分比单位,以百分数形式表示长度值,通常是相对于包含块的相应尺寸。

此外,还有一些较少见但同样重要的相对单位,比如cap(大写字母的高度)、ic(全角汉字的平均宽度)、lhrlh(行高),以及 vivb(视口内联轴和块轴上的尺寸)。


结束

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/858288.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于GRNN广义回归网络和MFCC的语音情绪识别matlab仿真,对比SVM和KNN

1.算法运行效果图预览 (完整程序运行后无水印) filePath =Test_data\悲伤1.wav类型:悲伤 识别置信度Vmax =0.9559 2.算法运行软件版本 matlab2022a3.部分核心程序 (完整版代码包含详细中文注释和操作步骤视频)Labsn = []; % 遍历每种情绪 for i = 1:length(Em_kind)Labs0…

学习高校课程-软件设计模式-访客模式(lec13)

Visitor: Problem Example: exporting the graph into XML format 示例:将图表导出为 XML 格式Visitor: Solution Place the new behavior into a separate class called visitor The original object passed to the visitor’s method as an argument

[学习笔记] 线性筛与欧拉函数

一 线性筛主要讲下思想,埃氏筛法就是用所有质数标记所有倍数,这样的时间复杂度是 \(O(n\log n\log n)\),有两只 \(\log\)。可是我不想要 \(\log\),于是欧拉筛: 改进:存下质数表。对于每一个数,只标记自己与不超过自己最小质因子的数的乘积,对于质数表 \(2,3,5\),循环到…

低空经济的地理信息支撑:构建安全、高效的飞行管理体系

随着无人机等低空飞行器的广泛应用,低空空域管理的重要性日益凸显。地理信息技术作为低空空域管理的重要支撑,对于保障低空经济的健康发展具有不可替代的作用。 地理信息技术在低空空域管理中的作用地理信息技术在低空空域管理中扮演着关键角色,主要体现在以下几个方面:空域…

【Nginx应用】Windows下使用Nginx反向代理访问MySQL数据库

环境说明1和2互通,2和3互通,1和3不通,想要在1上访问3上的msyql服务。实现步骤如下: 一、安装nginx 1.1 下载nginx 下载地址 https://nginx.org/download/nginx-1.26.2.zip 1.2 将下载的安装包上传到192.168.221.134运维跳板机,并解压1.3 nginx常用操作 1.3.1 启动nginx…

Hume 语音模型 OCTAVE:实现情感语音合成、声音克隆和多角色对话生成;通义开源多模态说话人识别项目 3D-Speaker

开发者朋友们大家好:这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。 我们的社区编辑团队会整理分享 RTE(Real-Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文章 」、「有看点的 会议 」,但内容仅代表编…

[学习笔记] 网络流

网络流,梳理一下然后看下 trick。 网络流主要难点在于建模,网络流很多 trick 现在已经很难有新意了。很多很好想的都是紫题,没啥含金量啊。 最大流 在残量网络中找到一条路径,设边集为 \(u\),要求满足 \(\min_{ x\in u} C_x ≠ 0\),即每条边残量皆不为 \(0\)。此时将这条…

FTP(windows版)

一、windows server搭建FTP 准备工作 手动搭建FTP站点,ECS实例必须满足以下条件:实例已分配公网IP地址或绑定弹性公网IP(EIP)。具体操作,请参见​绑定EIP​ 。 操作系统:Windows Server 2008及以上系统。系统自建即可。 步骤一:添加IIS以及FTP服务角色 在创建FTP站点前,…

BUU

BUU LSB 010看了一下没发现有什么问题 丢到stegsolve,rgb调到0的时候,是张二维码被嗅探的流量 找就完了rarqr镜子里面的世界key就是flag..无语 一开始没看到Hey I think we can write safely in this file without any one seeing it. Anyway, the secret key is: st3g0_saur…

WINDOWS-Windows11修改主题为浅色

一、文件夹显示的颜色是深颜色 个人不太喜欢,想要换成浅色系二、桌面 - 鼠标右键 - 个性化 - 颜色三、“选择模式”改成浅色系

OCM认证烂大街了吗?OCM战袍在此,永不过时!

OCM认证并没有烂大街。 OCM认证(Oracle Certified Master)是Oracle数据库认证级别中的天花板,是数据库认证体系中的顶级认证,由于OCM需要很高的知识储备和操作能力,注定它的含金量低不了。主要体现在以下几个方面: 1、行业认可度:OCM认证是Oracle认证体系中的最高级别,代…

PNG宽高CRC爆破

PNG图片宽高CRC爆破 CRC 这里的CRC指的是CRC32,也就是PNG图片的一个效验位,是一种不可逆运算,类似于MD5,作为数据效验或效验文件的完整性使用 图片宽高CRC校验码当一个png图片宽高有问题时,010回有CRC报错原理文件头89 50 4E 47 0D 0A 1A 0A 头部数据块长度为13 00 00 00 …