CSS常见单位:px、%、em、rem、vh、vw
全部单位:%、px、cm、mm、in、pt、pc、ch、em、 ex、rem、vh、vw、vmin、vmax

本文主要内容只会讲解常见css单位,并不会过深的去探讨(学而用不到,很快就会忘记)

单位描述
px像素(Pixel)是相对长度单位,px是相对于显示器屏幕分辨率而言的单位
%百分比
emem的值并不是固定的,他会继承父级元素的大小
remrem是CSS3新增的一个相对单位(root em,根em),表示rem会相对于html根元素,而em是相对于父元素
vh视图窗口的高度(viewport heigth)
vw视图窗口的宽度(viewport width)

1px:是相对单位,不管窗体怎么变化,它都是定死的

1%:是相对单位,它是相对于父元素的百分比,举例:父元素宽度为100px,子元素设置50%,那么子元素是父元素的一半(50px)

em:是相对单位,它是相对于父元素的,举例:父元素字体大小为20px,子元素设置2em,那么子元素40px。如果直接在body里使用,而为修改过body的默认大小,那么html的默认大小是14px,如果写2em的话就是28px

rem:是相对单位,它是相对于根(root em)的缩写,相对于根元素的大小,与em不同的是em是相对与父元素指定的大小,而rem是相对于根元素大小

vh:是相对单位,它是相对与窗体高度(也就是浏览器显示区域的高度),举例:如果你现在使用手机浏览,假设手机高200px,宽100px,那么1vh=20px,1vw=10px

vw:是相对单位,它是相对与窗体宽度(也就是浏览器显示区域的宽度),举例:同上vh

文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/CSS-units.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论