CSS基础-长度单位

news/2024/12/26 12:33:39/

💖简介

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

⭐绝对长度单位

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

  • 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(视口内联轴和块轴上的尺寸)。

🌟在线展示

在线静态网页

https://zktww.github.io/CSS/cssLengthUnit.html


结束


http://www.ppmy.cn/news/1558267.html

相关文章

解锁自动化新高度,zTasker v2.0全方位提升效率

zTasker 是一款集强大功能与高效操作于一体的自动化任务管理软件&#xff0c;以其简单直观的设计和一键完成操作的特性深受用户喜爱。软件体积小巧&#xff0c;运行速度极快&#xff0c;支持超过 100 种不同的任务类型&#xff0c;并提供 30 多种定时或条件触发方式&#xff0c…

NNDL 作业11 LSTM

习题6-4 推导LSTM网络中参数的梯度&#xff0c; 并分析其避免梯度消失的效果 先来推个实例&#xff1a; 看式子中间&#xff0c;上半部分并未有连乘项&#xff0c;而下半部分有到的连乘项&#xff0c;从这可以看出&#xff0c;LSTM能缓解梯度消失&#xff0c;梯度爆炸只是不易…

#渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍11基于XML的SQL注入(XML-Based SQL Injection)

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

如何确保数据大屏的交互设计符合用户需求?(附实践资料下载)

确保数据大屏的交互设计符合用户需求是一个多步骤的过程&#xff0c;涉及到用户研究、设计原则、原型测试和持续迭代。以下是一些关键步骤和策略&#xff1a; 用户研究&#xff1a; 目标用户识别&#xff1a;明确大屏的目标用户群体&#xff0c;包括他们的背景、角色和需求。用…

C 进阶 — 程序环境和预处理

C 进阶 — 程序环境和预处理 主要内容 程序的编译和执行环境 C 程序编译和链接 预定义符号 预处理指令 #define 预处理指令 #include 预处理指令 #undef 预处理操作符 # 和 ## 宏和函数对比 命令行定义 条件编译 一 程序的编译和执行环境 ANSI C 存在两个不同环境…

Docker怎么关闭容器开机自启,批量好几个容器一起操作?

环境&#xff1a; WSL2 docker v25 问题描述&#xff1a; Docker怎么关闭容器开机自启&#xff0c;批量好几个容器一起操作&#xff1f; 解决方案&#xff1a; 在 Docker 中&#xff0c;您可以使用多种方法来关闭容器并配置它们是否在系统启动时自动启动。以下是具体步骤和…

第四节、电机定角度转动【51单片机-L298N-步进电机教程】

摘要&#xff1a;本节介绍电机转动角度计算步骤&#xff0c;从而控制步进电机转角 一、 计算过程 1.1 L28N每控制步进电机转动一步&#xff0c;根据程序拍数设置情况&#xff0c;计算步进电机步距角度step_x s t e p x s t e p X … … ① step_{x} \frac{step}{X} ……① s…

Zettlr(科研笔记) v3.4.1 中文版

Zettlr是款适合写作者和研究人员使用的Markdown编辑器&#xff0c;免费开源&#xff0c;功能简洁&#xff0c;具备Markdown所有基本功能&#xff0c;内置各种运算符&#xff0c;还可以调用计数器&#xff0c;可以完美替代Word和收费的文字处理器。 软件特点 从应用程序中直接管…