首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

（CSS）px，pt，em，rem的区别

作者：mobiledu2502881573 | 来源：互联网 | 2023-07-22 19:15
一、绝对长度单位绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨率的设备，

一、绝对长度单位

绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨率的设备，如屏幕、高分辨率设备，如打印机，该锚定是不同的。

1.1 px（像素）

像素与显示设备相关。对于屏幕显示，通常是一个设备像素（点）的显示。对于打印机和高分辨率的屏幕，一个px意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

用像素字体定义使得字体大小不可由用户的浏览器改变。所以，如果想创造能广泛使用的设计请避免使用像素设定字体。

1.2 pt（磅）

1pt = (1 / 72)in。
另外：1in = 96px，3pt = 4px，25.4mm = 96px等。

二、相对长度单位

相对字体大小的单位

2.1 em

em值的大小是动态的。当定义font-size属性时，1em等于元素的父元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px，2em = 32px。如果你设置了body元素的字体大小为20px，那1em = 20px，2em = 40px。那个2就是当前em`大小的倍数。




var cpro_id = "u6885494";
推荐阅读
  • build

    新浪笔试题

    1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • js

    国内BI工具迎战国际巨头Tableau，稳步崛起

    国内BI工具迎战国际巨头Tableau，稳步崛起
    尽管商业智能（BI）工具在中国的普及程度尚不及国际市场，但近年来，随着本土企业的持续创新和市场推广，国内主流BI工具正逐渐崭露头角。面对国际品牌如Tableau的强大竞争，国内BI工具通过不断优化产品和技术，赢得了越来越多用户的认可。 ... [详细]
  • js

    2018回顾与2019展望

    本文总结了2018年的关键成就，包括职业变动、购车、考取驾照等重要事件，并分享了读书、工作、家庭和朋友方面的感悟。同时，展望2019年，制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • js

    四载相伴，与51CTO学院共成长

    在计算机技术的学习道路上，51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域，51CTO学院始终是我信赖的学习平台。 ... [详细]
  • base64

    信息安全小组第一周工作总结

    本周信息安全小组主要进行了CTF竞赛相关技能的学习，包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外，还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • chrome

    技术分享：从动态网站提取站点密钥的解决方案

    技术分享：从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]
  • js

    Linux 系统启动故障排除指南：MBR 和 GRUB 问题

    Linux 系统启动故障排除指南：MBR 和 GRUB 问题
    本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]
  • html

    Java并发编程：LinkedBlockingQueue的实际应用

    本文介绍了Java并发库中的阻塞队列（BlockingQueue）及其典型应用场景。通过具体实例，展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递，并结合线程池和原子类优化性能。 ... [详细]
  • chrome

    Python爬虫实战：豆瓣电影Top250数据抓取

    本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]
  • js

    Linux 自动化安装脚本详解

    本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • webkit

    分页插件3指定到某一页

    前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]
  • webkit

    深入理解CSS盒模型与box-sizing属性

    本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • js

    在Linux系统中配置并启动ActiveMQ

    在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]
  • js

    如何在WPS Office for Mac中调整Word文档的文字排列方向

    如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]
  • js

    存储器层次结构、随机访问存储器与数据存取机制

    理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]
author-avatar
mobiledu2502881573
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有