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),浏览器的视口大小会影响元素的最终尺寸。

相关推荐

  1. html元素以及根元素字体含义

    2024-01-23 06:54:01       55 阅读
  2. pytorchzero_grad()函数含义使用

    2024-01-23 06:54:01       29 阅读
  3. vuekeep-alive用法含义

    2024-01-23 06:54:01       32 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-23 06:54:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-23 06:54:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-23 06:54:01       82 阅读
  4. Python语言-面向对象

    2024-01-23 06:54:01       91 阅读

热门阅读

  1. 计算机网络(第六版)复习提纲7

    2024-01-23 06:54:01       61 阅读
  2. FFmpeg教程:libswscale对图像进行简单处理

    2024-01-23 06:54:01       57 阅读
  3. SQL基础知识(三)

    2024-01-23 06:54:01       46 阅读
  4. mockjs(3)

    mockjs(3)

    2024-01-23 06:54:01      45 阅读
  5. ffmpeg实现视频解码

    2024-01-23 06:54:01       59 阅读
  6. Docker安装mysql

    2024-01-23 06:54:01       57 阅读
  7. PyTorch ,TensorFlow和Caffe之间的区别

    2024-01-23 06:54:01       58 阅读
  8. python 面经

    2024-01-23 06:54:01       58 阅读
  9. cocoapods 常用命令

    2024-01-23 06:54:01       51 阅读