CSS 单位

Wonfody 2020-11-13 17:06:11
HTML/CSS css SegmentFault 单位


单位的基本用法

  • CSS 有几个不同的单位用于表示长度。
  • 一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。
  • 长度有一个数字和单位组成如 10px, 2em, 等。
  • 数字与单位之间不能出现空格。如果长度值为 0,则可以省略单位。
  • 对于一些 CSS 属性,长度可以是负数。
  • 有两种类型的长度单位:相对和绝对。

浏览器支持

下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位 Chrome IE Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 9.0 19.0 6.0 20.0
vmax 26.0 不支持 19.0 不支持 20.0

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

单位 描述
em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
ex 依赖于英文字母小 x 的高度
ch 数字 0 的宽度
rem rem 是根 em(root em)的缩写,rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小。
vw viewpoint width,视窗宽度,1vw=视窗宽度的1%
vh viewpoint height,视窗高度,1vh=视窗高度的1%
vmin vw和vh中较小的那个。
vmax vw和vh中较大的那个。
%
提示: rem与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

单位 描述
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px 像素 (1px = 1/96th of 1in)
pt point,大约1/72英寸; (1pt = 1/72in)
pc pica,大约6pt,1/6英寸; (1pc = 12 pt)
像素或许被认为是最好的"设备像素",而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。
版权声明
本文为[Wonfody]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000038162814

  1. css单位
  2. CSS unit
  3. 前端验证集合
  4. Front end validation collection
  5. Front end learning (4) -- response line, response head, response body
  6. Lesson 27: using time measuring tools to explore available spare time
  7. CSS unit
  8. 前端工具集合
  9. Front end Tools Collection
  10. Introduction to HTTP message format
  11. Introduction to new features of HTML5
  12. Common instructions for Vue
  13. Introduction of bootstrap Blazer component library
  14. HTML5 速览
  15. HTML5 quick view
  16. HTML表格自动排序
  17. For less than $1700, create a private cloud with openstack
  18. Basic learning of JavaScript (1)
  19. 前端编程之路一一HTML标签分类
  20. Front end Programming: HTML tag classification
  21. ColSpan and rowspan merging cells of HTML form elements
  22. JavaScript 日期时间格式化
  23. JavaScript date time formatting
  24. Classification of front end interview questions - html2
  25. CSS block elements
  26. HTML5 form detailed tutorial
  27. HTML5 form detailed tutorial
  28. HTML5新增的元素表
  29. New element table in HTML5
  30. 3D轮播插件vue-carousel-3d非官方最全文档
  31. 3D carousel plug-in vue-carousel-3d
  32. Uniapp (Vue general) integrates Tencent location service SDK -- multi platform small program general
  33. Slowhttptest slow attack tool use details
  34. HTML summary (2)
  35. Overview of CSS3
  36. Front end abnormal monitoring system
  37. 免费网站部署和免费数据库Serverless云存储资源汇总整理
  38. Free website deployment and collection of free database serverless cloud storage resources
  39. Vux form -- a form solution of base vux
  40. 可以直接用于HTML中的特殊字符表 unicode字符集
  41. Can be directly used in HTML special character table Unicode character set
  42. Detailed explanation of HTTP protocol
  43. HTTP request header and request response header
  44. CSS background深度解析
  45. Python web/HTML GUI
  46. Front end standard 2: HTML you know and don't know
  47. Some HTML tags
  48. HTML标签之table
  49. Table of HTML tag
  50. DataTables of jQuery plug-in
  51. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  52. Linux entry most commonly used commands, do not learn a bunch of useless commands
  53. Piziheng embedded: a list of common short-range wireless communication protocols (Wi Fi / Bluetooth / ZigBee / thread...)
  54. Naming rules for the front end team of ladder
  55. HTML logo related symbols
  56. Node . JS: development resources and technology stack arrangement
  57. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  58. Straighten out JavaScript (18) - statements and operators
  59. Employment information statistics network (interface document)
  60. css selector