CSS长度单位:px、ex、vh、vw、vmin、vmax、em、rem

news2024/10/12 3:18:20

px

相对长度单位。像素(Pixels)。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

ex

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

vh、vw

v(viewpoint)也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;
height:100vh;

width:100%;
height:100%;

说明:

  • 如果浏览器高度为1000px,宽度为800px,那么1vh=1000/100=10px,1vw=800/100=8px;
  • 而 %要受到父元素的约束,并不能直接根据浏览器的尺寸计算。

vmin、vmax

vmin表示当前宽和高的小者,vmax则表示当前宽和高的大者。

em和rem

em

相对长度的单位,相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

rem

相对长度单位。
r(root)通常指标签,也就是只要用rem作为单位,都会以标签的设置为基础。
相对于根元素(即html元素)font-size计算值的倍数

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>
<style>
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
</style>

也就是说这样设置的话,每层都要看它的父元素,而这并不总是我们想要的,rem可以来补充em不足。

q

1/4毫米(quarter-millimeters)。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

in

英寸(Inches)。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

pt

点(Points)。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

pc

派卡(Picas)。绝对长度单位。相当于我国新四号铅字的尺寸。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

cm/mm

厘米/毫米

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2206719.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3之依赖注入provide(提供)/inject(注入)

通常情况下&#xff0c;需要从父组件传值到子组件使用props足以&#xff0c;但是如果是深层嵌套的组件&#xff0c;如果某个深层的组件想要得到祖先组件的部分数据&#xff0c;使用props的话需要沿着各个嵌套的组件着层传递数据&#xff0c;而在传递过程中的组件压根就不需要使…

你了解 SpringBoot 在一次 http 请求中耗费了多少内存吗?

在实际工作中&#xff0c;经常会需要进行在全链路压测&#xff0c;优化 GC参数&#xff0c;优化 JVM 内存分配。 当知道 1 次 RPC 请求和 Http 请求需要的堆内存大小后&#xff0c;你可以精确地计算&#xff1a;指定的并发量之下&#xff0c;系统需申请多少堆内存。同时结合 J…

若依 根据角色权限 动态添加路由 学习

源于这个问题对若依权限改造的学习&#xff0c;用ASP.NET Core Web api 做后端&#xff0c;所以不是纯净的若依前端&#xff0c;有部分改过。 ​​​​​​​若依 从字典类型跳到字典数据跳到了404-CSDN博客 从路由守卫获取到用户信息开始&#xff0c;到路由跳转结束的过程 …

小猿搜题冲榜/刷排名/专用思路-理论速度1小时/3.6w分 附带0s教程

小猿搜题冲榜/刷排名/专用思路-理论速度1小时/3.6w分 附带0s教程 ⚠️&#xff1a;这个方法很多还需要手动操作&#xff0c;我目前无法用代码完全实现&#xff0c;如果你有兴趣可以给我提issue我们一起讨论。 冲榜思路 先说整体思路&#xff1a;抓包改答案adb模拟 之后详细…

10月更新|国内可用的ChatGPT攻略镜像中文网站

一、GPT中文镜像站 ① yixiaai.com 支持GPT4、4o以及o1&#xff0c;支持MJ绘画 ② chat.lify.vip 支持通用全模型&#xff0c;支持文件读取、插件、绘画、AIPPT ③ AI Chat支持GPT3.5/4&#xff0c;4o以及MJ绘画 1. 什么是镜像站 镜像站&#xff08;Mirror Site&#xff0…

【GO基础学习】环境安装到基础语法(1)

文章目录 环境安装GoLand 安装GO基础GO特点类型和函数Init函数和main函数GO命令下划线变量和常量数组切片Slice 引用 环境安装 下载地址&#xff1a;https://www.golangroadmap.com/ 安装目录文件说明&#xff1a; api&#xff1a;每个版本的 api 变更差异。 bin&#xff1…

JAVA 字符串 trim() 方法的正确使用

JAVA类里面 trim() 方法大家都比较熟悉&#xff0c;就是用来清除掉字符串首尾的空白字符。但在一次程序运行崩溃后&#xff0c;查找具体原因时&#xff0c;发现是由字符串末尾的一个回车符号 "\r" 所导致的。于是有机会仔细读了下该方法的 java 文档说明。其中一段内…

Docker理念

1.为什么会出现Docker Docker 的出现并非偶然&#xff0c;而是由一系列技术发展趋势和实际需求所推动的一项技术创新。 随着软件行业的快速发展&#xff0c;开发团队的规模不断扩大&#xff0c;成员可能分布在不同的地理位置&#xff0c;使用不同的操作系统和开发工具。这就导致…

CSD(computational storage devices)架构介绍

CSD&#xff08;computational storage devices&#xff09;架构介绍 前言一、CSD与传统SSD的架构对比二、为什么要采用FPGA三、FPGA缺点四、个人总结reference 前言 虽然一直有接触CSD&#xff0c;但一直对其原理和架构知之甚少&#xff0c;半知不解。今天&#xff0c;趁着我还…

element-ui点击文字查看图片预览功能

今天做一个点击文字查看图片的功能&#xff0c;大体页面长这样子&#xff0c;点击查看显示对应的图片 引入el-image-viewer&#xff0c;点击的文字时候设置图片预览组件显示并传入图片的地址 关键代码 <el-link v-if"scope.row.fileList.length > 0" type&…

模型预测控制工具包——ACADO:简介、安装与测试

模型预测控制工具包——ACADO&#xff1a;简介、安装与测试 ACADO 工具包简介ubuntu20.04 安装 ACADO工具包安装依赖安装ACADOtoolkit 测试 ACADO 工具包简介 ACADO Toolkit 是一个用 C 编写的用于自动控制和动态优化的软件环境和算法集合。 它提供了一个通用框架&#xff0c;…

三菱FX3UPLC定位控制程序举例

测试程序的编写 1.输入输出的分配输入输出的分配如下表所示。 2、相关软元件的设定 相关软元件也有所不同。更改定位指令的脉冲输出端时&#xff0c;根因设定为定位指令的脉冲输出端的软元件不同&#xff0c;据更改的内容&#xff0c;需要变更设定的相关软元件。 3.程…

【大模型新书】掌握大语言模型:高级技术、应用、尖端方法和顶尖LLMs

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/93e5a5c008474f72a0335083ef9c4893.png)我已将 这本大模型书籍免费分享 出来&#xff0c;需要的小伙伴可以扫取。 主要特性 探索自然语言处理&#xff08;NLP&#xff09;基础和大语言模型基本原理&#xff0c;包括…

若依前端后打成一个JAR包部署

客户需要将项目前后端作为一个整体打包成jar&#xff0c;不使用nginx方式转发。使用框架是若依前后端分离&#xff0c;后端springboot&#xff0c;前端vue&#xff0c;目的就是把vue打入jar。 一、前端修改 ruoyi-ui/src/router/index.js文件 &#xff0c;将 mode: ‘history’…

一键生成二维码的源码系统 电脑+手机版自适应代码 带完整的安装代码包以及搭建部署教程

系统概述 一键生成二维码的源码系统是一款集二维码生成、管理和应用于一体的综合性平台。它采用先进的技术和算法&#xff0c;能够快速、准确地生成各种类型的二维码&#xff0c;包括文本、链接、图片等。同时&#xff0c;该系统还具备高度的灵活性和可扩展性&#xff0c;能够…

如何使用bpmn-js实现可视化流程管理

介绍 BPMN-JS是一个流行的开源库&#xff0c;用于在Web应用程序中可视化、创建、编辑和分析BPMN&#xff08;Business Process Model and Notation&#xff0c;业务流程建模与表示法&#xff09;2.0 图。BPMN是一种国际标准的图形化语言&#xff0c;用于描述企业中的业务流程&a…

mongodb 连接, 去重,索引

mongodb 去重,索引 MongoDB Community Server 下载: https://www.mongodb.com/try/download/community GUI: The Ultimate Client, IDE and GUI for MongoDB | Studio 3T 连接 设置允许远程(局域网)连接 (windows) 在打开文件 "<你的安装目录>\MongoDB\Server\…

k3s安装指定版本以及离线安装(docker)

首先下载你所需要版本的k3s安装包&#xff0c;目录结构如下所示&#xff0c;我这里是v1.19.15k3s2。 1.首先赋予可执行权限后进行安装。 # k3s 需要赋予可执行权限 sudo chmod x k3s sudo chmod x k3s-install.sh2.然后将k3s的二进制文件复制到/usr/local/bin/ cp k3s /us…

✨机器学习笔记(七)—— 交叉验证、偏差和方差、学习曲线、数据增强、迁移学习、精确率和召回率

机器学习笔记&#xff08;七&#xff09; 1️⃣评估模型&#x1f397;️使用测试集评估模型&#x1f397;️交叉验证集&#xff08;cross validation&#xff09; 2️⃣偏差和方差&#xff08;Bias / Variance&#xff09;3️⃣学习曲线&#xff08;Learning curves&#xff09…

自动化分析背后,一站式数据分析平台!

自动化分析背后&#xff0c;一站式数据分析平台&#xff01; 前言一站式数据分析平台 前言 在如今的企业管理中&#xff0c;数据已经不再是简单的存储和备份&#xff0c;而是成为了决策的核心驱动力。尤其是在面对海量数据的情况下&#xff0c;企业急需一个能够高效处理、分析…