简介

在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" 的宽度，主要用于等宽字体中。
  • vw和vh：分别表示视口宽度和高度的百分比，1vw 等于视口宽度的1%，1vh等于视口高度的1%。
  • vmin和vmax：分别是vw和vh中较小的一个和较大的一个，有助于确保元素尺寸适应不同方向的屏幕比例变化。
  • %：百分比单位，以百分数形式表示长度值，通常是相对于包含块的相应尺寸。

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

在线展示

在线静态网页

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

结束

🎀CSS基础-长度单位的更多相关文章

  1. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  2. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  3. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  4. HTML3/CSS基础

    1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...

  5. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  6. HTML——CSS基础

    一.引入CSS样式表 1.行内式 通过标记的style属性来设置元素的样式.基本语法如下: <标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;" ...

  7. HTML&CSS基础-ps的基本操作

    HTML&CSS基础-ps的基本操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.   我们工作中可能会经常需要将一个图片做成一个网页,而图片中的字体大小,行间距,图中lo ...

  8. 【JavaWeb】HTML&CSS 基础

    HTML&CSS 基础 HTML 基础 HTML 标签 HTML标题:HTML 标题(Heading)是通过 h1 - h6 等标签进行定义的. HTML段落: HTML 段落是通过 p 标签 ...

  9. 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏

    [图片链接有点小问题,这几天更新,敬请期待!] 目 录 第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...

  10. HTML+CSS基础课程-imooc-【更新完毕】

    6-1 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...

随机推荐

  1. SOUI4中使用文件资源

    一直以前SOUI中引用资源都是通过uires.idx中定义资源类型及路径,比如: <?xml version="1.0" encoding="utf-8" ...

  2. Luogu P4310 绝世好题 题解 [ 绿 ] [ 线性 dp ] [ 单调队列优化 ] [ 二进制优化 ]

    题目:绝世好题. 暴力 dp 显然 \(O(n^2)\) 转移即可. 单调队列优化 观察到只有某二进制位两个数都为 \(1\) 时才能转移,因此我们把每个二进制位开一个单调队列,然后对于一个数 \(a ...

  3. flutter-超出部分隐藏

    第一种写法 1 ConstrainedBox( 2 constraints: BoxConstraints( 3 maxHeight: 100 4 ), 5 child: Stack( 6 overf ...

  4. 基于Potplayer类播放器或Action!类录屏软件调取摄像头方式的定时抓拍保存图像方法小结

    前面已经总结了基于Maxmspjitter的相关方法,还有基于Unity的,还有基于Openframeworks的,今天来一篇基于普通软件的: 1.专业播放器类的软件,如Potplayer.vlc.o ...

  5. Halcon学习教程（二） 测量量测相关（点到线距离，线到线距离，轮廓线距离，一维测量，圆形测量，矩形测量等）

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/18740576 本篇讲一些测量用到的算子和实例,想了解更多就得去看看halcon实例里一维测量里 ...

  6. springboot項目打jar/war包

    一.打jar包 (1)不打入项目引用的第三方jar <build> <plugins> <plugin> <groupId>org.apache.mav ...

  7. PHP将变量存储在数据库中，读取并执行变量的方法

    http://www.edbiji.com/doccenter/showdoc/4/nav/1214.html 例如将下边的字符串存储到数据库中您好,您的验证码是".$authcode.&q ...

  8. Windows 提权-内核利用_1

    本文通过 Google 翻译 Kernel Exploits Part 1 – Windows Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校 ...

  9. FastAPI 错误处理与自定义错误消息完全指南：构建健壮的 API 应用 🛠️

    title: FastAPI 错误处理与自定义错误消息完全指南:构建健壮的 API 应用 ️ date: 2025/3/12 updated: 2025/3/12 author: cmdragon e ...

  10. Web前端入门第 11 问：HTML 常用标签有多少？全量标签有多少？

    HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 截止发文,MDN 收录的 HTML 全量标签有 126 个,有 18 个标记已弃用. 名词解释:MDN --- ...