CSS单位你真的了解吗?

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

Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/CSS-units.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !