简介

在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. Kotlin：【数字类型】安全转换函数

  2. stdio.h的缓冲机制解析

    1. 令人迷惑的printf() 在C语言中,由于stdio.h中的缓冲机制,printf的输出通常会受到缓冲区的影响. 这种影响可能非常微妙,并常常令人疑惑,比如我们来看下面这段代码 #includ ...

  3. java基础语法-package构造方法-继承-多态

    java中的包 - package 包:包中有很多的类,根据类的功能不同,我们可以创建不同的包. 包的主要功能: 包的主要功能:用于分类管理 包的基本语法 package 包的路径(完整路径,从第一个 ...

  4. 微信小程序音频播放

    微信小程序音频播放 // 开启播放音频 startAudio(){ const innerAudioContext = uni.createInnerAudioContext();//创建并返回内部 ...

  5. Atcoder ABC383E Sum of Max Matching 题解 [ 绿 ] [ 最小瓶颈路 ] [ 并查集 ] [ Kruskal 重构树 ]

    Sum of Max Matching:简单贪心,但我场上没切,唐完了. 思路 显然,对于最大边权最小问题,首先想到最小瓶颈路的 trick:按边的大小排序,对原图进行加边. 同时可以发现,这个匹配有 ...

  6. 【ABP】项目示例（1）——项目搭建前置准备

    项目介绍 本项目使用.NET8+ABP+MySql搭建,基于DDD的设计思想,创建分层Web应用程序. 相关文档 .NET开发文档 Entity Framework Core开发文档 ABP开发文档 ...

  7. ABP登录返回错误次数、锁定时间

    ABP默认登录返回错误结果时,不会显示错误次数.锁定时间.为了实现验证错误时返回错误次数.锁定时间,我们需要改造返回接口.   1.定位验证错误的地方: 修改部分代码 1 /// <summar ...

  8. ARC132E题解

    简要题意 有 \(n\) 个方块,每个方块有一个初始状态可能为左右或者空.每次操作随机选择一个空进行操作.每次操作可以向左或者向右走一直到下一个空或者走出边界,走到的每个格子会变成左或者右,这取决于移 ...

  9. deepseek: php测试代码执行用时

    在 PHP 中,你可以使用 microtime() 函数来测量代码的执行时间.microtime() 函数返回当前 Unix 时间戳的微秒数.你可以在代码的开始和结束处分别调用 microtime() ...

  10. 第二届獬豸杯wp

    第二届獬豸杯wp 容器密码:}2N|n_yxdt!G/Ru}|_zdn$@?6@CD8E 计算机和手机部分已经在第二届 獬豸杯-复现 - 萧瑟迪亲传大弟子 - 博客园这里发过了,服务器部分自己又写了一 ...