前端必看!css中常用单位及区别

作为一名前端开发人员,我们在编写css的时候常需要使用到单位,那么常用的单位有px、%、em、rem、vw、vh、vmin、vmax等,虽然有的是很常用的单位,但是他们代表的意义各不相同,让我们来了解一下他们之间的区别吧!
常用的单位共分为两大类,一类叫绝对单位,一类叫相对单位
绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
一、固定单位:
1、px(pixel)像素通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点,对于高清屏则对应更多。它做不到自适应的效果。早些时候pc端页面开发基本都使用像素这个单位。在这里插入图片描述
二、相对单位
1、%(百分比)浏览器根据其父级元素的样式来计算值。父元素改变的时候,子元素大小自动改变。在这里插入图片描述
2、em:相对于父元素的字号大小来计算值,当元素自身有字号大小时,则按照元素自身字号大小来计算值。通常情况下浏览器默认字号大小为16px,则2em = 32px
当父元素自身没有设置字号大小在这里插入图片描述
在这里插入图片描述
当父元素设置字号大小并且子元素自身有字号大小在这里插入图片描述
在这里插入图片描述
3、rem:rem(root em)是相对于根目录字号大小进行计算。一个页面有且只有一个根目录html。在这里插入图片描述
在这里插入图片描述
4、vw:vw(viewpoint width)视口宽度,可以理解为整个屏幕宽为100vw,那么1vw = 视口宽度的1%,可以达到屏幕自适应。在这里插入图片描述
在这里插入图片描述
5、vh:vh(viewpoint height)视口高度,可以理解为整个屏幕高为100vh,那么1vh = 视口高度的1%,可以达到屏幕自适应。在这里插入图片描述
在这里插入图片描述
6、vmin:取vw和vh中较小的那一个的值。将窗口最小的一边分为100份,每1vmin是视图窗口最小的一边的1/100。在这里插入图片描述
在这里插入图片描述
7、vmax:取vw和vh中较大的那一个的值。将窗口最大的一边分为100份,每1vmax是视图窗口最大的一边的1/100。在这里插入图片描述
在这里插入图片描述
以上是开发中常用的单位,欢迎各位小伙伴积极补充!!!

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值