学习
实践
活动
专区
工具
TVP
写文章

CSS:绝对单位、相对单位

作者:Abudula__ 我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。 在第二个box里,300px的小框跟上面的框的300px一样长,而第二个框里面的50%跟第一个框的50%为不一样,这个就很好的解释了相对单位和绝对单位。 em em 也是一种相对单位,既然是相对单位,那么肯定有一个参照值。不过其参照值并不是固定不变的,而是不同的属性有不同的参照值。 vw, vh, vmin, vmax 最后要介绍的这四个单位属于 v 系单位,它们也是相对单位,是基于视窗大小(浏览器用来显示内容的区域大小)来计算的。 单位运算 除了设置以上的单位之外,我们还可以使用 calc 来进行单位运算,单位运算时可以使用各种单位进行加减乘除运算。

53920
  • 广告
    关闭

    新年·上云精选

    热卖云产品新年特惠,2核2G轻量应用服务器9元/月起,更多上云必备产品助力您轻松上云

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS常用单位

    CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位 绝对长度单位 px 像素 通常而言,一个CSS像素代表屏幕设备的一个像素点,但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素,也就是说有多个屏幕像素点来表示1px,1px = 1in / 96。 } #t6{ width: 1pc; } </style>

    相对长度单位 html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生相应的变化 % 当度量单位设置为百分比时,即可使浏览器组件宽高随着浏览器的大小相应变化。

    40220

    CSS尺寸单位介绍

    前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系 css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。 在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。 物理像素 它是显示器(电脑、手机屏幕)最小的物理显示单位,物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。 设备独立像素 我上一张图,你就会理解什么是设备独立像素 ? 就是我们开发过程中使用的css中的px 设备像素比(device pixel radio) 设备像素比 = 物理像素 / 设备独立像素,单位是dpr! ,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位

    42920

    Oracle SQL统计各单位及其子级单位用户总数

    Oracle SQL统计各单位及其子级单位用户总数 业务场景:最近帮同事写一个sql,业务是统计各个单位及其子单位用户总数,听起来是挺容易的,所以拿起键盘就是敲: select sum(t.ucount bs.unit_code = uinfo.unit_code group by uinfo.unit_code, uinfo.unit_name) t; 不过这个只能传个顶级单位编码 ,一个一个查,这样肯定很耗时,所以还是自己想太简单了,摸索了好一阵子,想到方法: ①、新建一个函数,传一个顶级单位编码,通过函数统计本单位及其子单位的用户总数 create or replace function select FH_UNIT_USER_COUNT(uinfo.unit_code) as 用户总数, uinfo.unit_code as 单位编码, uinfo.unit_name as 厅单位名称 from t_unit_info uinfo group by uinfo.unit_code, uinfo.unit_name order by 用户总数 desc nulls

    36520

    Flutter 大小单位详解

    关于Flutter 大小所使用的单位,官方文档没有给出非常明确的解释,因此一直存在模糊的说法,许多从事安卓开发者直接将之解释为安卓开发所用的单位dp,我认为这是非常不明智且不准确的说法,这个不准确不在于实质的数值 应当如何理解Flutter 的大小单位? 到这里我们大概能明白Flutter官方的意思,Flutter框架希望提供一个新的尺寸单位的概念,称为逻辑像素,然后让大家忘记原生开发中的单位。 这是因为Flutter作为一个跨平台的框架,必须抽离出一个新的单位,用以适配不同的平台,如果还去使用原生的单位概念,就会造成混淆或屏幕适配的问题。 结论,在Flutter的语境下,不应该将逻辑像素直接描述为原生开发中的单位概念 Flutter的逻辑像素是如何计算出来的?

    1.8K00

    CSS尺寸单位介绍

    前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系 css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。 物理像素 它是显示器(电脑、手机屏幕)最小的物理显示单位,物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。 就是我们开发过程中使用的css中的px 设备像素比(device pixel radio) 设备像素比 = 物理像素 / 设备独立像素,单位是dpr! ,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位

    44530

    Flutter 大小单位详解

    关于Flutter 大小所使用的单位,官方文档没有给出非常明确的解释,因此一直存在模糊的说法,许多从事安卓开发者直接将之解释为安卓开发所用的单位dp,我认为这是非常不明智且不准确的说法,这个不准确不在于实质的数值 应当如何理解Flutter 的大小单位? 到这里我们大概能明白Flutter官方的意思,Flutter框架希望提供一个新的尺寸单位的概念,称为逻辑像素,然后让大家忘记原生开发中的单位。 这是因为Flutter作为一个跨平台的框架,必须抽离出一个新的单位,用以适配不同的平台,如果还去使用原生的单位概念,就会造成混淆或屏幕适配的问题。 结论,在Flutter的语境下,不应该将逻辑像素直接描述为原生开发中的单位概念 Flutter的逻辑像素是如何计算出来的?

    45120

    Android的尺寸单位

    各应用为了保证可以在各机型上展示较好的交互界面,就需要在实现阶段根据对应的尺寸单位进行兼容性开发。近期在实际项目过程中,小编接触到了一些尺寸度量单位,下面进行简单的总结。 像素密度:屏幕上像素的物理密度,即屏幕单位面积内的像素数,称为 dpi(dots per inch,每英寸的点数)。它与分辨率不同,后者是屏幕上的总像素数。 3. dp 介绍 这个是最常用的尺寸单位,它与“像素密度”密切相关。 如果你拿这两部手机放在一起对比,会发现这个图片的物理尺寸“差不多”,实现了“密度独立性”,使用dp作为单位的效果可见下图。 ? 当指定文本大小时,则会使用可缩放像素 (sp) 作为单位

    66210

    突出贡献单位

    近日,可信人脸应用守护计划(以下简称“护脸计划”)在线上成功召开了2022年度第一次全体成员大会,会上重磅公布了2021年度“护脸计划”突出贡献单位及个人评选成果—— 其中,腾讯云荣获“突出贡献单位” 作为“护脸计划”成员单位,腾讯云积极参与各项测评工作,并基于自身的技术积极进行人脸识别相关技术能力建设。本次荣获“突出贡献单位”,将为进一步提升“护脸计划”的权威性,培育壮大护脸生态圈提供助力。 作为腾讯AI技术与产品服务的输出口,依托腾讯优图等人工智能实验室,腾讯云AI在人脸安全领域有着丰富的技术积累和业务落地经验。 在标准制定、评估测试、生态建设等方面持续发力,与各成员单位共同构建共治、共赢、共享的“护脸”生态。 |《失控玩家》:AI自我觉醒与程序员的浪漫情书 | 黑产肆虐的背后,人工智能如何剥开“面具”伪装?| 加速普惠AI,腾讯云AI在下一盘什么大棋?| 谁,复制了另一个我?

    21050

    关注

    腾讯云开发者公众号
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 腾讯云 TI 平台

      腾讯云 TI 平台

      智能钛机器学习(TI-ML)是基于腾讯云强大计算能力的一站式机器学习生态服务平台。它能够对各种数据源、组件、算法、模型和评估模块进行组合,使得算法工程师和数据科学家在其之上能够方便地进行模型训练、评估和预测……

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券