html中,元素width和height的单位px、cm、mm、in、pc、pt、ch、em、rem、vh、vw、vmin、vmax的含义

在 HTML 中,元素的 widthheight 属性可以使用多种单位来表示尺寸。下面是这些单位的含义:

  1. 像素(px):像素是最常见的单位,表示固定的像素值。例如,width: 200px; 表示元素的宽度为 200 像素。

  2. 厘米(cm):厘米是一个国际通用的长度单位。例如,width: 5cm; 表示元素的宽度为 5 厘米。

  3. 毫米(mm):毫米也是一个国际通用的长度单位,比厘米更小。例如,width: 20mm; 表示元素的宽度为 20 毫米。

  4. 英寸(in):英寸是英制长度单位,1 英寸等于 2.54 厘米。例如,width: 2in; 表示元素的宽度为 2 英寸。

  5. 常数(pc):常数单位是相对于排版中的点(1/72 英寸)进行计算的。例如,width: 3pc; 表示元素的宽度为 3 点。

  6. 常数(pt):常数单位也是相对于排版中的点进行计算的,1 点等于 1/72 英寸。例如,width: 36pt; 表示元素的宽度为 36 点。

  7. 字符宽度(ch):字符宽度单位表示相对于当前字体中字符 "0" 的宽度。例如,width: 10ch; 表示元素的宽度为当前字体中字符 "0" 的宽度的 10 倍。

  8. 字体大小(em):字体大小单位是相对于当前元素的字体大小进行计算的。例如,如果当前元素的字体大小为 16px,那么 width: 2em; 表示元素的宽度为 32px16px × 2)。

  9. 根元素字体大小(rem):根元素字体大小单位是相对于根元素(html 标签)的字体大小进行计算的。例如,如果根元素的字体大小为 16px,那么 width: 2rem; 表示元素的宽度为 32px16px × 2)。

  10. 视口高度(vh):视口高度单位表示相对于浏览器视口高度的百分比。例如,height: 50vh; 表示元素的高度为浏览器视口高度的 50%。

  11. 视口宽度(vw):视口宽度单位表示相对于浏览器视口宽度的百分比。例如,width: 80vw; 表示元素的宽度为浏览器视口宽度的 80%。

  12. 视口最小边(vmin):视口最小边单位表示相对于浏览器视口宽度和高度中较小的那个的百分比。例如,width: 50vmin; 表示元素的宽度为浏览器视口宽度和高度中较小的那个的 50%。

  13. 视口最大边(vmax):视口最大边单位表示相对于浏览器视口宽度和高度中较大的那个的百分比。例如,height: 70vmax; 表示元素的高度为浏览器视口宽度和高度中较大的那个的 70%。

这些单位可以根据需要选择,用于创建响应式设计或指定元素的固定尺寸。

请注意,对于视口相关单位(如 vhvwvminvmax),浏览器的视口大小会影响元素的最终尺寸。

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

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

相关文章

springboot116基于java的教学辅助平台

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于java的教学辅助平台 适用于计算机类毕业设计,课程设计参考与学习用途。仅供学习参考, 不得用于商业或者非法用途,否则,一切后果请用户自负。 看运行截图看 第五章 第四…

要编译 Qt 的 .pro 工程,可以使用 qmake 和 make 工具

要编译 Qt 的 .pro 工程,可以使用 qmake 和 make 工具。下面是一个基本的 Makefile 示例,用于编译 Qt 的 .pro 工程: # 指定编译器 CXX g # 指定 qmake 命令的路径 QMAKE qmake# 指定目标文件名和可执行文件名 TARGET myapp# 定义源代码文…

R语言入门——多变量移除

目录 0、引言1、单变量删除的例子2、多变量移除2.1 ls的用法 2.2多变量删除 0、引言 有很多小伙伴在运行程序的时候就想在每次循环结束时提出一些占用内存大且无用的数据或变量,或者仅仅保留一些数据,但是rm的语法在删除多变量时候需要和ls()函数联用。…

Java中的深拷贝与浅拷贝

深拷贝与浅拷贝 深拷贝和浅拷贝是编程中常用的两种对象复制方式,它们在复制对象时处理对象内部引用的方式上有所不同。 浅拷贝 浅拷贝(Shallow Copy)只复制对象的顶层结构,而不复制对象内部的引用对象。换句话说,浅…

基于光口的以太网 udp 回环实验

文章目录 前言一、系统框架整体设计二、系统工程及 IP 创建三、UDP回环模块修改说明四、接口讲解五、顶层模块设计六、下载验证前言 本章实验我们通过网络调试助手发送数据给 FPGA,FPGA通过光口接收数据并将数据使用 UDP 协议发送给电脑。 提示:任何文章不要过度深思!万事万…

从白子画到东方青苍,你选择谁来守护你的修仙之旅?

从白子画到东方青苍,你选择谁来守护你的修仙之旅? 在繁花似锦的修仙世界中,每一位追梦者都渴望有那么一位守护者,与你共患难,共成长。热血与浪漫交织的《花千骨》与《苍兰诀》,给我们带来了两位风华绝代的守护者:白子…

磁盘初始化会丢失文件吗?答案揭晓!

“由于我的电脑出现了一些问题,我就将磁盘初始化了,但是里面还有很重要的文件,磁盘初始化了文件会丢失吗?有什么方法可以恢复丢失的文件呢?” 当我们谈论磁盘初始化,通常是指对硬盘或固态驱动器&#xff08…

解决执行npm(或pnpm)时报:证书过期 certificate has expired问题

项目执行 pnpm install 初始化时报 reason: certificate has expired 错误。 解决方案 1、取消ssl验证:npm config set strict-ssl false这个方法一般就可以解决了。2、更换npm镜像源:npm config set registry http://registry.cnpmjs.org npm config …

第13节-简历中的开放性问题

(点击即可收听) 不少公司的开放式题目每年不会有太大的变化,所以在答题前可先去相关求职论坛看看这些公司往年的问题,分析和思考自己应当怎么回答 开放式问题回答技巧 开放式问题主要考察的是求职者的求职动机、解决问题的能力、创造力等软实力&#xff…

initdb: command not found【PostgreSQL】

如果您遇到 “initdb: command not found” 错误,说明 initdb 命令未找到,该命令用于初始化新的 PostgreSQL 数据库群集。这通常是因为 PostgreSQL 相关的工具未正确安装或者安装路径不在系统的 PATH 变量中。 以下是解决这个问题的一些建议&#xff1a…

linux|操作系统|centos7物理机安装网卡驱动8188gu(内核升级,firmware固件,USB设备管理,module管理)

前言: 目前服务器领域centos7基本是主流的操作系统,而linux相对于Windows来说,软硬件方面的支持是差很多的,在硬件方面来说,以一个免驱的网卡为例,window xp可能不会自动识别到,但Windows10基本…

wikijs在启动项目时遇到的问题

问题 使用PostgreSQL安装wikijs过程中,启动项目运行node server时,会报错如下: error: Database Initialization Error: create table "migrations" ("id" serial primary key, "name" varchar(255), "b…

JUC并发编程与源码分析学习笔记(二)

二十九、多线程锁之线程锁知识概述 说说Java“锁”事 从轻松的乐观锁和悲观锁开讲 通过8种情况演示锁运行案例,看看我们到底锁的是什么 公平锁和非公平锁 可重入锁(又名递归锁) 死锁及排查 写锁(独占锁)/读锁&a…

Java中创建List接口、ArrayList类和LinkedList类的常用方法(一)

List接口 要了解List接口,就不得不说起Java的集合框架。 (该图来自菜鸟教程) Collection接口和Map接口 Java 集合框架主要包括两种类型的容器,集合Collection和图Map。 Collection接口代表了单列集合,它包含了一组…

【知识---OpenCV库中的图像滤波算法作用】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言常见的图像滤波算法包括均值滤波、高斯滤波、中值滤波、双边滤波等,每种算法在不同的应用场景中都有其优劣之处。总结 前言 OpenCV(Ope…

微信公众号怎么申请超过2个

一般可以申请多少个公众号?目前公众号申请数量的规定是从2018年底开始实施的,至今没有变化。规定如下:1、个人可以申请1个个人主体的公众号;2、企业(有限公司)可以申请2个公众号;3、个体户可以申…

MyBatis 的XML实现方法(JAVA)

数据库表的结构如下: DROP DATABASE IF EXISTS test; CREATE DATABASE test DEFAULT CHARACTER SET utf8mb4; -- 使⽤数据数据 USE test; -- 创建表[⽤⼾表] DROP TABLE IF EXISTS userinfo; CREATE TABLE userinfo ( id INT ( 11 ) NOT NULL AUTO_INCREMENT, user…

如何本地搭建Splunk Enterprise数据平台并实现任意浏览器公网访问

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 本文主要介绍如何简单几步,结合cpolar内网穿透工具实现随时随地在任意浏览器,远程访问在本地…

MacM1Pro Parallels19.1.0 CentOS7.9 Install PostgrepSQL

相关阅读 MacM1Pro安装 Parallels Desktop 19.1.0 https://blog.csdn.net/qq_41594280/article/details/135420241 MacM1Pro Parallels安装Parallels Tools https://blog.csdn.net/qq_41594280/article/details/135398780 MacM1Pro Parallels安装CentOS7.9 https://blog.csdn.n…

win7或win10如何设置休眠不断网

win7电脑一断休眠wifi网络就会断,那么怎么办呢?该如何设置Win7电脑休眠时不断开WiFi呢?怎么办呢?下面为大家介绍一下方法能使大脑休眠时不断开WiFi网络。 设置Win7电脑休眠时不断开WiFi教程如下: 1、首先点击桌面右下角的.无线图标&#xf…