简介

在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. shell脚本中的循环（for循环，while循环）及break、continue的用法示例

    Shell脚本中也算是一门简易的编程语言了,当然循环是不能缺少的.常用到的循环有for循环和while循环.下面就分别介绍一下两种循环的结构. [for循环]: Shell脚本中的for循环示例: # ...

  2. linux：MariaDB安装

    介绍 链接 安装 查看系统中是否已安装 rpm -qa | grep -i mariadb 返回结果类似如下内容,则表示已有 MariaDB 的包 为避免安装版本不同造成冲突,请执行以下命令移除已安装 ...

  3. 解密prompt系列47. O1 Long Thought的一些特征分析

    之前我们花很多章讨论过思维链,包括思维链的 组织结构,例如Self-Consistency,TOT,TOMT, GOT,AOT,POT 编排方式,例如Plan-and-Slove,Least-to-m ...

  4. 基于Linux系统的PXE搭建方法

    本文分享自天翼云开发者社区<基于Linux系统的PXE搭建方法>,作者:t***n 一.底层环境准备 1.安装RedHat7.6系统 2.关闭防火墙和Selinux systemctl s ...

  5. [AHOI2013] 差异 题解

    后缀自动机维护子串公共后缀方便一点,所以直接倒序插入字符串即可. 我们给所有前缀打上标记,然后跑树形 \(dp\),设 \(sum_i\) 表示第 \(i\) 个点的子树内有多少个前缀,\(ans\) ...

  6. 发那科FANUC机器人M-710iC减速机维修看这几步

     发那科作为全球知名的工业机器人制造商,其M-710iC型号机器人在工业界享有盛誉.然而,即便是最顶尖的设备也难免会遇到维修问题,其中四轴传动齿轮箱的维修尤为关键.本文将深入探讨发那科FANUC机器人 ...

  7. 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（6）

    1.问题描述: 使用华为内置的MapComponent, 发现显示不出来.查看日志, MapRender底层有报错. 解决方案: 麻烦按以下步骤检查下地图服务,特别是签名证书指纹那部分. 1.一般没有 ...

  8. selenium自动化测试-获取网页截图

    今天学习下使用selenium自动化测试工具获取网页截图. 1,如果是简单获取当前屏幕截图只需要使用方法: driver.get_screenshot_as_file('screenshot.png' ...

  9. 解决Linux下文本文件中文乱码问题

    上一篇我们提到了OS和DB的一些中文乱码问题解决,本篇我们继续介绍下在OS上的文本文件中文乱码问题. 操作系统是Linux(OEL 8.10),所有文件是打了一个压缩包上传的,上传解压后发现其中的文本 ...

  10. 远程服务器画面GUI传输到本地显示

    远程服务器画面GUI传输到本地显示 这篇文章主要介绍远程服务器(Ubuntu系统)的GUI画面传输到本地(本地Ubuntu或者Windows)显示的方法. 远程Ubuntu系统 --> 本地Wi ...