首页
学习
活动
专区
工具
TVP
发布

CSS:绝对单位、相对单位

作者:Abudula__ 我们对单位很熟悉,比如说,千克,千米,米等,这些就是绝对单位,我们又有听到太阳的质量等于33个地球,这个就是相对单位。在CSS中,单位也可以分为这两类。...另外 CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。...em em 也是一种相对单位,既然是相对单位,那么肯定有一个参照值。不过其参照值并不是固定不变的,而是不同的属性有不同的参照值。...vw, vh, vmin, vmax 最后要介绍的这四个单位属于 v 系单位,它们也是相对单位,是基于视窗大小(浏览器用来显示内容的区域大小)来计算的。...单位运算 除了设置以上的单位之外,我们还可以使用 calc 来进行单位运算,单位运算时可以使用各种单位进行加减乘除运算。

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

CSS尺寸单位介绍

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系...css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。 在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。...就是我们开发过程中使用的css中的px 设备像素比(device pixel radio) 设备像素比 = 物理像素 / 设备独立像素,单位是dpr!...,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位。...这时候rem出现了 rem rem 是CSS3的一个相对单位(root em,根em) 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素 只要html的font-size大小不变

1.6K20

1.CSS单位-CSS进阶

一、CSS单位 1.绝对单位CSS中,绝对单位定义的大小是固定的。使用的是物理度量单位,显示效果不会受外界因素影响。 但绝对单位一般多用于传统平面印刷,而极少用于前端开发。...在前端开发中,都不会用到绝对单位。 2.相对单位CSS中,相对单位定义的大小是不固定的。...3个小技巧 在CSS中,em作为单位有以下 3 个小技巧: 首行缩进使用text-index:2em实现。 使用em作为统一单位。 使用em作为字体大小单位。...使用em作为统一单位例2.png 在CSS中,em是相对于当前元素的字体大小而言。...rem示例1.png (6)实际开发 在实际开发中,CSS单位用px好还是em好呢? 在国外,大部分主流网站都是使用em作为单位,而且W3C也建议使用em作为单位

47721

CSS尺寸单位介绍

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系...css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。...就是我们开发过程中使用的css中的px 设备像素比(device pixel radio) 设备像素比 = 物理像素 / 设备独立像素,单位是dpr!...,但是后面要说的rem是基于em的,所以,对em进行简单介绍 em 是相对长度单位。...这时候rem出现了 rem rem 是CSS3的一个相对单位(root em,根em) 使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素 只要html的font-size大小不变

1.4K30

CSS 尺寸单位概述

关于 CSS 尺寸单位 CSS 提供了多种指定元素大小或长度的方式,其中一些更为直观。...CSS 单位可分为四大类: 「绝对单位」,比如cm和px 「字体相对单位」,比如em和ch 「视口相对单位」,比如vw和vmin 「容器相对单位」,比如cqw和cqh 我们将在本文中介绍每种 CSS 单位...对于纸张等物理介质,绝对 CSS 单位与相应的物理单位挂钩。对于屏幕来说,绝对单位为像素。一个像素大约是 1/96英寸。...到目前为止,我们已经介绍了绝对长度和字体相对单位。不过,CSS 还支持另外两种尺寸单位:视口相对单位和容器相对单位。...容器相对单位目前是在 CSS Containment Module Level 3[1]中定义的,而不是在CSS Values and Units Module Level 4[2]规范中。

19110

CSS 中的各种单位

之前遇到 css 中需要使用单位的情况,都草草用 px 或者百分比糊弄过去,导致当需要做一个响应式的页面的时候,要重新补一下 css 单位的技术债。...px px 是 css 中最常用的字体大小单位。...px 就是表示 pixel,像素,是屏幕上显示数据的最基本的点;还有一个看起来很像的单位 pt,pt 就是 point,是印刷行业常用单位,等于1/72英寸,一般在打印的时候使用。...像素 px 是相对于显示器屏幕分辨率而言的,所以一般把它看做一个基础单位,很多其它单位都是以 px 为参照的。...百分比 css 中的百分比是一种相对值,使用百分比的关键是找到它的参照物。 属性 参照 width & height 宽和高在使用百分比值时,其参照一般都是父元素的 content 的宽和高。

72120

CSS 中的相对单位

CSS 带来的抽象性也带来了额外的复杂性。相对单位就是 CSS 用来解决这种抽象的一种工具。...CSS 单位通常会根据浏览器、操作系统或硬件适当缩放,但是通常 96px 为一个物理英寸的大小。 # em 和 rem em 是最常见的相对长度单位,适合基于特定的字号进行排版。...在 CSS 中,1em 等于当前元素的字号,其准确值取决于作用的元素。 浏览器会根据相对单位的值计算出绝对值,称作计算值(computed value)。...长度——一种用于测量距离的CSS值的正式称谓。它由一个数值和一个单位组成,比如 5px。长度有两种类型:绝对长度和相对长度。百分比类似于长度,但是严格来讲,它不是长度。...可以用一个无单位的数值给 body 设置行高,之后就不用修改了,除非有些地方想要不一样的行高。 # 自定义属性(CSS 变量) 可以声明一个变量,为它赋一个值,然后在样式表的其他地方引用这个值。

86820

一文读懂 CSS 单位

说起CSS单位,我们最熟悉的可能就是像素单位(px),它是一个绝对单位,也就是说一个10px的文字,放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。...CSS单位的形式有很多种,下面就分别来看看这些单位。 1. 相对单位 相对单位就是相对于另一个长度的长度。...所以,在使用频率单位时,不要直接写0。另外,这两个单位是不区分大小写的。 4. 时间单位 CSS中的时间单位有两个:秒(s)和毫秒(ms)。这两个时间单位都是CSS新增的单位。...分辨率单位 CSS中的分辨率单位有三个:dpi、dpcm、dppx。这三个单位都是CSS3中华新增的单位。他们都是正值,不允许为负值。...角度单位 CSS中的角度单位有四个:deg、grad、rad、turn。这些角度单位都是CSS3中新增的单位

58210

CSS中常见的长度单位

1.CSS中常见的长度单位 名称 英文全称 中文名 相对/绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素...(2)CSS中设置字体大小(font-size)请尽量使用em或者ex代替px,原因是用px做描述字体大小唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。 2....CSS3中新增的度量单位 (1)ch——字符0(零)的宽度; (2)rem——根元素(html元素)的em; (3)vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%;...(2)rem单位感觉就是px+em的变体,是否值得使用还要看你自己的取舍:没有px精确也没有em灵活。 如果没有定义font-size怎么办? (3)浏览器支持情况。...参考文献 [1]http://www.w3school.com.cn/cssref/css_units.asp [2] http://zhidao.baidu.com/question/41363325

1.2K20

CSS】浅谈 CSS 中常用的相对长度单位 em, rem

浅谈CSS中常用的相对长度单位 顾名思义,相对单位是根据与其他事物的关系来度量。所以,要注意到,所度量的实际距离,可能会因为不在其控制之下的其他因素而改变。如屏幕分辨率、可视区域的宽高等等。...并且,对于某些相对单位,其大小会因使用该单位的元素的不同而不同。 em CSS中,em 被定义为给定字体的font-size值。如果一个元素的font-size为14px,那么1em=14px。...但是,我们前面说到,相对单位的大小会因为使用该单位的元素的不同而不同。...CSS属性line-height,font-size,margin-bottom和margin-top常具有一个用em表示的值。...对于打印机和高分辨率的屏幕,一个CSS像素意味着多个设备像素,因此,每英寸的像素的数量保持在96左右。

15620

如何决定响应式网站的 CSS 单位

在我们创建适合各种设备的响应式网站时,了解正确的CSS 单位很重要。不过在深入研究决策之前,让我们先对它们进行分类以便了解它们的用途。 如何决定响应式网站的 CSS 单位?...px 单位单位 ⚓ em 单位 rem 单位 vw 单位 vh 单位 wuhu ! 起飞 !...概括总结 1.绝对单位 px - 像素 pt - 点 pc - Picas in - 英寸 cm - 厘米 mm - 毫米 2.百分比单位 百分比 % 单位 3.相对单位 相对于字体大小 em rem...- 根 em 相对于查看端口/文档 vw vh vmax vmin 在这里学习最常见的单位 px 单位 绝对像素单位仅用于屏幕(界面),其余单位用于打印。...这些是 6 个 css 单元,它们最常用于使网站具有响应性。 我已经写了很长一段时间的技术博客,并且主要通过CSDN发表,这是我的一篇 响应式网站的 CSS 单位教程。我喜欢通过文章分享技术与快乐。

89210

CSS 你到底有多少长度单位

听说糙着干活的只靠 px 和 % 闯天下,不知道在看文章的你是不是也是其中一员,哈哈哈哈 都 9102 年了,移动端 em 和 rem 霸占天下,总会有人问你两者的区别;vw 和 vh 也展露头角,拥护者与日俱增;css3...中还有新增的计算函数 calc() ,又或是 CSS 变量再配合 JS,真的是越来越强大了!...它们的兼容性如下 视口比例单位 vh、vw、vmin、vmax 在 css3 中新增了和 Viewport 相关的四个单位,随着时间推移,目前各浏览器环境也能跟上了,这也是当前/未来最建议的在伸缩方案中用的单位...视口宽高对应 window.innerWdith 和 window.innerHeight 而当前的兼容性如下: CSS3 其他新特性的搭配使用 从几个案例来研究下 1....CSS 变量 与 JS 搭配使用 切换主题直接改 css 中的变量 function changeTheme (color) const docStyle = document.documentElement.style

41120

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度,使用时数字加单位。如果长度为0,则可以省略单位。 长度单位可分为两种类型:相对和绝对。...绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器、分辨率、操作系统等。...具体单位以及解释如下: px像素:一个像素就相当于我们屏幕中的一个小点,屏幕实际就是由很多个像素点构成的,不同显示器像素大小不同,像素越小,显示效果就越好。 cm厘米:这个单位大家常见,不解释。...mm毫米:这个单位大家常见,不解释。 in英寸:1in = 96px = 2.54cm pt:point 。1in = 72pt pc:pica。...一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

38610
领券