简介

在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. window service 2012 R2 0x8007000d

    今天遇到了一个很无语的问题,我的一个.net core 项目,部署到IIS上之后,启动网站,报500.19的错误.尝试了网上N种办法始终没办法解决,最后重装了我的.net core,解决了. 第一步: ...

  2. shell脚本输出带文本颜色背景颜色自定义样式格式内容

    shell脚本中 echo 和 printf 都可以输出内容.示例1: echo -e "\033[43;35m david use echo say Hello World \033[0m ...

  3. 一些devops、软件工程的个人感悟

    1.devops不是简单的工具,是思想. (1)devops核心在于快速编译构建.自动测试化.自动部署发布 (2)工具只是辅助手段,无论是Jenkins.腾讯蓝盾等等,甚至是手动bat+bash搭建, ...

  4. Delphi Cxgrid中修改一个单元格，影响另一个单元格的值的实现方法

    第一种方法就是使用表格中列的PropertiesValidate方法实现,例如修改单据的数量列,希望重新计算当前行的金额列 //编辑数量时发生 procedure TfrmSkdLr.cxgrdbcl ...

  5. 服务器主机：复杂理论的视角与SEO策略

    本文分享自天翼云开发者社区<服务器主机:复杂理论的视角与SEO策略>,作者:不知不觉 在数字世界的演变中,服务器主机在信息存储和数据处理方面发挥着核心作用.本文将带你重新认识服务器主机的价 ...

  6. C++ 使用MIDI库演奏《晴天》

    那些在MIDI库里徘徊的十六分音符 终究没能拼成告白的主歌   我把周杰伦的<晴天>写成C++的类在每个midiEvent里埋藏故事的小黄花   调试器的断点比初恋更漫长而青春不过是一串未 ...

  7. 安川Yaskawa机器人DX100示教器维修的优劣势分析

    安川Yaskawa机器人DX100示教器维修的优劣势分析 安川Yaskawa机器人示教编程,即操作人员经过安川机器人示教器,手动操控机器人的关节运动,以使机器人运动到预订的方位,一起将该方位进行记载, ...

  8. Halcon学习教程（一）　之提取十字线中心　图像分割

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/17266405.html 废话不多说,因为毕业后工作原因比较忙,好久没更新博客了,直接上图... ...

  9. 【Spring】Spring的@Autowire注入Bean的规则测试

    背景 在项目中使用Spring的Bean,一般都使用默认的Bean的单例,并且结合@Autowire使用. 实在有同一个类型多个实例的情况,也使用@Qualifier或@Resource实现注入. 所 ...

  10. DataX - [03] 使用案例

    题记部分 001 || mysql2hdfs (1)查看MySQL被迁移的数据情况 (2)根据需求确定reader为mysqlreader,writer为hdfswriter 查看reader和wri ...