首页 > 其他分享 >CSS基础知识:css的尺寸是如何计算的,px和em的区别在哪里?

CSS基础知识:css的尺寸是如何计算的,px和em的区别在哪里?

时间:2024-03-23 19:34:04浏览次数:40  
标签:em px 像素 像素点 font 分辨率 CSS size

讲解将以font-size为例

font-size,元素内部文字的尺寸大小

1.px:像素

像素是什么意思呢?

解释:在日常生活中不管是我们看到的电子图片,还是计算机的界面,实际上它是由很多很多的点组成的。那么如何理解呢?以咱们所用的电脑为例

右键打开显示设置:                        

        

找到显示器分辨率:

 你会发现这个分辨率值为1920x1080,你可以将它简单的理解为电脑屏幕被分成了1080行,1920列

这样的表格,这个表格的每一个单元格,就是一个像素点,又因为这个像素点足够小,你的肉眼无法感受到一个一个小点,分辨率越高,就意味着你的显示就越精细。

总结:

px:像素(绝对单位),(这里以文字像素(font-size)解释)简单的理解为文字的高度占多少个像素。

2.em:

相对单位,相对于父元素的字体大小

举例说明:

1.

2.

 

 

3.打开计算样式(Computed)

 

标签:em,px,像素,像素点,font,分辨率,CSS,size
From: https://blog.csdn.net/zxn275266/article/details/136963228

相关文章

  • [code notes] the implementation of alter table
    OverviewInthisarticle,Iwillinspectthepostgresqlcodetofindouttheimplementationofaltertablecommand,specifically,theaddcolumnsubcommandofthealtertablecommand.Thecodeforthisarticleisfrompostgresqlcommithash21e3a8bc3544a1......
  • Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式,解决覆盖不生效
    前言如果需要Vue2版本,请访问这篇文章。本文实现了在vue3+element-plus网站开发中,完美覆盖el-select选择器样式,强力修改select下拉选择框placeholder样式,同时也支持修改文字、大小、边框、等,支持任意样式的覆盖修改!网上的教程几乎都不生效,使用本教程的方法......
  • c# 调用ImageMagick实现HEIC格式的图片转成jpg
    nuget安装Magick.NET-Q8-AnyCPU我项目Framework未4.5.1这安装的7.17.0版本的包:程序集引用:usingImageMagick;ConvertHeicToJpg方法转换代码如下:点击查看代码///<summary>///Heic转ToJpg///</summary>///<paramname="heicPath......
  • WinAppSDK / WinUI3 项目无法使用 SystemEvents 的问题
    SystemEvents是一个开发win32窗口项目很常用的类,其中封装了一些常用的系统广播消息。在WinUI3项目中,SystemEvents事件经常无法触发,简单排查了一下原因。SystemEvent内封装了一个线程和一个窗口,通过窗口消息在内部线程上调用事件,内部使用了SystemEventInvokeInfo对象来保......
  • CF794F Leha and security system 题解
    题目链接:CF或者洛谷首先观察到题目的修改\(x\rightarrowy\),是每个位置的\(x\)都要变,那就显然的拆位去算每一位的贡献。当然,你又发现\(x\rightarrowy\),这玩意属于值为\(x\)的位变化成\(y\),那么这个和普通的拆位区别就在于这是维护值域维的拆位,我们拆位\(0\sim9\)......
  • My understanding of pedagogic metalanguage in "The Three-Body Problem "
    ......
  • 一文聊透 Flink 的 Temporal Join
    博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,京东购书链接:https://item.jd.com/12677623.html,扫描左侧二维码进入京东手......
  • 利用termux和qemu虚拟机使用docker
    操作前提由于大部分手机的内核并不满足使用docker的要求,因此需要用root权限修改手机部分kernel来满足,但是手机root并不适用所有手机,而且root也有一定的风险,因此使用termux终端来通过qemu虚拟机进行容器化操作可以实现满足docker运行的要求。操作步骤安装termux或者zerotermux......
  • 推荐六个常用的CSS动画库
    目录 一、Animate.css二、animista三、MagicCSS四、CSShake 五、Hover.css​六、Loaders.css  我的博客原文:推荐六个常用的CSS动画库 一、Animate.css官网地址:Animate.css|Across-browserlibraryofCSSanimations.​Animate.css是一个即用型跨浏览器动......
  • web CSS笔记
    CSS(CascadingStyleSheets)美化样式CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整......